PDA

View Full Version : How to freeze a single column of a Grid Panel?



mail2hkrish
4 Jan 2010, 11:19 PM
Hi,

I am working on an application , which requires my Grid Panel to have the left most column alone freezed i.e. user can not drag and drop or move this column alone unlike other columns.

Below are few of the reference links i tried out:
http://www.extjs.com/learn/Ext_FAQ_Grid#Disabling_column_move_for_particular_column
http://www.extjs.com/forum/showthread.php?p=213681#post213681


The above links spoke about near by solution w.r.t 2.0 i am using Ext JS 3.0 .

Ext JS 3.0 doesn't have any property for columns called freeze or movable like in 2.0.

Appreciate your help in this regards,


Regards,
HKRISH

mail2hkrish
12 Jan 2010, 4:10 AM
Hi,

In the gridpanel, I have an expander in the first column. I would like to disable drag and drop only for this particular column. All the other columns, should be allowed to drag/drop.

Any help would be really appreciated.


/*!
* Ext JS Library 3.0+
*
*/

Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;

// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]);


// row expander
var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<p><b>Company:</b> {company}</p><br>',
'<p><b>Summary:</b> {desc}</p>'
)
});

var grid1 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel({
defaults: {
width: 20,
sortable: true
},
columns: [
expander,
{id:'company',header: "Company", width: 40, dataIndex: 'company'},
{header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", dataIndex: 'change'},
{header: "% Change", dataIndex: 'pctChange'},
{header: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
}),
viewConfig: {
forceFit:true
},
width: 600,
height: 300,
plugins: expander,
collapsible: true,
animCollapse: false,
title: 'Expander Rows, Collapse and Force Fit',
iconCls: 'icon-grid',
renderTo: document.body
});
});


// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services']
];

// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push('Text goes here');
}

mail2hkrish
12 Jan 2010, 10:35 PM
Hi,

Any Idea on this ?:-/

Regards,
hKRISH

p3p3
11 Feb 2010, 12:15 AM
hi,

i have found a short solution for this prob. You need to add an global variable first.

var bUndoMove = false;
Secound you add a event listener to the ColumnModel.


listeners: {
columnmoved : function( colModel, oldIndex, newIndex){
// column move form OR to pos 0
if ((oldIndex == 0) || (newIndex ==0)) {
// skip if moveColumn called
if (!bUndoMove) {
bUndoMove = true;
colModel.moveColumn(newIndex,oldIndex);
bUndoMove = false;
// console.log("undo moving^^");
} // if (!bUndoMove) {
} // if ((oldIndex == 0) || (newIndex ==0)) {
}
}

That all. Its work great wiht your example. :)
p3p3

kamalshahu
28 Jul 2013, 10:42 PM
Please provide me any solution from which i could go ahead in my project.

Thanks
kamal