Extjs4中使用grid的reconfigure()方法动态改变列使用示例(代码)

最新推荐文章于 2022-09-18 21:21:06 发布

javaPie

最新推荐文章于 2022-09-18 21:21:06 发布

阅读量6.6k

点赞数

分类专栏： ExtJs

ExtJs 专栏收录该内容

246 篇文章 5 订阅

订阅专栏

Extjs4中使用grid的reconfigure()方法动态改变列使用示例(代码)

2014-01-03 11:53:06 来源：评论：0 点击：5818

Extjs4中使用grid的reconfigure()方法动态改变列使用示例(代码)

首先看Extjs4中grid的reconfigure()方法的定义:

reconfigure( [store], [columns] )

store : Ext.data.Store (optional)	The new store.
columns : Object[] (optional)	An array of column configs

主要看rebuild()函数中的内容，改方法主要调用了grid的reconfigure方法

代码如下:

 
         var 
          grid ; 
        
         var 
          store ; 
        
         var 
          dataArray = [{id: 
         '1' 
         ,title: 
         "spring in Action" 
         , description: 
         '英语' 
          } 
        
         ,{id: 
         '2' 
         ,title: 
         "2spring in Action" 
         , description: 
         '2英语' 
          }       
        
         ]; 
        
         //change grid columns 
        
         function 
          rebuild(){ 
        
         store.loadData(dataArray); 
        
         grid.reconfigure(store,  buildColumn() ); 
        
         grid.doLayout(); 
        
         } 
        
         //这个是主要的方法 
        
         function 
          buildColumn(){  
        
         var 
          columns = [];   
        
         var 
          item2 = {};  
        
         item2.dataIndex= 
         "id" 
         ; 
        
         item2.text =  
         "编\n号2" 
         ; 
        
         item2.sortable= 
         true 
         ; 
        
         item2.width =  
         "120" 
         ;  
        
         columns[0]=item2; 
        
         item2 = {};  
        
         item2.dataIndex= 
         "title" 
         ; 
        
         item2.sortable= 
         true 
         ; 
        
         item2.width =  
         "120" 
         ; 
        
         item2.flex=1; 
        
         item2.text =  
         "列2号2" 
         ;  
        
         columns[1]=item2;  
        
         item2 = {};  
        
         //item2.xtype = 'gridcolumn'; 
        
         item2.dataIndex= 
         "description" 
         ; 
        
         item2.sortable= 
         true 
         ; 
        
         item2.text =  
         "列3描述2" 
         ; 
        
         item2.width =  
         "80" 
         ; 
        
         columns[2]=item2;  
        
         return  
          columns; 
        
         } 
        
         Ext.onReady( 
         function 
         (){ 
        
         var 
          list_reader1= 
         "list_reader1" 
         ; 
        
         Ext.define( 
         'list_reader1' 
         ,{ 
        
         extend:  
         'Ext.data.Model' 
         ,  
        
         fields: [ {name:  
         'id' 
         },{name: 
         'title' 
         },{name: 
         'description' 
          } ,{name: 
         'language' 
          }] 
        
         }); 
        
         store = Ext.create( 
         "Ext.data.ArrayStore" 
         , { 
        
         model: list_reader1  
        
         }); 
        
         store.loadData(dataArray); 
        
         var 
          columns= [ 
        
         {text:  
         "编\n号" 
         , width: 120, dataIndex:  
         'id' 
         , sortable:  
         true 
         }, 
        
         {text:  
         "列2" 
         , flex: 1, dataIndex:  
         'title' 
         , sortable:  
         true 
         }, 
        
         {text:  
         "列3描述" 
         , width: 125, dataIndex:  
         'description' 
         , sortable:  
         true 
         }  
        
         ];  
        
         // create the grid 
        
         grid = Ext.create( 
         'Ext.grid.Panel' 
         , { 
        
         store: store, 
        
         id: 
         'test' 
         , 
        
         columns:columns, 
        
         forceFit:  
         true 
         , 
        
         height:410, 
        
         split:  
         true 
         , 
        
         region:  
         'north' 
        
         }); 
        
         Ext.create( 
         'Ext.Panel' 
         , { 
        
         renderTo:  
         'binding-example' 
         , 
        
         frame:  
         true 
         , 
        
         title:  
         'grid示例' 
         , 
        
         width: 480, 
        
         height: 300, 
        
         layout:  
         'border' 
         , 
        
         items: [grid ] 
        
         }); 
        
         });