先上图

这中间遇到grid分页和下拉comboBox级联(用户、地域)

源代码如下：

/*
 * Ext JS Library 2.0.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

Ext.onReady(function(){

//    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

    // example of custom renderer function
    function statusColor(val){
        if(val == ''在线''){
            return ''<span style="color:green;">'' + val + ''</span>'';
        }else if(val == ''会议中''){
            return ''<span style="color:red;">'' + val + ''</span>'';
        }
        return val;
    }

    // create the Data Store
    var store = new Ext.data.Store({
        // this page, an HttpProxy would be better
//     proxy: new Ext.data.MemoryProxy(data),
//        proxy: new Ext.data.HttpProxy({
//            url: ''termSearch.action''
////           url:''../../temp/data.txt''
//        }),
        url:''termSearch.action'',
        storeId:''searchResult'',

        // create reader that reads the Topic records
        reader: new Ext.data.JsonReader({
            totalProperty: ''totalrows'',
            root: ''data'',
//            id: ''id'',
            fields: [
              {name: ''id'', type:''int''},
              ''consumer'',
              ''area'',
              ''termid'',
                ''name'',
                ''status'',
                ''udate''
//                {name: ''udate'', mapping: ''udate'', type: ''date'', dateFormat: ''Y-m-d''}
            ]
        })
// ,

        // turn on remote sorting
//        remoteSort: true
    });
  
   var sm = new Ext.grid.CheckboxSelectionModel();// 多选行  
 var cm = new Ext.grid.ColumnModel([
   new Ext.grid.RowNumberer(),
   sm,
     {header:''序号'',width:40,dataIndex:''id''},
     {header:''用户'',width:50,dataIndex:''consumer''},
     {header:''地域'',width:50,dataIndex:''area''},
     {header:''终端编号'',dataIndex:''termid''},
     {header:''终端名称'',dataIndex:''name''},
     {header:''终端状态'',dataIndex:''status'',renderer: statusColor},
     {header:''更新日期'',dataIndex:''udate''}
    ]);
//  cm.defaultSortable = true;

    // by default columns are sortable
    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
        store: store,
        cm: cm,
        stripeRows: true,
        height:350,
        width:800,
        title:'''',
       
        tbar: new Ext.PagingToolbar({
            pageSize: 10,
            width:''98%'',
            store: store,
//            paramNames:{rowStart: ''start'', rowLimit: ''limit''},
            displayInfo: true,
            displayMsg: ''显示第 {0} 条到 {1} 条记录，共 {2} 条'',
            emptyMsg: "无记录"
        })
    });

       
//    grid.render(''div-grid'');

//    grid.getSelectionModel().selectFirstRow();
   
    var consumerStore = getSelectStore("54");
    var termTypeStore = getSelectStore("53");
    var termStatusStore = getSelectStore("51");

        
//    new Ext.data.SimpleStore({
//                  fields: [''text''],
//                  data : [[''0'',''0''],[''5'',''5''],[''10'',''10''],[''15'',''15''],[''20'',''20'']],
//                  fields:[{name: ''value'', mapping: 0},{name:''text'',mapping:1}],
//                  autoLoad:true
//              })
   
    var table = new Ext.Panel({
     layout:''table'',
     defaults: {
         bodyStyle:''padding:1px''
     },
     layoutConfig: {
         columns: 4
     },
     items: [{
     width:165,
          layout: ''form'',
          labelWidth:55,
          items: [{
              xtype:''textfield'',
              fieldLabel: ''终端编号'',
              name: ''termId'',
              id:''termId'',
              anchor:''95%''
          }]
     },{
   width:165,
          layout: ''form'',
          labelWidth:55,
          items: [{
              xtype:''textfield'',
              fieldLabel: ''终端名称'',
              name: ''termName'',
              id:''termName'',
              anchor:''95%''
          }]
               
     },{
   width:165,
          layout: ''form'',
          labelWidth:55,
          items: [{
              xtype:''textfield'',
              fieldLabel: ''刷新延时'',
              name: ''timeLapse'',
              id:''timeLapse'',
              anchor:''95%'',
              xtype:''combo'',
          store: new Ext.data.Store({
          proxy: new Ext.data.MemoryProxy([[''0'',''0''],[''5'',''5''],[''10'',''10''],[''15'',''15''],[''20'',''20'']]),
          reader: new Ext.data.ArrayReader({}, [
              {name: ''value'',mapping: 0, type: ''int''},
              {name: ''text'',mapping: 1}
          ]),
          autoLoad:true
      }) ,
      
          displayField:''text'',
          valueField:''value'',
          hiddenName:''timeLapseValue'',
          typeAhead: true,
          triggerAction: ''all'',
          forceSelection:true
          }],
          colspan:2
               
     },{
       width:165,
          layout: ''form'',
          labelWidth:55,
          items: [{
              xtype:''textfield'',
              fieldLabel: ''用户'',
              name: ''consumerId'',
              anchor:''95%'',
          id: ''consId'',
              xtype:''combo'',
              anchor:''95%'',
          store: consumerStore,
          displayField:''text'',
          valueField:''value'',
          hiddenName:''consumerId'',
          typeAhead: true,
          mode: ''local'',
          triggerAction: ''all'',
          forceSelection : true,
          emptyText:''Select a user...'',
            allowBlank: false,
          selectOnFocus:true,
          forceSelection:true,
          listeners:{
      select:{
       fn:function(combo,record,index) {
//        Ext.Msg.alert('''',''xxxxxxx''); 
        var store = getSelectStore("55",record.get(''value''));
        
//        Ext.Msg.alert(''''+store.getCount(),''xxxxxxxxx=''+store.getTotalCount());
        
        
        Ext.getCmp(''areaId'').clearValue();
        Ext.getCmp(''areaId'').store = store;
        if(Ext.getCmp(''areaId'').view){
         Ext.getCmp(''areaId'').view.setStore(store);
//         Ext.getCmp(''areaId'').view.refresh();
         
        }
        Ext.getCmp(''areaId'').enable();
        
       }
      }
          }
          }]
     },{
        width:165,
        layout: ''form'',
        labelWidth:55,
        items: [{
            xtype:''textfield'',
            fieldLabel: ''地域'',
            name: ''consumerArea'',
            id:''areaId'',
            anchor:''95%'',
              xtype:''combo'',
          store: new Ext.data.Store(),
          displayField:''text'',
          valueField:''value'',
          hiddenName:''consumerAreaId'',
          typeAhead: true,
          mode: ''local'',
          triggerAction: ''all'',
          forceSelection : true,
          emptyText:''Select a area...'',
            allowBlank: false,
          selectOnFocus:true,
          forceSelection:true,
          disabled:true
        }]
     },{
          width:165,
          layout: ''form'',
          labelWidth:55,
          items: [{
              xtype:''textfield'',
              fieldLabel: ''终端状态'',
              name: ''termStatus'',
              id:''termStatus'',
              anchor:''95%'',
              xtype:''combo'',
          store: termStatusStore,
          displayField:''text'',
          valueField:''value'',
          hiddenName:''termStatusId'',
          typeAhead: true,
          triggerAction: ''all'',
          forceSelection:true,
          editable:false,
          mode: ''local''
          }]
       
     },
//     {
//          width:165,
//          layout: ''form'',
//          labelWidth:55,
//          items: [{
//              xtype:''textfield'',
//              fieldLabel: ''终端类型'',
//              name: ''termType'',
//              id:''termType'',
//              anchor:''95%'',
//              xtype:''combo'',
//          store: termTypeStore,
//          displayField:''text'',
//          valueField:''value'',
//          hiddenName:''termTypeId'',
//          typeAhead: true,
//          triggerAction: ''all'',
//          forceSelection:true,
//          editable:false,
//          mode: ''local''
//          }]
//       
//     },
     {
          layout: ''form'',
          labelWidth:55,
          items: [{
          name: ''Save'',
          id: ''Save'',
          text: ''查询'',
              xtype:''button''
          }]
     }]
 });
//    table.render(''div-grid'');
    var fp = new Ext.FormPanel({
//        labelAlign: ''top'',
        frame:true,
        title: ''.'',
        bodyStyle:''padding:5px 5px 0'',
        width: 800
       
    });
   
    fp.add(table);
  fp.add(grid);
    fp.render("div-form");  
     //增加基本参数
   store.on(''beforeload'', function(store) {
     var para = {termId:'''',termName:'''',consumerId:'''',areaId:'''',termTypeId:'''',tstatus:''''};
     para.termId = Ext.get(''termId'').getValue();
     para.termName = Ext.get(''termName'').getValue();
     para.consumerId = Ext.get(''consumerId'').getValue();
     para.areaId = Ext.get(''consumerAreaId'').getValue();
     para.tstatus = Ext.get(''termStatusId'').getValue();
//     para.termTypeId = Ext.get(''termTypeId'').getValue();
    
       Ext.apply(store.baseParams,para);  
  });
    store.load({params:{start:0, limit:10}});

   
    Ext.get("Save").on(''click'', function(){
     store.load({params:{start:0, limit:10}});
     
        });
});

function getSelectStore(selectId,pid){
 if(!pid) pid = '''';
 var store = new Ext.data.Store({   
     proxy: new Ext.data.HttpProxy({  
         method: ''GET'',  
         url: ''../webapp-cfg/getSelectOption.action?selectId=''+selectId+''&pvalue=''+pid+''&random=''+Math.random()
     }),  
     reader: new Ext.data.ArrayReader(
      {id: "value"},
      [
        {name: ''value'', mapping: ''value''},
        {name: ''text'',mapping:''text''}
      ]),
     autoLoad:true
    
 });
 
// var sss = new Ext.data.Store();
 store.load();
 store.on(''load'', function( s, records, options )  {
  
  var rs = new Array(1);
  var all = new Ext.data.Record([{name: ''value'', mapping: ''value''},
        {name: ''text'',mapping:''text''}]);
  all.set(''value'','''');
  all.set(''text'',''全部'');
  rs[0] = all;
//  sss.add(records);
//  sss.insert(0,rs);
  s.insert(0,rs);
  
 });

 return store;