Following are the steps of adding and deleting column in Grid Panel. The code written below is inspired by the code provided here.
I have modified the above code according to my requirement.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="../css/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../css/ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../css/ext/resources/css/ext-all.css" />
</head>
<body>
<div id="abc"> </div>
</body>
<script language="JavaScript">
Ext.override(Ext.data.Store,{
addField: function(field){
field = new Ext.data.Field(field);
this.recordType.prototype.fields.replace(field);
if(typeof field.defaultValue != 'undefined'){
this.each(function(r){
if(typeof r.data[field.name] == 'undefined'){
r.data[field.name] = field.defaultValue;
}
});
}
},
removeField: function(name){
this.recordType.prototype.fields.removeKey(name);
this.each(function(r){
delete r.data[name];
if(r.modified){
delete r.modified[name];
}
});
}
});
Ext.override(Ext.grid.ColumnModel,{
addColumn: function(column, colIndex){
if(typeof column == 'string'){
column = {header: column, dataIndex: column};
}
var config = this.config;
this.config = [];
if(typeof colIndex == 'number'){
config.splice(colIndex, 0, column);
}else{
colIndex = config.push(column);
}
this.setConfig(config);
return colIndex;
},
removeColumn: function(colIndex){
var config = this.config;
this.config = [config[colIndex]];
config.splice(colIndex, 1);
this.setConfig(config);
}
});
Ext.override(Ext.grid.GridPanel,{
addColumn: function(field, column, colIndex){
if(!column){
if(field.dataIndex){
column = field;
field = field.dataIndex;
} else{
column = field.name || field;
}
}
this.store.addField(field);
return this.colModel.addColumn(column, colIndex);
},
removeColumn: function(name, colIndex){
this.store.removeField(name);
if(typeof colIndex != 'number'){
colIndex = this.colModel.findColumnIndex(name);
}
if(colIndex >= 0){
this.colModel.removeColumn(colIndex);
}
}
});
var grid = new Ext.grid.EditorGridPanel({
renderTo:'abc',
title: 'ADD Delete Columns',
collapsible: true,
width:500,
height:300,
store: new Ext.data.SimpleStore({
fields: ['A', 'B'],
data: [['ABC', 'DEF'], ['GHI', 'JKL']]
}),
columns: [
{header: 'A', dataIndex: 'A'},
{header: 'B', dataIndex: 'B'}
],
tbar:[
{
xtype:'button',
text: 'Add Column',
handler: onAdd
},{
xtype:'button',
text: 'Delete Column',
handler:onDelete
}
]
});
function showResultText(btn, text){
// Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
grid.addColumn(text);
};
function deleteColumn(btn, text){
// Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
grid.removeColumn(text);
};
function onAdd(btn, ev) {
Ext.MessageBox.prompt('Column Name', 'Please enter column name:', showResultText);
}
/**
* onDelete
*/
function onDelete() {
Ext.MessageBox.prompt('Column Name', 'Please enter column name:', deleteColumn);
}
//grid.addColumn('C');
//grid.addColumn({name: 'D', defaultValue: 'D'}, {header: 'D', dataIndex: 'D'});
// grid.removeColumn('B');
</script>
</html>
Hi Nicolas,
ReplyDeleteThanks for sharing..
I m very new to extJs and I m starting with extJS 4.0... I've tested your snippet but it seems it doesn't work with the 4.0.
Do you have any clue?
Regards,
Stan
what is the issue you facing?
ReplyDeletethanks.....
ReplyDeleteHi Nicolas,
ReplyDeleteI am also working on EXTJS 4 and i think they have removed the class Ext.grid.ColumnModel from the library and they suggest adding a column config object. Do you have any idea about how to override column config objects ?/ or is there a other way round about this problem ??