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.dataFirst
		
		var 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文件即可。