Ext2 常见界面界面(grid分页、窗口布局、下拉框级联)

先上图

这中间遇到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;
}