I need a function that will add/remove column from ExtJS 4 grid. Grid is written in Extjs 4. After I google it I found out following code.
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();
}
}
This code that I am calling to this function
var store = grid.getStore();
reconfigure(store, fields);
It's replace the headers rows but will not refresh the data. I am using ExtJs 4.0
I solved this problem and I saved all displayed columns in array. Than I have a function that updates the grid
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;
}
}
}
}
See below settingColumn schema. settingsColumn is array that holds settingColumn items. Each item describes column information in the grid.
[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; }
}