`
anson_xu
  • 浏览: 514975 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类

ext webwork+hibernate+spring crud ssh2 记录

    博客分类：
  • Ext
EXTWebworkSpringHibernateMobile 
阅读更多
1.login jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="ww" uri="/webwork" %>
<html>
<head>
<title>文檔管理系統</title>
<link href="../css/css.css" rel="stylesheet" type="text/css">
<script type='text/javascript' src='../js/Constants.js'></script>
<script type='text/javascript' src='../dwr/interface/swsMstrService.js'></script>
<script type='text/javascript' src='../dwr/interface/codeService.js'></script>
<script type='text/javascript' src='../dwr/interface/authJS.js'></script>
<script type='text/javascript' src='../dwr/util.js'></script>
<script type='text/javascript' src='../dwr/engine.js'></script>

  <link rel="stylesheet" type="text/css" href="../ext-2.2.1/resources/css/ext-all.css" />
  <script type="text/javascript" src="../ext-2.2.1/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="../ext-2.2.1/ext-all.js"></script>
  <!-- script type="text/javascript" src="../ext-2.2.1/dwrproxy.js"></script-->
  <script src="extjs/ext_login.js" type="text/javascript"></script>
</head>

<body style="margin:0pt;padding:0pt" class="x-box-blue">
        <div id="loginform"></div>
</body>
</html>


2.login extjs
Ext.onReady(function(){
var form1 = new Ext.form.FormPanel({
       //renderTo:"loginform", //要渲染的div
       labelWidth: 75, // label settings here cascade unless overridden
       labelAlign:'right',
       monitorValid : true,// 把有formBind:true的按钮和验证绑定
       baseCls : 'x-plain',
       //method:'POST',
       //title: '登录',
       bodyStyle:'padding:5px 5px 0',
       width: 300,
       defaults: {width: 150},
       defaultType: 'textfield',// 默认字段类型
       //实现非AJAX提交表单一定要加下面的两行！
       //onSubmit: Ext.emptyFn,
       //submit: function()
      // {
           //this.getEl().dom.action= 'index.jsp'; //连接到服务器的url地址
           //this.getEl().dom.action='extlogin.action';
           //this.getEl().dom.submit();
      // },
      
       items: [{
           fieldLabel: '用户名',
           id: 'username',
           name: 'user.username',  
           allowBlank:false,
           blankText : "用户名不能为空"
           //width:150
           },{
           fieldLabel: '密码',
           blankText : "密码不能为空",
           id: 'user.password',
           name: 'user.password',
           allowBlank:false,
           minLength : 4,
           //width:150,
           inputType:'password' //类型为password
       }
       ],
       buttons: [{
           text: '登录',
           //type:'button',
           type:'submit',
           formBind : true,
           id:'login',
           handler: function()
           {
                  if (form1.form.isValid()) {// 验证合法后使用加载进度条
                           Ext.MessageBox.show({
                                         title : '请稍等',
                                         msg : '正在登陆...',
                                         progressText : '',
                                         width : 300,
                                         progress : true,
                                         closable : false,
                                         animEl : 'loading'
                                    });
                           // 控制进度速度
                           var f = function(v) {
                                return function() {
                                    var i = v / 11;
                                    Ext.MessageBox.updateProgress(i, '');
                                };
                           };
                            for (var i = 1; i < 12; i++) {
                               setTimeout(f(i), i * 150);
                           }

                           // 提交到服务器操作
                           form1.form.doAction('submit', {
                                         url : 'extlogin.action',// 文件路径
                                         method : 'post',// 提交方法post或get
                                         params : '',
                                         // 提交成功的回调函数
                                        success : function(form, action) {
                                     if (action.result.msg == 'ok') {
                                         window.location.href = 'ext_viewport.jsp';
                                     } else {
                                         Ext.Msg.alert('登陆失败',action.result.msg);
                                     }
                                 },

                                 // 提交失败的回调函数
                                 failure : function() {
                                     Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
                                 }
                           });
                      }
                  }
             }, {
                  text : '取消',
                  handler : function() {
                  form1.form.reset();
                  }// 重置表单
}]
   });
var win = new Ext.Window({
        layout      : 'fit',
        width       : 300,
        height      : 150,
        closeAction :'hide',
        plain       : true,
        modal:true,
        closable: false,
        resizable: false,
        plain: true,
        border: false,
title:'登录',
bodyStyle:'padding:5px;',
buttonAlign:'center',
        items:form1            
            });
        win.show();

});
3.list jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="ww" uri="/webwork" %>
<html>
<head>
<title>仓点管理</title>
<link href="../css/css.css" rel="stylesheet" type="text/css">

  <link rel="stylesheet" type="text/css" href="../ext-2.2.1/resources/css/ext-all.css" />
  <!--  script type="text/javascript" src="../ext-2.2.1/adapter/ext/ext-base.js"></script-->
  <!--  script type="text/javascript" src="../ext-2.2.1/ext-all.js"></script-->
  <script src="../Inventory/extjs/ext_stock_list.js" type="text/javascript"></script>
  <script src="../Inventory/extjs/ext_stock_add.js" type="text/javascript"></script>
  <script src="../Inventory/extjs/ext_stock_edit.js" type="text/javascript"></script>
</head>

<body style="margin:0pt;padding:0pt" class="x-box-blue">
     <div id="search-tb"></div>
<div id="mygrid" style="border:1px solid #99bbe8;overflow: hidden; width: 100%; height: 50%;"></div>
<input type="hidden" id="queryTxt">
   
</body>
</html>

4. list ext js
Ext.onReady(function(){
//format the display data
var formatcustomer = function(value, cellmeta, record, rowIndex){
return record.data['cangdiancode']+'-'+record.data['cangdianname'];
}
function renderswsdateship(value, p, record){
    value=formatDateStr(value);
        return String.format('{0}', value, record.data['excerpt']);
    };
function formatDateStr(date)
{
  try{
    var str="";
    str=date.getFullYear()+"-";
    str+=(((date.getMonth()+1)>=10)? (date.getMonth()+1):"0"+(date.getMonth()+1))+"-";
    str+=(date.getDate()>=10)? date.getDate():"0"+date.getDate();
    str+=" ";
    str+=((date.getHours()>=10)? date.getHours():"0"+date.getHours())+":";
    str+=((date.getMinutes()>=10)? date.getMinutes():"0"+date.getMinutes())+":";
    str+=(date.getSeconds()>=10)? date.getSeconds():"0"+date.getSeconds();
    return str;
  }catch(e){
    throw e;
  }
}

function formatdatestring(value){
return value.substring(0,10);
}
var formatstatus = function(value){
if(value=="1")
return "未啟用";
if(value=="2")
return "已啟用";
if(value=="3")
return "禁用";
}
function renderoperate(value, cellmeta, record, rowIndex, columnIndex, store) {
    //Ext.Msg.alert("msg",record.data['swsNbr']);
    //var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
       // "这个单元格的值是：" + value + "\\n" +
        //"这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
        //"这个单元格对应行的record是：" + record + "，一行的数据都在里边\\n" +
        //"这是第" + rowIndex + "行\\n" +
        //"这是第" + columnIndex + "列\\n" +
       // "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
       // "\")'>";
       var str = "<a href=\"javascript:View_Search('"+record.data['swsNbr']+"')\"><img src='../images/custom/search.gif' width='15' height='13' border='0' alt='View'></a>";
          str= str+" &nbsp;<a href='#' onClick=\"printURI1('/inc/print_select1.jsp?URI=/Inventory/inventory_in_print.jsp?swsnbr="+record.data['swsNbr']+"')\"><img src='../images/custom/print.gif' width='13' height='14' border='0' alt='Print'></a> ";
    return str;
}  


var storeParams = { 
   params : { 
   start : 0, 
   limit : 10 
   } 
   }; 
var sm = new Ext.grid.CheckboxSelectionModel(); 
   // Process grid start 
var cm  = new Ext.grid.ColumnModel(
[sm, { 
                   header : "序號", 
                   width : 50, 
                  renderer:function(value, cellmeta, record, rowIndex){
          return rowIndex + 1;
   },
   align : 'center' 
               }, { 
                   id : 'fid', 
                   header : "fid", 
                   width : 30, 
                   dataIndex : 'fid', 
                   align : 'center' 
               }, { 
                   id : 'cangdiancode', 
                   header : "倉點編號", 
                   width : 100, 
                   dataIndex : 'cangdiancode', 
                   align : 'center' 
               }, { 
                   header : "倉點名稱", 
                   width : 120, 
                   dataIndex : 'cangdianname', 
                   align : 'center' 
               },
               { 
                   header : "所屬客戶", 
                   width : 150, 
                   dataIndex : 'custname',
                   renderer: formatcustomer,
                   align : 'center' 
               },
               { 
                   header : "啟用日期", 
                   width : 100, 
                   dataIndex : 'createdate', 
                   //renderer:renderswsdateship,
                   renderer:formatdatestring,
                   align : 'center' 
               }, { 
                   header : "負責人", 
                   width : 75, 
                   dataIndex : 'chargeman', 
                   align : 'center' 
               }, { 
                   header : "目前狀態", 
                   width : 100, 
                   dataIndex : 'status',
                   renderer:formatstatus,
                   align : 'center' 
               }]
);
  var processreader = new Ext.data.JsonReader({ 
      totalProperty : "totalSize", 
      root : "data" 
  }, Ext.data.Record.create([{ 
                       name : "fid", 
                       type : "int" 
                   },{ 
                       name : "cangdiancode", 
                       type : "string" 
                   }, {
                       name : "cangdianname", 
                       type : "string" 
                   }, {
                       name : "custname", 
                       type : "string" 
                   }, {
                       name : "createdate", 
                        type: 'string'
                   }, {
                       name : "chargeman", 
                       type : "string" 
                   }, {
                       name : "status", 
                       type : "string" 
                   }])); 
    
   var processproxy = new Ext.data.HttpProxy({ 
               url : '../cangdianList.action' 
           }); 
    
   var processstore = new Ext.data.Store({ 
               proxy : processproxy, 
               reader : processreader 
           }); 
   //---------------功能狀態欄---------------------------------- 
   var pagingBar = new Ext.PagingToolbar({ 
               pageSize : 10, 
               store : processstore, 
               displayInfo : true, 
               displayMsg : '显示记录 {0} - {1} of {2}', 
               emptyMsg : "没有记录", 
               items :['-',{
        text:"新增",
        iconCls: 'addicon',icon:'Images/icons/add.png',
        enableToggle: true
       },'-',{
xtype:'button',
text:"excel导出",
iconCls:'excelIcon',
tooltip:'把数据导出到excel'
//handler:exportExcel
}
       ] 
           }); 
      
   //---------------功能狀態欄----------------------------------   
var processgrid = new Ext.grid.GridPanel({ 
       id : 'processPanel', 
       el:'mygrid',
       store : processstore, 
       cm : cm, 
       sm : sm, 
       //title : '流程列表', 
       //region : 'center', 
       autoExpandColumn : 'cangdiancode', 
      //stripeRows : true, 
      bbar : pagingBar 
  }); 
  processgrid.render();//不可以在gridpanel中renderTo,数据会看不见的,要用grid.render() 
//----------------------此部分要放在render後面--------------------------------------
  function addHand(btn, pressed){

    //$('method').value="add";
    //clear();
    addcangdian();//----------display-formpanel--------------
    //$('username').readOnly=false;
    //$('btnDiv').style.display="";
       processgrid.getView().refresh();//刷新grid数据
    }  
    // 修改操作事件------------------------------
        var editHand = function() {
        //editcangdian();
        //alert("ssss");
            loadFormData(processgrid);
        };
        // 分页工具栏按钮--新建事件------------------------------------------------------
        //var ptb_bt1 = function() {
            //myFormWin();
        //};
       
        // 删除事件-------------------------------------
        var deleteHand = function() {
            var _record = processgrid.getSelectionModel().getSelected();
            if (_record) {//判断是否有行被选择
                Ext.MessageBox.confirm('确认删除', '你确认要删除这条数据吗？', function(btn) {
                    if (btn == "yes") {
                        var m = processgrid.getSelections();//所有被选择的行
                        var jsonData = "";//
                        for (var i = 0, len = m.length;i < len; i++) {
                        //Ext.Msg.alert("message",m[i].get("fid"));
                            var ss = m[i].get("fid");
                            if (i == 0) {
                                jsonData = jsonData + ss;
                            } else {
                                jsonData = jsonData + "," + ss;
                            }
                            //Ext.Msg.alert("message",jsonData);
                            processstore.remove(m[i]);
                        }
                        processstore.load( {
                            params : {
                                start : 0,
                                limit : 10,
                                delData : jsonData//这里是向服务器段发送的数据信息，一般采用JSON协议，这儿直接采用，只发送用逗号分割的ID号序列， 以方便
                            }
                        });

                        // Ext.example.msg('---删除操作---', '你删除的数据是');
                    }
                });
            } else {
                Ext.Msg.alert('删除操作', '请选择要删除的数据项！');
            }
        };
       pagingBar.add('-', {
        pressed: false,
        enableToggle:true,
        text: '新增',
        cls: 'x-btn-text-icon add',
        toggleHandler: addHand
    });
   
   pagingBar.add('-', {
        pressed: false,
        enableToggle:true,
        text: '編輯',
        cls: 'x-btn-text-icon edit',
        toggleHandler: editHand
    });
   
     pagingBar.add('-', {
        pressed: false,
        enableToggle:true,
        text: '刪除',
        cls: 'x-btn-text-icon del',
        toggleHandler: deleteHand
    });
   
       
        // 载入被选择的数据行的表单数据----------------------------------
      
        var loadFormData = function(processgrid) {
            var _record = processgrid.getSelectionModel().getSelected();
            if (!_record) {//这里判断是否有行已经被选择
                Ext.Msg.alert('修改操作', '请选择要修改的一项！');
            } else {
            //Ext.Msg.alert('kkk',_record.data['fid']);
                editcangdian(_record.data['fid']);
                //myFormWin();
                //form1.form.load( {
                  //  url : 'LoadLevel.action?level.levelid='
                          //  + _record.get('levelid'),
                   // waitMsg : '正在载入数据...',

                   // failure : function() {
                      //  Ext.example.msg('编辑', '载入失败');
                   // },
                   // success : function() {
                      //  Ext.example.msg('编辑', '载入成功！');
                   // }
               // });
            }
        }
       
   
   //----------------------此部分要放在render後面-結束-------------------------------------
  processstore.load(storeParams); 
 
  });
//其中返回的JsonResult是类似如下的字符串
//  {"totalSize":2,"data":[{"creator":"admin","isdeploy":" 否","flowname":"..............","createtime":"2009-03-30 16:45:20.157","flowid":"9"},
//                         {"creator":"admin","isdeploy":" 否","flowname":".............","createtime":"2009-03-30 16:50:01.233","flowid":"11"}]}

5.add ext js
var cangdianGrid;
// 在TabPanel中的Add按钮触发的事件，用来添加一条新信息
var addcangdian = function() {
    var form1, win;
    if (!form1) {
        form1 = new Ext.form.FormPanel({
            //baseCls : 'x-plain',
            defaults : {
                width : 600
            },
            monitorValid : true,// 把有formBind:true的按钮和验证绑定
            //baseCls : 'x-plain',
            //renderTo : document.body,
              labelAlign : 'right',
              //title : '表单例子',
              buttonAlign : 'right',
              bodyStyle : 'padding:5px',
              width : 600,
              //frame : true,
              labelWidth : 80,
            //autoHeight:true,
            //autoWidth:true,
            //height:500,
            defaultType : 'textfield',
            //bodyStyle:'padding:5px 5px 0',
            //frame : false,
            id:'cangdianform',
            //width:600,
            items: [
            {
            xtype:"panel",//不加此属性将无法显示
            layout:'column',
            border:false,
            labelSeparator : '：',// 标题的分隔符号我们用中文冒号代替英文的冒号（labelSeparator:'：'）。
            //height:240,
            //width:300,
            items:[{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [
                {
                xtype:'textfield',
                fieldLabel: '選擇客戶',
                name: 'vmi.fcustsort',
                //hiddenName:'project1',
               allowBlank:false,
               anchor:'95%'
                },
                {
                xtype:'hidden',
                fieldLabel: '選擇客戶',
                name: 'vmi.fcustcode',
                //hiddenName:'project1',
               allowBlank:true
                },
                {
                //style : 'margin-top:5px',// 设置一个css属性，顶部的外补丁为5px（style:'margin-top:5px'），原因是为了选择按钮和标题对齐，大家可以将该属性去掉然后看看效果。
                    xtype:'textfield',
                    fieldLabel: '倉點名稱',
                    name: 'vmi.fstockname',
                    anchor:'95%'
                },
                new Ext.form.ComboBox({ //select
fieldLabel:'目前狀態',
editable:false,
triggerAction: 'all',
valueField:'value',
displayField:'text',
mode: 'local',
store:new Ext.data.SimpleStore({
fields:['value', 'text'],
data:[['1', '未啟用'], ['2', '已啟用'], ['3', '禁用']]
}),
//store:comboxjsonstore,
hiddenName:'vmi.fstatus',//提交到后台的input的name
anchor:'95%'
}), {
                    xtype:'textfield',
                    fieldLabel: '負責人',
                    name: 'vmi.fchargeman',
                    anchor:'95%'
                }]
            },{
           xtype:"panel",//不加此属性将无法显示
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [
                {
                xtype:'textfield',
                fieldLabel: '倉點地址',
                name: 'vmi.faddress',
               allowBlank:false,
               anchor:'95%'
                },
                {
                    xtype:'textfield',
                    fieldLabel: '倉點編號',
                    name: 'vmi.fstockcode',
                    anchor:'95%'
                },{
                    xtype:'datefield',
                    fieldLabel: '啟用日期',
                    name: 'vmi.fstartdate',
                    format:'Y-m-d',
                    //disabledDays:[0,6],
                    //vtype:'email',
                    anchor:'95%'
                },
                 {
                    xtype:'hidden',
                    fieldLabel: '新增日期',
                    name: 'vmi.finsertdate'
                    //format:'Y-m-d'
                    //value:new Date()
                    //disabledDays:[0,6],
                    //vtype:'email',
                },
                 {
                    xtype:'hidden',
                    fieldLabel: '新增用戶',
                    name: 'vmi.finsertuser',
                    value:'erick'
                },
                {
                    xtype:'textfield',
                    fieldLabel: '聯繫電話',
                    name: 'vmi.ftel',
                    anchor:'95%'
                }]
            }]
        },
        {
        xtype:'textarea',
         fieldLabel: '備註',
           name: 'vmi.fremarks',
           allowBlank:false,
           anchor:'85%'
         },
         {
            xtype:'tabpanel',
            plain:true,//将标签页头的背景设置为透明的
            activeTab: 0,//当前活动的标签页是第一页
            height:245,
            defaults:{bodyStyle:'padding:10px'},
            items:[{
                title:'Personal Details',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false,
                    value: 'Jack'
                },{
                    fieldLabel: 'Last Name',
                    name: 'last',
                    value: 'Slocum'
                },{
                    fieldLabel: 'Company',
                    name: 'company',
                    value: 'Ext JS'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }]
            },{
                title:'Phone Numbers',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '(888) 555-1212'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }]
            },{
                cls:'x-plain',
                title:'Biography',
                layout:'fit',
                items: {
                    xtype:'htmleditor',
                    id:'bio2',
                    fieldLabel:'Biography'
                }
            }]
        }
        ],
        //上面items是表单，下面buttons是按钮
        buttons: [{
           text: '提交',
           //type:'button',
           type:'submit',
           formBind : true,
           id:'submitButton',
           handler: function()
           {
                  if (form1.form.isValid()) {// 验证合法后使用加载进度条
                     //this.disabled = true;
                           Ext.MessageBox.show({
                                         title : '请稍等',
                                         msg : 'loading...',
                                         progressText : '',
                                         width : 300,
                                         progress : true,
                                         closable : false,
                                         animEl : 'loading'
                                    });
                           // 控制进度速度
                           var f = function(v) {
                                return function() {
                                    var i = v / 11;
                                    Ext.MessageBox.updateProgress(i, '');
                                };
                           };
                            for (var i = 1; i < 12; i++) {
                               setTimeout(f(i), i * 150);
                           }

                           // 提交到服务器操作
                           form1.form.doAction('submit', {
                                         url : 'cangdianadd.action',// 提交路径
                                         method : 'POST',// 提交方法post或get
                                         params : '',
                                         reset : true,
                                         // 提交成功的回调函数
                                         success : function(form, action) {
                                         Ext.Msg.alert('信息',action.result.data);
                                        // this.disabled = false;
                                        //win.close();
                                },

                                  // 提交失败的回调函数
                                   failure : function() {
                                     Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
                                 }
                           });
                      }
                  }
             }, {
                  text : '取消',
                  handler : function() {
                  form1.form.reset();
                  //win.hide();
                  win.close();
                  }// 重置表单
}],
            //items : [ {
               // fieldLabel : 'Title',
               // name : 'title'
            //}, {
               // fieldLabel : 'Contents',
               // xtype : 'htmleditor',
               // anchor : '95%',
               // allowBlank : false,
               // height : 200,
               // name : 'contents'
            //}],
            labelWidth : 80,
            region : 'center'
        });
    }

    if (!win) {
        win = new Ext.Window( {
            //closeAction :'hide',
            //closable:true,
           // buttons : [ {
                //handler : function() {
                //if (form1.form.isValid()) {
                 //this.disabled = true;
                 //form1.form.doAction('submit', {
                  //url : 'ext_add_submit.jsp',
                  //url:'../cangdianAdd.action',
                  //method : 'post',
                  //params : '',
                  //waitMsg : 'Please Wait...',
                 //reset : true,
                // success : function(form, action) {
                // Ext.Msg.alert('操作',action.result.data);
                // this.disabled = false;
                // },
                  // failure : function() {
                  // Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
                  //  this.disabled = false;
                  //  }
                   // });
                   
                    //form.submit( {
                       //waitMsg : 'Please Wait',
                       // reset : true,
                        // success : Login.Success,
                            //scope : addZhaii
                       // });
                
                //方法二 ，实现非AJAX提交表单一定要加下面的两行！
                //onSubmit : Ext.emptyFn,
                //submit : function() {
//再次设定action的地址
//this.getEl().dom.action ='user.do?method=login'; this.getEl().dom.method = 'post';
//this.getEl().dom.action = '../cangdianAdd.action';
//this.getEl().dom.method = 'post';
//提交submit
//this.getEl().dom.submit();
//},       
               // }
               // },
               // scope : this,
               // text : 'Add'
           // }, {
                //handler : function() {
                   // win.hide();
               // },
               // scope : this,
               // text : 'Cancel'
           // }],
            //closable : true,
            //draggable : true,
            //id : 'addZhaii-win',
            //resizable : true,


        draggable : true,   
        layout: 'border',
        width:620,
        height:550,
        //closeAction :'hide',
        modal:true,
        closable: true,
        resizable:true,
        plain: true,
        border: false,
title:'新增',
bodyStyle:'padding:5px;',
buttonAlign:'center',
        items:form1           
        });
    }

    //form = form1.getForm();

    win.show();
};

//----------------------------------------下面的没用到-------------------------------

var addZhaiiAction = new Ext.Action( {
    text : 'Add Zhaii',
    //handler : addZhaii, // 触发上面定义的添加事件
    iconCls : 'blist'
});
var addZhaiiTab = function() {
    var expander = new Ext.grid.RowExpander( {
        tpl : new Ext.Template('<p><b>Title:</b> {title}<br>',
                '<p><b>Contents:</b> {contents}</p>')
    });
    var cm = new Ext.grid.ColumnModel([expander, {
        header : 'id',
        dataIndex : 'id'
    }, {
        header : 'title',
        width : 300,
        dataIndex : 'title'
    }, {
        header : 'zhaier',
        dataIndex : 'zhaier'
    }, {
        header : 'date',
        dataIndex : 'date'
    }, {
        header : 'sc',
        dataIndex : 'sc'
    }, {
        header : 'hh',
        dataIndex : 'hh'
    }]);
    var ds = new Ext.data.Store( {
        proxy : new Ext.data.HttpProxy( {
            url : '../../getZhaii.do'
        }),
        reader : new Ext.data.JsonReader( {
            totalProperty : 'totalProperty',
            root : 'root'
        }, [ {
            name : 'content'
        }, {
            name : 'hh'
        }, {
            name : 'sc'
        }, {
            name : 'date'
        }, {
            name : 'zhaier'
        }, {
            name : 'title'
        }, {
            name : 'id'
        }])
    });
    ds.load( {
        params : {
            start : 0,
            limit : 10
        }
    });
    if (Ext.isEmpty(cangdianGrid)) {
        cangdianGrid = new Ext.grid.GridPanel( {
            store : ds,
            cm : cm,
            id : 'cangdianGrid',
            viewConfig : {
                forceFit : true
            },
            plugins : expander,
            collapsible : true,
            animCollapse : false,
            title : 'cangdianGrid',
            iconCls : 'icon-grid',
            closable : true,
            // top处添加事件按钮
            tbar : [addZhaiiAction],
            // bottom处的分页栏
            bbar : new Ext.PagingToolbar( {
                pageSize : 10,
                store : ds,
                displayInfo : true,
                displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                emptyMsg: '没有记录'
            })
        });
        // .show()了才会显示
        centerPanel.add(cangdianGrid).show();
    } else if (cangdianGrid = centerPanel.getItem('cangdianGrid')) {
        // cangdianGrid.show();
    } else {
        cangdianGrid = new Ext.grid.GridPanel( {
            store : ds,
            cm : cm,
            id : 'cangdianGrid',
            viewConfig : {
                forceFit : true
            },
            plugins : expander,
            collapsible : true,
            animCollapse : false,
            title : 'adsfasd',
            iconCls : 'icon-grid',
            closable : true,
            tbar : [addZhaiiAction],
            bbar : new Ext.PagingToolbar( {
                pageSize : 10,
                store : ds,
                displayInfo : true,
                displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                emptyMsg: '没有记录'
            })
        });
        centerPanel.add(cangdianGrid).show();
    }
}
// 给link1添加事件
//Ext.get('link1').on('click', addZhaiiTab);
// 初始化页面时，便添加cangdianTab
//addZhaiiTab();

6.edit ext js

var cangdianGrid;
// 在TabPanel中的Edit按钮触发的事件，用来编辑一条新信息（和Add相比 多了 load /reader,其它不变）
var editcangdian = function(fid) {
    var form1, win;
    if (!form1) {
        form1 = new Ext.form.FormPanel({
            //baseCls : 'x-plain',
            defaults : {
                width : 600
            },
            monitorValid : true,// 把有formBind:true的按钮和验证绑定
            //baseCls : 'x-plain',
            //renderTo : document.body,
              labelAlign : 'right',
              //title : '表单例子',
              buttonAlign : 'right',
              bodyStyle : 'padding:5px',
              width : 600,
              //frame : true,
              labelWidth : 80,
            //autoHeight:true,
            //autoWidth:true,
            //height:500,
            defaultType : 'textfield',
            //bodyStyle:'padding:5px 5px 0',
            //frame : false,
            id:'cangdianform',
            //url:'addcangdian.action',
            reader:_jsonFormReader,
            //width:600,
            items: [
            {
            xtype:"panel",//不加此属性将无法显示
            layout:'column',
            border:false,
            labelSeparator : '：',// 标题的分隔符号我们用中文冒号代替英文的冒号（labelSeparator:'：'）。
            //height:240,
            //width:300,
            items:[{
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [
                {
                xtype:'textfield',
                fieldLabel: '選擇客戶',
                name: 'vmi.fcustsort',
                //hiddenName:'project1',
               allowBlank:false,
               anchor:'95%'
                },
                {
                xtype:'hidden',
                fieldLabel: '選擇客戶',
                name: 'vmi.fcustcode',
                //hiddenName:'project1',
               allowBlank:true
                },
                {
                //style : 'margin-top:5px',// 设置一个css属性，顶部的外补丁为5px（style:'margin-top:5px'），原因是为了选择按钮和标题对齐，大家可以将该属性去掉然后看看效果。
                    xtype:'textfield',
                    fieldLabel: '倉點名稱',
                    name: 'vmi.fstockname',
                    anchor:'95%'
                },
                new Ext.form.ComboBox({ //select
fieldLabel:'目前狀態',
editable:false,
triggerAction: 'all',
valueField:'value',
displayField:'text',
mode: 'local',
store:new Ext.data.SimpleStore({
fields:['value', 'text'],
data:[['1', '未啟用'], ['2', '已啟用'], ['3', '禁用']]
}),
//store:comboxjsonstore,
hiddenName:'vmi.fstatus',//提交到后台的input的name
anchor:'95%'
}), {
                    xtype:'textfield',
                    fieldLabel: '負責人',
                    name: 'vmi.fchargeman',
                    anchor:'95%'
                }]
            },{
           xtype:"panel",//不加此属性将无法显示
                columnWidth:.5,
                layout: 'form',
                border:false,
                items: [
                {
                xtype:'textfield',
                fieldLabel: '倉點地址',
                name: 'vmi.faddress',
               allowBlank:false,
               anchor:'95%'
                },
                {
                    xtype:'textfield',
                    fieldLabel: '倉點編號',
                    name: 'vmi.fstockcode',
                    anchor:'95%'
                },{
                    xtype:'datefield',
                    fieldLabel: '啟用日期',
                    name: 'vmi.fstartdate',
                    format:'Y-m-d',
                    //disabledDays:[0,6],
                    //vtype:'email',
                    anchor:'95%'
                },
                 {
                    xtype:'hidden',
                    fieldLabel: '新增日期',
                    name: 'vmi.finsertdate'
                    //format:'Y-m-d'
                    //value:new Date()
                    //disabledDays:[0,6],
                    //vtype:'email',
                },
                 {
                    xtype:'hidden',
                    fieldLabel: '新增用戶',
                    name: 'vmi.finsertuser',
                    value:'erick'
                },
                {
                    xtype:'textfield',
                    fieldLabel: '聯繫電話',
                    name: 'vmi.ftel',
                    anchor:'95%'
                }]
            }]
        },
        {
        xtype:'textarea',
         fieldLabel: '備註',
           name: 'vmi.fremarks',
           allowBlank:false,
           anchor:'85%'
         },
         {
            xtype:'tabpanel',
            plain:true,//将标签页头的背景设置为透明的
            activeTab: 0,//当前活动的标签页是第一页
            height:245,
            defaults:{bodyStyle:'padding:10px'},
            items:[{
                title:'Personal Details',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false,
                    value: 'Jack'
                },{
                    fieldLabel: 'Last Name',
                    name: 'last',
                    value: 'Slocum'
                },{
                    fieldLabel: 'Company',
                    name: 'company',
                    value: 'Ext JS'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }]
            },{
                title:'Phone Numbers',
                layout:'form',
                defaults: {width: 230},
                defaultType: 'textfield',

                items: [{
                    fieldLabel: 'Home',
                    name: 'home',
                    value: '(888) 555-1212'
                },{
                    fieldLabel: 'Business',
                    name: 'business'
                },{
                    fieldLabel: 'Mobile',
                    name: 'mobile'
                },{
                    fieldLabel: 'Fax',
                    name: 'fax'
                }]
            },{
                cls:'x-plain',
                title:'Biography',
                layout:'fit',
                items: {
                    xtype:'htmleditor',
                    id:'bio2',
                    fieldLabel:'Biography'
                }
            }]
        }
        ],
        //上面items是表单，下面buttons是按钮
        buttons: [{
           text: '提交',
           //type:'button',
           type:'submit',
           formBind : true,
           id:'submitButton',
           handler: function()
           {
                  if (form1.form.isValid()) {// 验证合法后使用加载进度条
                     //this.disabled = true;
                           Ext.MessageBox.show({
                                         title : '请稍等',
                                         msg : 'loading...',
                                         progressText : '',
                                         width : 300,
                                         progress : true,
                                         closable : false,
                                         animEl : 'loading'
                                    });
                           // 控制进度速度
                           var f = function(v) {
                                return function() {
                                    var i = v / 11;
                                    Ext.MessageBox.updateProgress(i, '');
                                };
                           };
                            for (var i = 1; i < 12; i++) {
                               setTimeout(f(i), i * 150);
                           }

                           // 提交到服务器操作
                           form1.form.doAction('submit', {
                                         url : 'cangdianadd.action',// 提交路径
                                         method : 'POST',// 提交方法post或get
                                         params : '',
                                         reset : true,
                                         // 提交成功的回调函数
                                         success : function(form, action) {
                                         Ext.Msg.alert('信息',action.result.data);
                                        // this.disabled = false;
                                        //win.close();
                                },

                                  // 提交失败的回调函数
                                   failure : function() {
                                     Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
                                 }
                           });
                      }
                  }
             }, {
                  text : '取消',
                  handler : function() {
                  form1.form.reset();
                  //win.hide();
                  win.close();
                  }// 重置表单
}],
            //items : [ {
               // fieldLabel : 'Title',
               // name : 'title'
            //}, {
               // fieldLabel : 'Contents',
               // xtype : 'htmleditor',
               // anchor : '95%',
               // allowBlank : false,
               // height : 200,
               // name : 'contents'
            //}],
            labelWidth : 80,
            region : 'center'
        });
       
         //-----------------------last load data from server----------------   
              
form1.form.load( {
                    url : 'cangdianedit.action?vmi.fid='+fid,//var _record = processgrid.getSelectionModel().getSelected();
                    waitMsg : '正在载入数据...',
                    failure : function() {
                        Ext.Msg.alert('编辑', '载入失败');
                    },
                    success : function() {
                        //Ext.Msg.alert('编辑', '载入成功！');
                    }
                });    
    }

    if (!win) {
        win = new Ext.Window( {
            //closeAction :'hide',
            //closable:true,
           // buttons : [ {
                //handler : function() {
                //if (form1.form.isValid()) {
                 //this.disabled = true;
                 //form1.form.doAction('submit', {
                  //url : 'ext_add_submit.jsp',
                  //url:'../cangdianAdd.action',
                  //method : 'post',
                  //params : '',
                  //waitMsg : 'Please Wait...',
                 //reset : true,
                // success : function(form, action) {
                // Ext.Msg.alert('操作',action.result.data);
                // this.disabled = false;
                // },
                  // failure : function() {
                  // Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
                  //  this.disabled = false;
                  //  }
                   // });
                   
                    //form.submit( {
                       //waitMsg : 'Please Wait',
                       // reset : true,
                        // success : Login.Success,
                            //scope : addZhaii
                       // });
                
                //方法二 ，实现非AJAX提交表单一定要加下面的两行！
                //onSubmit : Ext.emptyFn,
                //submit : function() {
//再次设定action的地址
//this.getEl().dom.action ='user.do?method=login'; this.getEl().dom.method = 'post';
//this.getEl().dom.action = '../cangdianAdd.action';
//this.getEl().dom.method = 'post';
//提交submit
//this.getEl().dom.submit();
//},       
               // }
               // },
               // scope : this,
               // text : 'Add'
           // }, {
                //handler : function() {
                   // win.hide();
               // },
               // scope : this,
               // text : 'Cancel'
           // }],
            //closable : true,
            //draggable : true,
            //id : 'addZhaii-win',
            //resizable : true,


        draggable : true,   
        layout: 'border',
        width:620,
        height:550,
        //closeAction :'hide',
        modal:true,
        closable: true,
        resizable:true,
        plain: true,
        border: false,
title:'新增',
bodyStyle:'padding:5px;',
buttonAlign:'center',
        items:form1           
        });
    }

    //form = form1.getForm();

    win.show();
};
//用窗体Form的JsonReader对象，修改时数据载入解析---------------------------------------------------------
        var _jsonFormReader = new Ext.data.JsonReader( {
            root : 'data',
            totalProperty : 'totalSize',
            //id : 'levelid',
            successProperty : '@success'
        }, [{ 
                 name : "vmi.fcustsort",  //客户
                 mapping:'fcustsort',
                 type : "string" 
             }, {
                 name : "vmi.fcustcode", 
                 mapping:'fcustcode',
                 type : "string" 
             }, {
                 name : "vmi.fstockname", 
                 mapping:'fstockname',
                 type : "string" 
             }, {
                 name : "vmi.fstatus", 
                 mapping:'fstatus',
                 type : "string" 
             }, {
                 name : "vmi.fchargeman", 
                 mapping:'fchargeman',
                  type: 'string'
             }, {
                 name : "vmi.faddress", 
                 mapping:'faddress',
                 type : "string" 
             }, {
                 name : "vmi.fstockcode", 
                 mapping:'fstockcode',
                 type : "string" 
             }
             //, {//时间会报错(保存时)
                 //name : "vmi.fstartdate", 
                // mapping:'fstartdate',
                // type : "string" 
             //}, {
                 //name : "vmi.finsertdate", 
                 //mapping:'finsertdate',
                // type : "string" 
             //}
             , {
                 name : "vmi.finsertuser",
                 mapping:'finsertuser', 
                 type : "string" 
             }, {
                 name : "vmi.ftel", 
                 mapping:'ftel',
                 type : "string" 
             }, {
                 name : "vmi.fremarks", 
                 mapping:'fremarks',
                 type : "string" 
             }]);
       
//----------------------------------------下面的没用到-------------------------------

var addZhaiiAction = new Ext.Action( {
    text : 'Add Zhaii',
    //handler : addZhaii, // 触发上面定义的添加事件
    iconCls : 'blist'
});
var addZhaiiTab = function() {
    var expander = new Ext.grid.RowExpander( {
        tpl : new Ext.Template('<p><b>Title:</b> {title}<br>',
                '<p><b>Contents:</b> {contents}</p>')
    });
    var cm = new Ext.grid.ColumnModel([expander, {
        header : 'id',
        dataIndex : 'id'
    }, {
        header : 'title',
        width : 300,
        dataIndex : 'title'
    }, {
        header : 'zhaier',
        dataIndex : 'zhaier'
    }, {
        header : 'date',
        dataIndex : 'date'
    }, {
        header : 'sc',
        dataIndex : 'sc'
    }, {
        header : 'hh',
        dataIndex : 'hh'
    }]);
    var ds = new Ext.data.Store( {
        proxy : new Ext.data.HttpProxy( {
            url : '../../getZhaii.do'
        }),
        reader : new Ext.data.JsonReader( {
            totalProperty : 'totalProperty',
            root : 'root'
        }, [ {
            name : 'content'
        }, {
            name : 'hh'
        }, {
            name : 'sc'
        }, {
            name : 'date'
        }, {
            name : 'zhaier'
        }, {
            name : 'title'
        }, {
            name : 'id'
        }])
    });
    ds.load( {
        params : {
            start : 0,
            limit : 10
        }
    });
    if (Ext.isEmpty(cangdianGrid)) {
        cangdianGrid = new Ext.grid.GridPanel( {
            store : ds,
            cm : cm,
            id : 'cangdianGrid',
            viewConfig : {
                forceFit : true
            },
            plugins : expander,
            collapsible : true,
            animCollapse : false,
            title : 'cangdianGrid',
            iconCls : 'icon-grid',
            closable : true,
            // top处添加事件按钮
            tbar : [addZhaiiAction],
            // bottom处的分页栏
            bbar : new Ext.PagingToolbar( {
                pageSize : 10,
                store : ds,
                displayInfo : true,
                displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                emptyMsg: '没有记录'
            })
        });
        // .show()了才会显示
        centerPanel.add(cangdianGrid).show();
    } else if (cangdianGrid = centerPanel.getItem('cangdianGrid')) {
        // cangdianGrid.show();
    } else {
        cangdianGrid = new Ext.grid.GridPanel( {
            store : ds,
            cm : cm,
            id : 'cangdianGrid',
            viewConfig : {
                forceFit : true
            },
            plugins : expander,
            collapsible : true,
            animCollapse : false,
            title : 'adsfasd',
            iconCls : 'icon-grid',
            closable : true,
            tbar : [addZhaiiAction],
            bbar : new Ext.PagingToolbar( {
                pageSize : 10,
                store : ds,
                displayInfo : true,
                displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                emptyMsg: '没有记录'
            })
        });
        centerPanel.add(cangdianGrid).show();
    }
}
// 给link1添加事件
//Ext.get('link1').on('click', addZhaiiTab);
// 初始化页面时，便添加cangdianTab
//addZhaiiTab();


7.delete ext js

包含在list js中


8.用到的类在另一编文章
分享到：
| ext 2.0 gridpanel实例2
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    webwork+spring+hibernate 开发资料

    在提供的文档“webwork+spring+hibernate架构.doc”中，可能详细阐述了这三者如何协同工作，包括配置文件设置、依赖注入的使用、事务管理策略以及具体实例的开发步骤。而“webwork.doc”则可能专门介绍了WebWork框架...

    Webwork+spring+hibernate集成实例

    在Webwork+Spring+Hibernate集成中，Spring通常作为整体架构的胶水，负责各组件的连接和协调。它可以管理Webwork的Action，通过依赖注入提供所需的Service和DAO。同时，Spring可以配置Hibernate SessionFactory，...

    webwork+hibernate+spring

    在IT行业中，Web开发是一个非常重要的领域，而`webwork+hibernate+spring`的组合是其中一种经典的架构模式，常用于构建高效、可维护的企业级应用。这个小例子展示了如何将这三大框架整合起来，配合MySQL数据库进行...

    webwork+hibernate+spring配置包

    【标题】"webwork+hibernate+spring配置包"是一个集合了三个知名Java框架的配置文件，旨在帮助开发者快速搭建基于Web的应用程序。WebWork是用于构建动态Web应用程序的一个MVC框架，Hibernate是一个强大的对象关系...

    webwork+hibernate+spring的例子

    【标题】"webwork+hibernate+spring的例子"展示了如何在实际项目中整合这三大框架，即WebWork、Hibernate和Spring。这三个框架是Java Web开发中的重要组件，它们各自承担着不同的职责，共同构建了一个功能强大的应用...

    webwork2.2.4+spring+hibernate做的一个登入程序

    最近在做个项目，用的是webwork+spring+hibernate，在网上看了不少webwork+spring的配制方式,大多都是老的配制方式，比如2.1.7的，webwork2.2.4新加了很多功能，和spring的配制也简单了很多，我做了一个简单的登录...

    webwork+spring+hibernate网络购物系统

    【标题】：“WebWork+Spring+Hibernate网络购物系统”是一个基于特定技术栈的电商项目实现。这个系统利用了WebWork、Spring和Hibernate这三个关键的技术框架，构建了一个完整的、功能丰富的在线购物平台。WebWork...

    webwork+spring+hibernate整合开发网络书城 第5讲

    webwork+spring+hibernate整合开发网络书城 第5讲

    webwork+spring+hibernate+freemarker （A）demo_project

    本源码实例只供学习。。 请一并下载webwork+spring+hibernate+freemarker （A）demo_lib 配合才能使用（此为项目的lib包。。） 请打开mark.txt参考操作

    webwork+spring+hibernate入门实例

    《webwork+spring+hibernate入门实例》 在当今的Web开发领域，Spring、Hibernate和WebWork（现称为Struts 2）是三个极为重要的框架。本实例将引导初学者深入理解这三大框架的集成与应用，以及如何与MySQL数据库进行...

    webwork+spring+hibernate

    在IT行业中，Web开发是一个广泛且重要的领域，而"webwork+spring+hibernate"是一种常见的技术栈，用于构建动态、数据驱动的Web应用程序。这个技术组合涉及到三个核心组件：WebWork（一种MVC框架）、Spring（一个全面...

    如何实现webwork+spring+hibernate框架结合

    ### 如何实现WebWork+Spring+Hibernate框架结合 随着企业级应用需求的不断增加和技术的不断发展，集成多种技术栈成为一种趋势。WebWork+Spring+Hibernate是早期比较流行的一种技术组合，它们各自解决的问题域不同，...

    WebWork+Spring+Hibernate整合开发网络书城+第一讲完整版

    WebWork+Spring+Hibernate整合开发网络书城是一个典型的Java Web应用程序开发框架的集成，这三种技术分别承担了不同的职责，共同构建了一个高效、灵活的后台系统。本资源提供了一个完整的网络书城项目的第一讲，旨在...

    WebWork+Spring.+Hibernate整合开发网络书城代码

    【WebWork+Spring+Hibernate整合开发】是一种常见的Java Web应用程序架构模式，用于构建高效、可扩展的业务系统。WebWork是Action-based MVC框架，Spring是一个全面的企业级应用框架，而Hibernate则是流行的对象关系...

    搭建WEBWORK+SPRING+HIBERNATE框架

    【搭建WEBWORK+SPRING+HIBERNATE框架】是一个集成三大流行开源框架的过程，用于构建高效、可扩展的企业级Web应用。以下是详细的步骤和知识点： 1. **开发环境配置**： - 使用MyEclipse 5.5.1 GA作为开发工具，它...

    WebWork+Spring+Hibernate整合

    WebWork+Spring+Hibernate整合

    WebWork+Spring+Hibernate整合开发

    WebWork+Spring+Hibernate整合开发

    webwork+spring+hibernate整合开发 第2讲 part2(浪曦)

    浪曦 的webwork+spring+hibernate

    WebWork+Spring+Hibernate整合开发demo

    在"WebWork+Spring+Hibernate整合开发demo"中，我们可以预见到以下关键点： 1. **整合配置**：整合这三个框架需要对各自的配置文件进行调整，例如在Spring的配置文件中声明Hibernate的SessionFactory，以及WebWork...

Magicbox
Global site tag (gtag.js) - Google Analytics