代码事例

/**
 * 订单录入
 */
var pageSizeVal = 20;
taoexpo.user.userManage = 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 : 'name'
    },
    {
     header : "密码",
     sortable : false,
     dataIndex : 'password'
    }, {
     header : "手机号",
     sortable : false,
     dataIndex : 'mobile'
    }]);
  
 var record=Ext.data.Record.create([
   {
   name : 'id'
   }, {
    name : 'name'
   } ,{
    name : 'password'
   },{
       name : 'mobile'
   }
 ]);
 
 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 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 bbar = new Ext.PagingToolbar({
      store: dataStore,
      pageSize:pageSizeVal,
      displayInfo:true,
      displayMsg : '显示第{0}条到{1}条记录，一共{2}条'
     });
  
  /*******************************************************************
   * 列表定义
   ******************************************************************/
  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(){
     taoexpo.user.userManage.addUserBasic(dataStore);
    }
   },
   {
    text: '编辑',
    iconCls : 'edit',
    handler : function(){
    var selectRecord = grid.getSelectionModel()
     .getSelected();
   if (null == selectRecord) {
    Ext.MessageBox.alert("提示", "至少选择一条数据！");
   } else {
    taoexpo.user.userManage.edit(dataStore,selectRecord,roleList);
   }
  
    }
   },
   {
    text: '删除',
    iconCls:'remove',
    tooltip:'删除一条记录',
    handler : function(){     
     taoexpo.user.userManage.deleteUser(dataStore,grid);     
    }
   }
   ],
   // 菜单条
   loadMask : {
    msg : '数据加载中，请稍侯……'
   },
   // 分页条
   bbar : bbar,
   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-230:PANELMINWIDTH-20,
//   height : document.body.clientHeight,
   items : [{
    title : '条件查询',
    xtype : 'fieldset',
    layout : 'column',
    buttonAlign : 'center',
    collapsible : true,
    height : 100,
    buttons : [getApplyNoButton,findAttachmentButton],
    items : [{
     columnWidth : .33,
     layout : 'form',
     items : [{
        xtype : 'textfield',
        fieldLabel : '姓名',
        name : 'name',
        width : 140,
        value : '',
        readOnly : false
       }]
        
    },{
     columnWidth : .33,
     layout : 'form',
     items : [{
        xtype : 'textfield',
        fieldLabel : '手机号',
        name : 'mobile',
        width : 140,
        hidden : false
       }]
    }]
   },grid]
  });
  /***********************************************************************
   * 容器panel定义
   **********************************************************************/
  var containerPanel = new Ext.Panel({
     layout : 'column',
     frame : true,
     applyTo : 'userManage_div',
     id : 'containerPanel',
     width : document.body.clientWidth > PANELMINWIDTH
       ? document.body.clientWidth-200
       : PANELMINWIDTH,
     height : document.body.clientHeight,
     items : [infoForm]
    });
  /***********************************************************************
   * 页面宽度高度自适应处理
   **********************************************************************/
  Ext.EventManager.onWindowResize(function(w, h) {
     try {
      if (document.body.clientWidth > PANELMINWIDTH) {
       containerPanel.setWidth(document.body.clientWidth-200);
      } else {
       containerPanel.setWidth(PANELMINWIDTH);
      }

     } catch (e) {
     }

    });

 });
};
taoexpo.user.userManage();