一个常用的代码范例

/**
 * 订单录入
 */
mortgage.userManager = function() {
 Ext.onReady(function() {
  Ext.QuickTips.init();
  // 记录json对应设置(如果json数据只有值没有名称,需要)
  //var data = [['1','sales', '43729050','cherry','SH','159*','26465','SH,BJ']]; 
  var data = [];
  
  /*******************************************************************
   * 列表标题以及数据显示设置
   ******************************************************************/
  var colModel = new Ext.grid.ColumnModel( [
                                           
    new Ext.grid.RowNumberer(), {
     header : 'id',
     dataIndex : 'id',
     hidden : true
    }, {
     header : '角色',
     sortable : false,
     dataIndex : 'role'
    }, {
     header : "员工号",
     sortable : false,
     dataIndex : 'staffId'
    }, {
     header : "姓名",
     sortable : false,
     dataIndex : 'name'
    },
    {
     header : "部门",
     sortable : false,
     dataIndex : 'dept'
    },   
    {
     header : "行所",
     sortable : false,
     dataIndex : 'branch'
    }, {
     header : "手机号",
     sortable : false,
     dataIndex : 'mobile'
    }, {
     header : "分机号",
     sortable : false,
     dataIndex : 'ext'
    }, {
     header : "下辖行所",
     sortable : false,
     dataIndex : 'befBranch'
    }]);
  
 var record=Ext.data.Record.create([
   {
   name : 'id'
   }, {
    name : 'role'
   }, {
    name : 'staffId'
   }, {
    name : 'name'
   } ,{
    name : 'dept'
   },   
   {
      name : 'branch'
   }, {
    name : 'mobile'
   }, {
    name : 'ext'
   }, {
    name : 'befBranch'
   }
 ]);
 
 var reader= new Ext.data.JsonReader({
  root : "userList",
  fields : record
 });

  /*******************************************************************
   * 获取数据
   ******************************************************************/
  var dataStore = new Ext.data.Store( {
   proxy : new Ext.data.HttpProxy({
    url : getContextPath()+'/userManager.htm'
  }),
     reader : reader
  
  });
  
  /*******************************************************************
   * 获取roleList数据
   ******************************************************************/
  var roleList = new Ext.data.JsonStore({       
   url:getContextPath()+'/selectRole.htm',
      root:'userList',
      fields:['roleId','roleName'],
      autoLoad:true        
  })
  
  /*******************************************************************
   * 设置检索参数
   ******************************************************************/
  dataStore.on('beforeload', function(dataStore) {
//   var para = {
//    cardNo : ''
//   };
//   Ext.apply(dataStore.baseParams, para);
  });
  /*******************************************************************
   * 加载第一页信息
   ******************************************************************/
  dataStore.load( {
   params : {
    start : 0,
    limit : 10
   }
  });

  /*******************************************************************
   * 翻页条定义
   ******************************************************************/
  var nextPageButton = new Ext.Button(
    {
     text : '下一页',
     disabled : true,
     handler : function() {

     }
    });
  var myMenuBar = [ '->', '-', nextPageButton ];
  
 
  /**
   * 按钮定义
   */
  var getApplyNoButton = new Ext.Button({
   
   text : '查询',
   width : 100,
   handler : function(){
    infoForm.getForm().submit({
      timeout:60000,
         waitMsg:'正在查询,请稍后...',
         failure:function(form,action){        
         Ext.Msg.alert("failure","查询失败!");
         },
         success:function(form,action){
             var dataManage = action.result.userList;
                            dataStore.loadData(action.result);
 
         }       
   });
   }
 
  });
  var findAttachmentButton = new Ext.Button({
   text : '查询全部',
   width : 100,
   handler : function(){
    infoForm.getForm().reset();
    infoForm.getForm().submit({
      timeout:60000,
         waitMsg:'正在查询,请稍后...',
         failure:function(form,action){        
         Ext.Msg.alert("failure","查询失败!");
         },
         success:function(form,action){
           var dataManage = action.result.userList;
                          dataStore.loadData(action.result);

         }       
   });
   }   
  });
  
  
  
  
  
  var upbutton = new Ext.Button({
   text : '导出用户列表',
   id : 'button1',
   name : 'button1',
   handler : function() {
//    infoForm.getForm().submit({
//     url : getContextPath()+'/downloadUserList.htm',
//      timeout:60000,
//         waitMsg:'正在查询,请稍后...',
//         failure:function(form,action){        
////         Ext.Msg.alert("failure","查询失败!");
//         },
//         success:function(form,action){
//             var dataManage = action.result.userList;
////                           dataStore.loadData(action.result);
// 
//         }
//         });
    
    
    var staffids = $("#staffids").val();
    var branchNo=$("input[name='branchNo']").val();    
    var staffNo=$("#staffNo").val();
    var branchs=$("input[name='branchs']").val();
    var roles = $("input[name='roles']").val(); 
 
     window.location.href = getContextPath()+'/downloadUserList.htm?staffids='+staffids+"&branchNo="+branchNo+"&staffNo="+staffNo+"&branchs="+branchs+"&roles="+roles;
   
   }
  });
  

  
  /*******************************************************************
   * 列表定义
   ******************************************************************/
  var grid = new Ext.grid.GridPanel( {
   width:'auto',
      height : document.body.clientHeight-200,
   id : 'button-grid',
   store : dataStore,
   cm : colModel,
   stripeRows : true,
   viewConfig : {
    forceFit : true
   },
   //工具条
   tbar : [{
    text: '添加',
    iconCls:'add',
    tooltip:'新增一个用户',
    handler : function(){
     mortgage.userManager.addUserBasic(dataStore);
    }
   },
   {
    text: '编辑',
    iconCls : 'edit',
    handler : function(){
    var selectRecord = grid.getSelectionModel()
     .getSelected();
   if (null == selectRecord) {
    Ext.MessageBox.alert("提示", "至少选择一条数据！");
   } else {
    mortgage.userManager.edit(dataStore,selectRecord,roleList);
   }
  
    }
   },
   {
    text: '删除',
    iconCls:'remove',
    tooltip:'删除一条记录',
    handler : function(){     
     mortgage.userManager.deleteUser(dataStore,grid);     
     
    }
   }
   ],
   // 菜单条
   loadMask : {
    msg : '数据加载中，请稍侯……'
   },
   // 分页条
   bbar : myMenuBar,
   frame : true,
   title : '',
   iconCls : 'icon-grid'
  });
/**
 * 角色下拉列表查询
 */
  var roleStore = new Ext.data.JsonStore({
   url:getContextPath()+'/selectRole.htm',
      root:'userList',
      fields:['roleId','roleName']  
  
  });
  roleStore.load();
  
  
/**
 * 行所下拉列表查询
 */ 
  
  var branchStore = new Ext.data.JsonStore({
   url:getContextPath()+'/selectBranch.htm',
      root:'userList',
      fields:['branchId','branchId']  
  
  });
  branchStore.load(); 
 
 
  /**
   * 订单内容信息
   */
  var infoForm = new Ext.FormPanel({
   url : getContextPath()+'/userManager.htm',
   labelAlign : 'right',
   layout : 'form',
   labelSeparator : '：',
   width : document.body.clientWidth > PANELMINWIDTH?document.body.clientWidth-20:PANELMINWIDTH-20,
   height : document.body.clientHeight,
   items : [{
    title : '基础信息',
    xtype : 'fieldset',
    layout : 'column',
    buttonAlign : 'center',
    collapsible : true,
    height : 130,
    buttons : [getApplyNoButton,findAttachmentButton,upbutton],
    items : [{
     columnWidth : .33,
     layout : 'form',
     items : [{
        xtype : 'textfield',
        fieldLabel : '员工号',
        name : 'staffids',
        id : 'staffids',
        width : 140,
        value : '',
        readOnly : false
       },{
        
         xtype : 'combo',
         fieldLabel : '行所',
         store : branchStore,
         forceSelection : true,
         width : 140,
         //emptyText : '请选择',
         valueField : "branchId",
         displayField : "branchId",
         mode : 'remote',
         name : 'branchNo',
         value : '',
         hiddenName : 'branchNo',
         triggerAction : 'all'
       }]
        
    },{
     columnWidth : .33,
     layout : 'form',
     items : [{
        xtype : 'textfield',
        fieldLabel : '姓名',
        name : 'staffNo',
        id : 'staffNo',
        width : 140,
        hidden : false
       }, {
        xtype : 'combo',
        fieldLabel : '部门',
        store : new Ext.data.JsonStore({
         fields : [ 'name', 'value' ],
         baseParams:{typeId:'h'},
         root:'CodeBase',
         url:getContextPath()+'/CodeBase.htm',
         autoLoad:true
        }),
        forceSelection : true,
        width : 140,
        //emptyText : '请选择',
        valueField : 'value',
        displayField : 'name',
        mode : 'remote',
        name : 'branchs',
        value : '',
        hiddenName : 'branchs',
        triggerAction : 'all'
       }]
    },{
     columnWidth : .33,
     layout : 'form',
     items : [{
      xtype : 'combo',
      fieldLabel : '角色',
      store : roleStore,
      forceSelection : true,
      width : 140,
      //emptyText : '请选择',
      valueField : "roleId",
      displayField : "roleName",
      mode : 'remote',
      name : 'roles',
      value : '',
      hiddenName : 'roles',
      triggerAction : 'all'
     }]
    }]
   },{
    title : '查询结果',
    xtype : 'fieldset',
    layout : 'column',
    bodyStyle : 'padding:5px,0px,2px,0px',
    collapsible : true,
    items : [ grid ]
   }]
  });
  /***********************************************************************
   * 容器panel定义
   **********************************************************************/
  var containerPanel = new Ext.Panel({
     layout : 'column',
     frame : true,
     applyTo : 'manage_grid_div',
     id : 'containerPanel',
     width : document.body.clientWidth > PANELMINWIDTH
       ? document.body.clientWidth
       : PANELMINWIDTH,
     height : document.body.clientHeight,
     items : [infoForm]
    });
  /***********************************************************************
   * 页面宽度高度自适应处理
   **********************************************************************/
  Ext.EventManager.onWindowResize(function(w, h) {
     try {
      if (document.body.clientWidth > PANELMINWIDTH) {
       containerPanel.setWidth(document.body.clientWidth);
      } else {
       containerPanel.setWidth(PANELMINWIDTH);
      }

     } catch (e) {
     }

    });

 });
};
mortgage.userManager();