ext js 用servlet动态加载grid

 Ext.onReady(function(){
    	 
        var form = getSerchFrom();
        var grid = getGrid();
        Ext.QuickTips.init();
          new Ext.Viewport({
              layout: 'border',
              items: [form,grid]
          });
          form.render('form');
    });

    function getSerchFrom(){ //构造头部分的查询条件
    	var form = new Ext.form.FormPanel({
    	          region: 'north',
    	          title:'查询条件',
    	          labelAlign:'right',
    	          labelWidth:50,
    	          height:100,
    	          width:300,
    	          frame:true,
    	          items:[{
    	                  layout:'column',
    	                  items:[{
    	                      columnWidth:.25,
    	                      layout:'form',
    	                      items:[{
    	                              xtype:'combo',
    	                              fieldLabel:'下拉框1',
    	                              name:'combo',
    	                              store: new Ext.data.SimpleStore({
    	                                  fields:['value','text'],
    	                                  data:[
    	                                      ['value1','text1'],
    	                                      ['value2','text2']
    	                                  ]
    	                              }),
    	                              displayField:'text',
    	                              valueField:'value',
    	                              mode:'local',
    	                              emptyText:'请选择',
    	                              readOnly:true//只读属性
    	                      },{
    	                              xtype:'textfield',
    	                              fieldLabel:'文本',
    	                              name:'text',
    	                              maxLength:20,  //判断最大可以输入的数值
    	                              maxLengthText:'输入过多，最大为20' //输入超过时，显示的提示信息
    	                      }]            
    	                  },{
    	                      columnWidth:.25,
    	                      layout:'form',
    	                      items:[{
    	                              xtype:'combo',
    	                              fieldLabel:'下拉框2',
    	                              name:'combo',
    	                              store: new Ext.data.SimpleStore({
    	                                  fields:['value','text'],
    	                                  data:[
    	                                      ['value1','text1'],
    	                                      ['value2','text2']
    	                                  ]
    	                              }),
    	                              displayField:'text',
    	                              valueField:'value',
    	                              mode:'local',
    	                              emptyText:'请选择',
    	                              readOnly:true//只读属性
    	                      },{
    	                              xtype:'datefield',
    	                              fieldLabel:'日期',
    	                              name:'date',
    	                              readOnly:true
    	                      }]
    	                  },{
    	                      columnWidth:.25,
    	                      layout:'form',
    	                      items:[{
    	                              xtype:'combo',
    	                              fieldLabel:'下拉框3',
    	                              name:'combo',
    	                              store: new Ext.data.SimpleStore({
    	                                  fields:['value','text'],
    	                                  data:[
    	                                      ['value1','text1'],
    	                                      ['value2','text2']
    	                                  ]
    	                              }),
    	                              displayField:'text',
    	                              valueField:'value',
    	                              mode:'local',
    	                              emptyText:'请选择',
    	                              readOnly:true//只读属性
    	                      },{
    	                              xtype:'datefield',
    	                              fieldLabel:'日期',
    	                              name:'date',
    	                              readOnly:true
    	                      }]
    	                  },{
    	                      columnWidth:.25,
    	                      layout:'form',
    	                      items:[{
    	                              xtype:'combo',
    	                              fieldLabel:'下拉框3',
    	                              name:'combo',
    	                              store: new Ext.data.SimpleStore({
    	                                  fields:['value','text'],
    	                                  data:[
    	                                      ['value1','text1'],
    	                                      ['value2','text2']
    	                                  ]
    	                              }),
    	                              displayField:'text',
    	                              valueField:'value',
    	                              mode:'local',
    	                              emptyText:'请选择',
    	                              readOnly:true//只读属性
    	                      },{
    	                              xtype:'button',
    	                              text:'查询',
    	                              handler :function(){
    	                                  Ext.Msg.alert("提示","查询成功");
    	                              }
    	                      }]
    	                  }]
    	              }]
    	          });  

        return form;
    }

    
    function getGrid(){   //构造下面的grid
    	 var multiCheckBox = new Ext.grid.CheckboxSelectionModel(); // 生成 checkBox 控件 
         var fields = [{name:'id'},{name:'name'},{name:'sex'},{name:'age'},{name:'like'},{name:'tel'}];
         var ds  = new Ext.data.Store({ // 配置分组数据集
			        	reader : new Ext.data.JsonReader({
			        		totalProperty : "results", // 记录总数
				        	root: "rows",
			 				fields : fields
			 			}),
			 			url : "TestDataServlet"
                    });	
         ds.load();
         //定义表头
         var cm = new Ext.grid.ColumnModel([
               multiCheckBox, 
               new Ext.grid.RowNumberer({header : '',	width : 20}), // 表格行号组件
              { header:'行号', dataIndex:'id'},
              {header:'姓名', dataIndex:'name'},
              {header:'性别', dataIndex:'sex'},
              {header:'年龄',dataIndex:'age'},
              {header:'爱好',dataIndex:'like'},
              {header:'电话',dataIndex:'tel'}
           ]);
         cm.defaultSortable = true;
           var grid = new Ext.grid.GridPanel({
              title:'查询结果',
              id: '',
              region:'center',
              store: ds,
             // tbar : toolbar,
              cm: cm,
              stripeRows : true, // 显示斑马线
			  autoScroll : false, // 当数据超出表格高度时，自动显示滚动条
              sm: multiCheckBox, //生成checkbox
              bbar: new Ext.PagingToolbar({
                  pageSize: 10, // 是每页显示几条数据
                  store: ds,  
                  displayInfo: true,  // 跟下面的配置有关，如果是false就不会显示提示信息
                  displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', // 只有在displayInfo:true的时候才有效，
                                                                    //用来显示有数据的时候的提示信息，中国人应该看得懂汉语，
                                                                    //到时候{0},{1},{2}会自动变成对应的数据
                  emptyMsg: "没有记录" 
              })
           });
           //给grid添加click事件
           grid.on("rowClick",function(grid, row,e){
                 alert(row+1);
             });
           return grid;
    }

下面的事servlet里面

  request.setCharacterEncoding("UTF-8");
		   response.setCharacterEncoding("UTF-8");
		   response.setContentType("text/html;charset=UTF-8");
		   
		   PrintWriter out =response.getWriter();
		   //构造假数据
		   StringBuffer json =new StringBuffer("{results:10,rows:[");
		   for(int i=0;i<10;i++){
			   json.append("{id:'编号"+i+"',name:'姓名"+i+"',sex:'"+(i%3==0?'男':'女')+"',age:"+i+",like:'"
					   +(i%3==0?"足球":"篮球")+"',tel:'123456789'},");
		   }
		  
		   String tojson =json.substring(0,json.lastIndexOf(","));
		   tojson= tojson+"]}";
		   out.write(tojson);
		   
		   out.flush();

其实这里面注意的只有一下几点，

1、servlet处理中文的 //response.setContentType("text/html;charset=UTF-8");这段

2、json的格式和 构造store 里面的 reader : new Ext.data.JsonReader({

			        		totalProperty : "results", // 记录总数
				        	root: "rows",
			 			fields : fields
			 			})

3、js里面有一些细节，需要注意。