2011-11-06 2 views
1

ExtJS 4 그리드에서 열을 추가/제거하는 기능이 필요합니다. Grid가 Extjs 4로 작성되었습니다. Google에 후 다음 코드를 발견했습니다.Extjs4 Grid에서 열 추가/제거

function reconfigure(store, columns) { 
    // debugger; 
    var me = grid; 

    if (me.lockable) { 
     me.reconfigureLockable(store, columns); 
     return; 
    } 

    if (columns) { 
     me.headerCt.removeAll(); 
     me.headerCt.add(columns); 
    } 

    if (store) { 
     store = Ext.StoreManager.lookup(store); 
     me.bindStore(store); 
     // me.getView().refresh(); 
    } else { 
     me.getView().refresh(); 
    } 
} 

나는이 기능

var store = grid.getStore(); 
reconfigure(store, fields); 

그것은 헤더 행을 교체입니다하지만 데이터를 새로 고칠 수 없습니다로 호출하고이 코드. ExtJs 4.0을 사용하고 있습니다

+1

및시키는 문제 쇼를 만들 필요할 때 숨길 수 있습니까? 옵션을 모두 제거하고 새 세트를 추가 할 때 옵션은 전체 격자를 파괴하고 새 격자를 만드는 것과 비슷합니다 ... – bensiu

+0

나는 그것을 시도했지만 매우 느리게 작동합니다 –

+0

격자를 재구성 함수에 전달하면 안됩니까? 전역 적으로 범위가 지정된 변수는 나쁜 생각입니다. – JamesHalsall

답변

0

이 문제가 해결되어 표시되는 모든 열을 배열에 저장했습니다. 내가

function ShowHideColumns(settingsColumn) { 
    var gridColumns = grid.columns; 
    var len = gridColumns.length; 
    for (var j = 0; j < len; j++) { 
     var gridColumn = gridColumns[j]; 
     for (var i = 0; i < settingsColumn.length; i++) { 
      var columnSetting = settingsColumn[i]; 
      if (gridColumn.text == columnSetting.gridName) { 
       if (columnSetting.isActive && gridColumn.hidden) 
        gridColumn.show(); 
       else if (!gridColumn.hidden && !columnSetting.isActive) 
        gridColumn.hide(); 
       break; 
      } 
     } 
    } 
} 

이 settingColumn 스키마 아래 참조 그리드를 업데이트하는 기능을 가지고보다. settingsColumn은 에 settingColumn 항목이 들어있는 배열입니다. 각 항목은 그리드의 열 정보를 설명합니다.

[DataContract] 
[System.SerializableAttribute()] 
public partial class SettingsSettingColumn 
{ 


    [System.Xml.Serialization.XmlAttributeAttribute()] 
    [DataMember] 
    public string name { get; set; } 

    [System.Xml.Serialization.XmlAttributeAttribute()] 
    [DataMember] 
    public string gridName { get; set; } 

    [System.Xml.Serialization.XmlAttributeAttribute()] 
    [DataMember] 
    public string type { get; set; } 

    [System.Xml.Serialization.XmlAttributeAttribute()] 
    [DataMember] 
    public bool isActive { get; set; } 

    [System.Xml.Serialization.XmlAttributeAttribute()] 
    [DataMember] 
    public float width { get; set; } 


} 
5

저장하지 않고 기능

GetProductsGetStore: function(fiels) {  
    var ret = Ext.create('Ext.data.Store', { 
     autoLoad: false, 
     proxy: { 
      type: 'ajax', 
      url: '/index.php/ajax/ProductsGet', 
      reader: { 
       type: 'json' 
      }, 
      extraParams: { 
       currency: '0' 
      } 
     }, 
     fields: fiels 
    }); 

    return ret; 
} 

및 gridpanel에게

this.Product = Ext.create('Ext.grid.Panel', { 
    width: '100%', 
    height: 154, 
    border: 0, 
    multiSelect: true, 
    allowDeselect: true, 
    columns: [ 
     { 
      text: 'article', 
      dataIndex: 'article', 
      flex: 2 
     }, 
     { 
      text: 'name', 
      dataIndex: 'name', 
      flex: 2 
     }, 
     { 
      text: 'price', 
      dataIndex: 'price', 
      flex: 1 
     } 
    ] 
}); 

동적 편집 그리드 그냥 모든 열 '버킷'을 구성하는 이유

var fields = [ 
    'id', 
    'name', 
    'checked', 
    'price', 
    'currency', 
    'src' 
]; 
this.Product.reconfigure(th.GetProductsGetStore(fields)); 
this.Product.store.load();