Ext3.4 带查询form的grid封装

之前用EXT都是很零散，去API中找他的example，到最后发现，一个一个是相当独立的模块，很多重复的东西，自己没有把相同的东西封装过，现在尝试封装了一下。

下面代码的功能是创建一个表格，然后上面有个条件查询的功能，根据条件，查询出不同的数据反应在表格中。

查询表格的searchForm.js代码

Ext.ns("SearchFormPanle");SearchFormPanle = Ext.extend(Ext.Panel, {searchFormPanel : null,//store : null,//comboBoxData : null,constructor : function(b) {Ext.applyIf(this, b);this.initUI();SearchFormPanle.superclass.constructor.call(this, {id : "SearchFormPanle",iconCls : "menu-onlinedoc",region : "center",items : [this.searchFormPanel]});},initUI : function() {//将传过来的gridStore赋给定义的全局变量store，以方便后面调用，//在此，传递的参数名不能与此处定义的全局变量同名，否则他不知道给本地的全局变量赋哪一个值，出现没定义的情况var ssstore = this.gridStore;var comboData = this.data;var comboFirst = this.dataFirstvar searchCombo = new Ext.form.ComboBox({    id: 'searchType',    name: "searchType",    typeAhead: true,    triggerAction: 'all',    lazyRender: true,    width: 80,    forceSelection : true,    mode: 'local',    displayField:'displayText',    listeners:{                  render:function(r){                      r.setValue(comboFirst)                  }            },             editable: false,    store: new Ext.data.ArrayStore({    id: 0,    fields: [        'searchType',        'displayText'    ],    data: comboData        }),  selectOnFocus : true    });this.searchFormPanel = new Ext.form.FormPanel({region : "north",title: '条件查询',        height: 60,        labelWidth: 60,        defaultType: 'textfield',        items: [{                xtype: 'compositefield',                fieldLabel: '查询方式',                msgTarget: 'side',                collapsible: true,                items: [                    searchCombo,                    {xtype: 'textfield',  flex : 1,  id : 'name',  name: 'name',  width: 200,  emptyText: '输入全称或关键字'},{xtype:'button',text: '查询',  width: 60,handler: function() {var name = Ext.getCmp('name').getValue();var searchType = Ext.getCmp('searchType').getValue();ssstore.load({params:{name:name,searchType:searchType}});}}]            }]    });}});

调用的panel.js代码

function getRootPath(){var curWwwPath=window.document.location.href;    var pathName=window.document.location.pathname;    var pos=curWwwPath.indexOf(pathName);    var localhostPaht=curWwwPath.substring(0,pos);    var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);    return(projectName);}Ext.onReady(function(){   var store = new Ext.data.GroupingStore({autoDestroy: true,        url: getRootPath()+'/materialPlan/reportCreateJSON',reader : new Ext.data.JsonReader({ root: 'items',totalProperty: 'results',fields:[{name : "materialId",mapping : "materialId",type : 'int'}, {name : "name",mapping : "name"}, {name : "materialType",mapping : "materialType",type : 'string'}, {name : "resourceType",mapping : "resourceType",type : 'string'}, {name : "drType",mapping : "drType",type : 'string'}, {name : "reportMaterialNumber",mapping : "reportMaterialNumber",type : 'int'}, {name : "unit",mapping : "unit",type : 'string'}, {name : "reportPrice",mapping : "reportPrice",type : 'float'}, {name : "reportStoreType",mapping : "reportStoreType",type : 'string'}, {name : "detail",mapping : "detail",type : 'string'}                                             ]}),sortInfo : {field : 'name',direction : 'ASC'}   });var fm = Ext.form;var editor = new Ext.ux.grid.RowEditor({    saveText: '申请'});editor.on({scope: this,afteredit: function(roweditor, changes, record, rowIndex) {    var data = store.getAt(rowIndex).data;             Ext.Ajax.request({  url:getRootPath()+'/materialPlan/saveReportNDRCCreateGrid',  method: record.phantom ? 'POST'   : 'PUT',  params: { materialId :  data.materialId, reportMaterialNumber : data.reportMaterialNumber, reportPrice : data.reportPrice, reportStoreType : data.reportStoreType, detail : data.detail  },    success: function() {Ext.Msg.alert("提示","修改成功!");     },    failure: function(response){Ext.Msg.alert("提示","修改失败!");        }   });}});var combo = new fm.ComboBox({    typeAhead: true,    triggerAction: 'all',    lazyRender: true,    forceSelection : true,    mode: 'local',    displayField:'displayText',    store: new Ext.data.ArrayStore({    id: 0,    fields: [        'reportStoreType',        'displayText'    ],    data: [[1, '实物储备'], [2, '协议储备'], [3, '产能储备']]        }),  selectOnFocus : true,  allowBlank : false    })var editGrid = new Ext.grid.GridPanel({store:store,height:400,width: 800,titleCollapse:true,    autoExpandColumn: 'materialId',plugins: [editor],renderTo: 'reportNDRCCreate',title: '发改委申报年度物资储备库',clicksToEdit: 1,margins: '0 5 5 5',    view: new Ext.grid.GroupingView({       markDirty: false    }),        columns : [new Ext.grid.RowNumberer(),{    id : 'materialId',    header : 'materialId',    dataIndex : 'materialId',    width : 100,    hidden : true,    sortable : true    },{    header : '物资名称',    dataIndex : 'name',    width : 80,    sortable : true    },{    header : '物资标识',    dataIndex : 'resourceType',    width : 100,    sortable : true    }, {    header : '物资类型',    dataIndex : 'drType',    width: 80,    sortable: true    }, {    header : '申报数量',    dataIndex : 'reportMaterialNumber',    width : 80,    editor : {    xtype : 'textfield'    }    }, {    header : '单位',    dataIndex : 'unit',    width : 30    }, {    header : '申报价格(元)',    dataIndex : 'reportPrice',    width : 80,    editor : {    xtype: 'numberfield',    allowBlank: false,    minValue: 0,    maxValue: 150000    }    },{    header : '储备方式',    dataIndex : 'reportStoreType',    width : 100,    editor: combo    },{    header : '备注',    dataIndex : 'detail',    width : 100,    editor : {    xtype : 'textfield'}}],        bbar: new Ext.PagingToolbar({            pageSize: 10,            store: store,            displayInfo: true,            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',            emptyMsg: "没有记录",            items:[            '-'            ]        })});//   store.load();store.load({params:{start:0,limit:10}});var myData = [[1, '物资名称'], [2, '物资标识'], [3, '物资类型'], [4, '物资分类']];var dataFirst = '物资名称';var seaForm=new SearchFormPanle({gridStore:store,data:myData,dataFirst:dataFirst});var view = new Ext.Viewport({layout:'border',items: [{region : 'north',margins : '-5 0 0 -2',layout : 'form',width: 800,height: 60,items : [ seaForm ]},{border : false,region : "center",items : [ editGrid ]}]});});

红色代码就是将前面searchForm封装好的调用过来

在页面引入这两个JS文件即可。