ExtJS的form和grid结合示例

<script type="text/javascript">
//页面布局开始
//初始化
var queryForm;
Ext.onReady(function(o){
       // 因为我采用的是内嵌的ifram，所以这行为设定父panel的高度，根据页面显示内容调整自定义页面高度
     parent.tabs.setHeight(574);
       // 绘制表单
    	paintForm();
	// 绘制内容展示区
	centerPanel = new Ext.Panel( {
					region :'center', // 当父panel布局为borderLayout时，必须有center region，否则将抛出异常
					monitorResize :true, // 适应屏幕大小
					border :false, // 不显示边框
					style:'margin:3px 0 0 0;',	// 设置上边距为3个像素		
					items : [{
						id :'centerPanel', //名称可任意指定
						header:false,  // 不显示该panel的 title项
						border:false,
						contentEl:'mainDiv'   // 必须要有此项，当items里没有item项时，必须使用contentEl指定一个已存在的元素作为容器
					}]
				});
				// 从这里开始绘制页面，Viewport的默认容器为body
				var layout = new Ext.Viewport( {
					layout :'border',  // 布局样式，类似swing的布局，分为上左中右下五个区域
					defaults : {border :false}, // 设置全局样式
					items : [queryForm, centerPanel] // 包含queryForm(north)和centerPanel(center)两个panel。
				});
				//调用绘制列表的方法
				list();
			});
			
			// 绘制查询表单 
			function paintForm(){
//绘制下拉选择框，也可使用ComboBox的store对象的loadData方法动态加载选择项
				var checkStateCombo = new Ext.form.ComboBox({
					store:new Ext.data.SimpleStore({
						fields: ["value", "text"],
                        	data: [['0','全部'],['3','违规'],['1','未审核'],['4','非违规']]
			         }),
			         valueField :"value", // 这两项要与上面的fields对应
			         displayField: "text",
			         mode: 'local', // 数据从本地获取
			         blankText:'请选择',
			         emptyText:'------',
			         triggerAction: 'all', // 显示全部选择项
			         fieldLabel: '审核状态',
			         name: 'torrentQuery.checkState',
			         hiddenName:'torrentQuery.checkState', // 每个元素必须有hiddenName项,form对象读取的值是跟此项关联的,命名规则取决于你与action之间的传值策略，这里使用的是VO注入。
			         anchor:'100%'
				});
				
				var orderCombo = new Ext.form.ComboBox({
						store:new Ext.data.SimpleStore({
							fields:["value","text"],
							data:[['downloadNum','排序A],['detectedTime','排序B]]
						}),
						valueField :"value",
					    displayField: "text",
				         mode: 'local',
				         blankText:'请选择',
				         emptyText:'------',
				         triggerAction: 'all',
				         fieldLabel:'排序方式',
				         name: 'torrentQuery.orderBy',
				         hiddenName:'torrentQuery.orderBy',
				         value:'downloadNum',
				         anchor:'100%'
				});
				
				var sortCombo = new Ext.form.ComboBox({
						store:new Ext.data.SimpleStore({
							fields:["id","text"],
							data:[['desc','倒序'],['asc','正序']]
						}),
						valueField :"id",
						labelSeparator:"",
					    displayField: "text",
				         mode: 'local',
				         blankText:'请选择',
				         emptyText:'------',
				         value:'desc',
				         triggerAction: 'all',
				         hiddenName:'torrentQuery.sortBy',
				         fieldLabel:'',
				         name: 'torrentQuery.sortBy',
				         anchor:'100%'
				});
				
				queryForm = new Ext.FormPanel({
					height: 60,
			        labelAlign: 'right',
			        region:'north',
				    buttonAlign:'right',
				    labelWidth:70,
			        border: false,
			        header:false,
			        frame:false,
			        monitorResize:true,
			        items:[{
			        		layout:'column',  // 布局为一列
			        		ctCls:'form-bg', // 自定义父元素的样式
			            border:false,
			            items:[{
			                columnWidth:.3, // 列宽为百分之30%
			                layout: 'form',
			                border:false,
			                items: [{
			                	 	id:'remark',
			                	 	xtype:'textfield',
			                	 	fieldLabel: '名称',
				                 name: 'torrentQuery.remark',
				                 hiddenName:'torrentQuery.remark',
				                 anchor:'100%',
				                 allowBlank:true  // 允许为空
			                }]
			            },{
			                columnWidth:.3,
			                layout: 'form',
			                border:false,
			                items: [{
			                	 	id:'sitename',
			                		xtype:'textfield',
			                	 	fieldLabel: '网站',
				                 name: 'torrentQuery.siteName',
				                 hiddenName:'torrentQuery.siteName',
				                 anchor:'100%',
				                 allowBlank:true
			                }]
			            },{
			                columnWidth:.25,
			                layout: 'form',
			                labelWidth:80,
			                border:false,
			                items: [
			                	{
			                		id:'detectedTimeStart',
			                		xtype:'datefield',
				                fieldLabel: '发现时间从',
				                name: 'torrentQuery.detectedTimeStart',
				                hiddenName: 'torrentQuery.detectedTimeStart',
				                readOnly:true,  // 设置为只读
				                maxValue:new Date(), // 设置最大值
				                format:'Y-m-d',
				                anchor:'98%',
				                value:'',
				                allowBlank:true
							}]
			            },{
			                columnWidth:.15,
			                layout: 'form',
			                border:false,
			                labelWidth:10,
			                labelSeparator:" ",
			                items: [
			                 {
			                		id:'detectedTimeEnd',
			                		xtype:'datefield',
				                fieldLabel: '到',
				                name: 'torrentQuery.detectedTimeEnd',
				                hiddenName:'torrentQuery.detectedTimeEnd',
				                readOnly:true,
				                maxValue:new Date(),
				                format:'Y-m-d',
				                anchor:'100%',
				                allowBlank:true
			                }]
			            } ,{
			            	columnWidth:.3,
			            	layout:'form',
			            	border:false,
			            	items:[checkStateCombo]
			            },{
			            	columnWidth:.2,
			                layout: 'form',
			                border:false,
			                labelWidth:70,
			                labelSeparator:":",
			                items: [orderCombo]
			            },{
			            	columnWidth:.1,
			                layout: 'form',
			                border:false,
			                labelWidth:10,
			                labelSeparator:" ",
			                items: [sortCombo]
			            },{
			            	columnWidth:.2,
			                layout: 'form',
			                border:false,
			                labelWidth:80,
			                items:[{
			            		xtype: 'radiogroup',
				                fieldLabel: 'SELECT',
// 单选框
				                items: [
				                    {boxLabel: 'B',name:'torrentQuery.B', inputValue: 0},
				                    {boxLabel: 'E', name:'torrentQuery.E',inputValue: 1}
				                ]
			            	}]
			            },{
			            		columnWidth:.04,
			                layout: 'form',
			                border:false
			            },{
                 				layout:'form',
                 				columnWidth:.09,                 				
                 				border:false,
                 				items:[{
                 						xtype:'button',
                 						text:'&nbsp;&nbsp;&nbsp;检索&nbsp;&nbsp;&nbsp;',
                 						cls:'w-btn',
                 						handler: list
                 				}]		                    			
                 		},{
                 				layout:'form',
                 				columnWidth:.07,                 				
                 				border:false,
                 				items:[{
                 						xtype:'button',
                 						text:'&nbsp;&nbsp;&nbsp;重置&nbsp;&nbsp;&nbsp;',
                 						cls:'w-btn',
                 						handler: function(){conditionForm.form.reset();}
                 				}]		                    			
                 		}]
			        }]
				});
			}
			
// 绘制列表
			function list(){
				 // 表单验证检查
				 if(!queryForm..form.isValid()){
	Ext.Msg.alert('提示信息', '表单数据格式有误，请检查后重新查询。');
	return;
}

				 if(queryForm.form.findField('torrentQuery.detectedTimeStart').getValue()!='' && queryForm.form.findField('torrentQuery.detectedTimeEnd').getValue()!=''){
			         if(queryForm.form.findField('torrentQuery.detectedTimeStart').getValue().getTime() > query.form.findField('torrentQuery.detectedTimeEnd').getValue().getTime()){
					 	Ext.Msg.alert("提示信息","发现时间的起始时间大于结束时间，请重新输入！");
					 	return;
					 }
				 }
				// 构造数据源
				 var ds = new Ext.data.Store({
					 proxy: new Ext.data.HttpProxy({url:'${ctx}/torrent/manage!list.action'}),
// 向action层传递参数,Ext提供的工具可以方便的将form中的值组装成json对象传到后台
					 baseParams:Ext.decode(Ext.encode(queryForm.form.getValues())),
					 method: 'post',
					 reader:new Ext.data.JsonReader(
							{	root:'result',
								id:'id',
								totalProperty: 'totalCount'
							}, 
							[
							{name:"id"}, // 当name与返回数据的的JSON串的Element一致时，无须使用mapping属性,默认类型为string
							{name:"name"},
							{name:"siteName"},
							{name:"downloadNum",type:"int"}, //对于需要排序的数据，需要加上type属性指定具体数据类型
							{name:"siteId"},
							{name:"btEmule"}
							]
						)});
				// 构造多选框
				 var sm = new Ext.grid.CheckboxSelectionModel({
			           dataIndex: 'id',
			           width: 20
			        });
				 // 构造列表的显示项
				 var cm = new Ext.grid.ColumnModel([
				 				sm,
								{
									header:"名称", 
									width:160,
									dataIndex:"name",
									align:"left"
									//renderer:addTooltip   // 可以将结果重新绘制，传入6个参数，详细参考api
								}, 
								{
									header:"网站", 
									width:60,
									dataIndex:"siteName",
									//renderer:addUnderline,
									align:"left"
								}, {
									header:"下载次数", 
									width:40,
									sortable:true, 
									dataIndex:"downloadNum",
									align:"center"
								},{
									header:"详情", 
									width:40,
									dataIndex:"id",
									align:"center",
									renderer:detailStyle
								}					]);
					paintGrid(ds,cm,sm);
			}
			// 绘制表格或称为组装
function paintGrid(ds,cm,sm){
	// 清空容器
				Ext.get('mainDiv').dom.innerHTML="";
				grid = new Ext.grid.GridPanel({
					id:'resultGrid',
			     	el:'mainDiv', // 已存在的元素,与centerPanel对应同一容器，这样这个grid就会被绘制到centerPanel中去。
			        autoScroll:true,
			    		header: false,
			        store: ds,
cm: cm,
			        sm: sm,
			        height: document.body.clientHeight - 63,
			        width: document.body.clientWidth,
			        border: false,
			        monitorResize:true,
					enableColumnHide:false,  // 不允许隐藏列，用于避免列表的监听事件错位
			        enableColumnMove:false,	// 不允许移到列
			        trackMouseOver:false,  //鼠标滑动变色 默认false
			        loadMask: true,  // 加载时显示遮罩
			        listeners:{cellclick:renderPage}, // 添加监听事件
			        viewConfig: {  
				        forceFit: true,   // 自动计算列宽以适应当前panel大小
				        columnsText:'选择列', // 默认为英文
				        sortAscText:'正序排列',
				        sortDescText:'倒序排列'
				    },
			        bbar: new Ext.PagingToolbar({     // 分页信息显示
			            pageSize: 15,
			            store: ds,
			            displayInfo: true,
			            displayMsg: '显示第{0} - {1}条记录，总共{2}条记录，共{3}页',  // 这里的信息重写了，原实现只有三个占位符，根据需要来定
			            emptyMsg: "没有结果显示",
			            items:[{
				        			xtype:'button',
					            text:'导出查询结果',
					            iconCls: 'addmenu', // 自定义图标样式
					            handler: exportResult // 自定义执行动作
				         },'-'
				         ]
			        })
			    });
			    grid.render();
			    ds.load({params:{start:0, limit:15}}); // 加载数据
			}
			// 鼠标点击触发事件
function renderPage(grid, rowIndex, columnIndex, e){
				var id = grid.getStore().getAt(rowIndex).data['id'];
				switch(columnIndex){
					case 12: detail(id); break;
					case 13: alert('其它操作…'); break;
					……
					default: break;
				} 
			}
		</script>

 

顺便加一句:

 

formPanel里的Combo控件有一个bug，当id与hiddenName同时存在的时候，下拉框的位置会不对，用的时候只需要写入name和hiddenName就行了，hiddenName必须保留，因为在baseForm.getValue的时候，读的是这个属性。