Extjs查询实现

效果图如上：

页面代码：

 Ext.QuickTips.init();   //放在图标上会自动提示信息

 Ext.define('ExtApp.view.StudentList' , {
     extend : 'Ext.grid.Panel' ,
     id : 'StudentListGrid' ,
     xtype : 'StudentList' ,
     store : 'StudentList' ,
     draggable:false, //设置为false则禁用拖拽改变列顺序、
     columnLines:true,//添加列的框线样式
     viewConfig: {
         stripeRows:true //True来实现隔行换颜色
     },
      tbar : [{
         xtype : 'form',
         id : 'queryFormSL' ,
         width : '100%',
         items : [{
             xtype : 'container',
             padding : 5,
             flex : 2,
             layout : {
                 type : 'hbox'
             },
             items : [{
                 labelWidth : 60,
                 labelAlign : 'right',
                 width: 200,
                  xtype : 'combo',
                 fieldLabel:'选择年级',
                 name:'gradeCode',
                 id : 'cobStudentListGradeCode',
                 store : 'Grade',
                 valueField : 'gradeCode',
                 displayField : 'gradeName',
                 editable : false,
                 emptyText : '请选年级',
                 queryMode : 'local'    

                },{
                 xtype : 'textfield',
                 labelSeparator:':',
                 labelWidth : 150,
                 width: 300,
                 labelAlign : 'right',
                 id:'SListTextField',
                 name:'userNameORuserCode',
                 fieldLabel : '输入学生ID或学生姓名'
             },{
                 xtype : 'button',
                 id : 'btnStuListQuery',
                 text : '查询'
             },{
                 xtype : 'button',
                 id : 'btnStuListReset',
                 text : '重置'
             }]
         }]
     }],
     columns : [
         {   xtype:'rownumberer',text:'序号',flex:1,    align:'center'},
         {   text:'账户ID' , flex:2 , align:'center' , dataIndex:'userCode' },
         {    text:'用户姓名' , flex:1 , align:'center' , dataIndex:'userName'},
         {    text:'性别' , flex:1 , align:'center' , dataIndex:'sex'    },
         {    text:'城市' , flex:1 , align:'center' , dataIndex:'cityName'    },
         {    text:'学校' , flex:1 , align:'center' , dataIndex:'schoolName'},
         {    text:'年级号' , flex:1 , align:'center' , dataIndex:'gradeCode'},
         {    text:'联系电话' , flex:2 , align:'center' , dataIndex:'tel'},
         {    text:'邮箱' , flex:2 , align:'center' , dataIndex:'email'},
         {    text:'QQ' , flex:2 , align:'center' , dataIndex:'qq'},
         {    header:'账户注册时间',align:"center",flex:3,dataIndex:'firstAccessDate',xtype:'datecolumn',format:'Y-m-d H:i:s'},
         {    header: '详细信息' ,
             xtype: 'actioncolumn' ,
             width: 50 ,
             flex : 1 ,
             align:'center',
             items: [{
                 icon: 'images/grid.png' ,
                 tooltip: '详细信息' ,
                 handler: function(grid, rowIndex, colIndex){
                     var record = grid.getStore().getAt(rowIndex);
                     var win = Ext.create('ExtApp.view.StudentDetails').show();
                     var form = win.down('form').getForm();
                     form.loadRecord(record);
                 }
             }]
         }
     ],
     dockedItems:[{
         xtype: 'pagingtoolbar',
         store : 'StudentList' ,   // GridPanel中使用的数据
            dock: 'bottom',
           displayInfo: true
     }]
 });

点击"查询"按钮触发事件：

 StuListQuery:function(btn,event){
         var store=this.getStore('StudentList');
         var form=btn.up('form[id=queryFormSL]');
         var grid=form.up('grid[id=StudentListGrid]');
         //var grid=Ext.getCmp('StudentListGrid');
         var pageBar = grid.down('pagingtoolbar');
         var userNameORuserCode=form.getForm().getValues()['userNameORuserCode']; //form.getForm.getValues()返回的是一个数组
         var gradeCode = form.getForm().getValues()['gradeCode'];
         store.setProxy({
             type:'ajax',
             actionMethods:{
                 read:'POST'
             },
             url:'queryStudent.action',
             extraParams:{'userNameORuserCode':userNameORuserCode,
                         'gradeCode':gradeCode
                         },
             reader:{
                 type:'json',
                 root: 'rows',
                 totalProperty: 'results'
             }
         });
         pageBar.moveFirst();
     },  

 Extjs中找Form，Extjs找组件的方式：

1，Extjs.getCmp

2,通过组件之间的关系，up，down