海水正蓝

面朝大海,春暖花开
posts - 145, comments - 29, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理
先上图

grid分页:
     把grid和page工具绑定在一起

    // create the Data Store
    var store = new Ext.data.Store({
        url:'termSearch.action',
        storeId:'searchResult',

        reader: 
new Ext.data.JsonReader({
            totalProperty: 'totalrows',
            root: 'data',
            fields: [
                 
{name: 'id', type:'int'},
                 'consumer',
                 'area', 
                 'termid',
                'name',
                'status',
                'udate'
            ]
        }
)
    }
);
   
  
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'}
    ]);

    
// 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,
            displayInfo: 
true,
            displayMsg: '显示第 
{0} 条到 {1} 条记录,共 {2} 条',
            emptyMsg: 
"无记录"
        }
)
    }
);


窗口布局:
   Ext2有很多布局,就是在layout包下,我这里用了TableLayout,TableLayout其实就是和一个HTML中的表格一样,可以作row和column的span

    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) 
                                
var store = getSelectStore("55",record.get('value'));
                                
                                Ext.getCmp('areaId').clearValue();
                                Ext.getCmp('areaId').store 
= store;
                                
if(Ext.getCmp('areaId').view){
                                    Ext.getCmp('areaId').view.setStore(store);
                                }

                                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'
          }
]
        
        }
,{
          layout: 'form',
          labelWidth:
55,
          items: [
{
                name: 'Save',
                id: 'Save',
                text: '查询',
              xtype:'button'
          }
]
        }
]
    }
);


下拉框级联:
     下拉框级联的思路其实很简单,就是在第一个的select事件中刷新跌入下拉框的store。这里问题主要在如何给第二个下拉框的store赋值,我这里 是用了一个方法获得一个新的store,然后赋值的。不仅要各combo赋值,还要给combo.view赋值。一开始就卡在这里了,物理如何我给 combo赋值后,下拉框中的值总是不能够及时刷新。给combo.view赋值是需要使用combo.view.setStore(store)这个方 法,而不能直接赋值。在赋值的时候需要检查combo.view 是否存在。

                                var store = getSelectStore("55",record.get('value'));
                                
                                Ext.getCmp('areaId').clearValue();
                                Ext.getCmp('areaId').store 
= store;
                                
if(Ext.getCmp('areaId').view){
                                    Ext.getCmp('areaId').view.setStore(store);
                                }

                                Ext.getCmp('areaId').enable();


 

完整源代码如下
/*
 * 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();
     
       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
     
 }
);
 

 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;

  s.insert(
0,rs);
  
 }
);



http://www.blogjava.net/winderain/articles/200573.html

只有注册用户登录后才能发表评论。


网站导航: