PDA

View Full Version : locked grid and column move



TopoFurnier
3 Oct 2012, 11:11 AM
Hi all,
Im working with a partially locked grid and I want to prevent the user to lock/unlock the column. Ive disabled the dropdown menu on the column header but Im still able to move the columns from the normal grid to the locked one. I've tried to set the enableColumnMove false on the grid but it seems that has no efect when column are locked.
Is there any way to have a locked grid without letting the user alter its column structure?

Thanks,
Topo

scottmartin
3 Oct 2012, 7:01 PM
I am unable to move any of the columns using:



Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : 'lisa@simpsons.com', 'change' : 100 },
{ 'name' : 'Bart', 'email' : 'bart@simpsons.com', 'change' : -20 },
{ 'name' : 'Homer', 'email' : 'home@simpsons.com', 'change' : 23 },
{ 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
enableColumnMove: false,
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : [
{ header : 'Name', dataIndex : 'name', locked: true },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Change', dataIndex : 'change' }
],
height : 200,
width : 400,
renderTo : Ext.getBody()
});?


Scott.

TopoFurnier
4 Oct 2012, 5:42 AM
well, since Im trying to implement an app with a mvc aproach I adapted your code a little bit

Ext.define('MVCapp.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.simpsonlist',
title:'Simpsons',
enableColumnMove: false,
store : Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : 'lisa@simpsons.com', 'change' : 100 },
{ 'name' : 'Bart', 'email' : 'bart@simpsons.com', 'change' : -20 },
{ 'name' : 'Homer', 'email' : 'home@simpsons.com', 'change' : 23 },
{ 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
}),
height : 200,
width : 400,
columns : [
{ header : 'Name', dataIndex : 'name', locked: true },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Change', dataIndex : 'change' }
]
});



to use it on an app like this

Ext.application({
name : 'MVCapp',
appFolder : 'app',
requires : ['Ext.container.Viewport',
'MVCapp.view.user.List'
],
launch : function() {
Ext.create('Ext.container.Viewport', {
layout : 'border',
items : [{
xtype : 'simpsonlist',
region : 'center',
bodyStyle : 'padding:1px'
}]
});
}
});


and I am still able to move the columns!!
Dont know if it helps, but Im using Extjs 4.1.1 on chrome for win7 64bit.
Is there something wrong with my mvc approach?

scottmartin
7 Oct 2012, 9:06 AM
If you were using MVC, you would use something like the following:



Ext.define('MVCapp.model.User', {
extend : 'Ext.data.Model',
fields : ['name', 'email', 'change'],
proxy : {
type : 'ajax',
api : { .. }, // your settings here
reader : { .. },
writer : { .. }
}
}
});

Ext.define('MVCapp.store.Users', {
extend : 'Ext.data.Store',
model : 'MVCapp.model.User',

autoLoad : true,
autoSync : true
});

Ext.define('MVCapp.view.user.List' ,{
extend : 'Ext.grid.Panel',
alias : 'widget.simpsonlist',
title : 'Simpsons',

enableColumnMove : false,

initComponent : function () {
var me = this;

Ext.apply(me, {
columns : me.buildColumns()
});


me.callParent(arguments);
},

buildColumns : function () {
return [
{ header : 'Name', dataIndex : 'name', locked: true },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Change', dataIndex : 'change' }
];
}

});


Scott.