PDA

View Full Version : Selective action on Rows Of Grid based on data



pulkitagarwal
25 Dec 2010, 2:58 AM
Hi ,
I have this use case where based on a certain data contains true or false I have to make the row uneditable and editable respectively.

The row has multiple columns say price quantity which I am having enabled for inline editing .
Now if the data is {true , <price> , <quantity> } I want to disable the inline editing and if it's
{false , <price> , <quantity>} then the columns of the row should be enabled for inline editing.

What I should use in this case in Grid Panel . Some pointers on this will be highly appreciated.
Thanks
Pulkit

pulkitagarwal
25 Dec 2010, 3:01 AM
+ The thing I am seeing on net is a Row Editor Plugin . If this will help my use case please can you point me to a good example for the same ?

pulkitagarwal
26 Dec 2010, 10:25 PM
You need to include the checkColumn plugin file too
http://www.sencha.com/forum/showthread.php?47915-%28User%29-Update-to-CheckColumn-Plugin

Actually this code has other things too like including the check box as column and doing selective action so enjoy .


<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="lib/ext-3.3.1/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/ext-3.3.1/adapter/ext/ext-base.js">
</script>


<script type="text/javascript" src="lib/ext-3.3.1/ext-all.js">
</script>
<script type="text/javascript" src="CheckColumn.js">
</script>

</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){

var arrayData = [
['Jay Garcia','MD' , false ],
['Aaron Baker', 'VA' , true],
['Susan Smith', 'DC' , true],
['Mary Stein', 'DE' , false],
['Bryan Shanley', 'NJ' , false],
['Nyri Selgado', 'CA' , true]
];
Ext.grid.CheckColumn = function(config){
Ext.apply(this, config);
if(!this.id){
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};

Ext.grid.CheckColumn.prototype ={
init : function(grid){
this.grid = grid;
this.grid.on('render', function(){
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},

onMouseDown : function(e, t){
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},

renderer : function(v, p, record){
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
};
var nameRecord = Ext.data.Record.create([
{name : 'name', mapping : 0 },
{name : 'state', mapping : 1 },
{name : 'indoor', type:'bool', mapping :2 }
]);

var arrayReader = new Ext.data.ArrayReader({}, nameRecord);

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(arrayData),
reader: arrayReader,
remoteSort: true
});



var selModel = new Ext.grid.CheckboxSelectionModel({
singleSelect : false,
checkOnly : true
});

var fm = Ext.form;



var colModel = new Ext.grid.ColumnModel({
columns: [selModel, {
header: 'Full Name',
sortable: true,
dataIndex: 'name',
editor: new fm.TextField({
allowBlank: false
})
}, {
header: 'State',
dataIndex: 'state',
editor: new fm.TextField({
allowBlank: false
})
}, {
xtype: 'checkcolumn',
header: 'Indoor?',
dataIndex: 'indoor'

}],
isCellEditable: function(colIndex, rowIndex) {
if ((colIndex == this.findColumnIndex('state') )&& !grid.getStore().getAt(rowIndex).get('indoor')){
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable.apply(this, arguments);
}

});



var gridView = new Ext.grid.GridView();


var grid = new Ext.grid.EditorGridPanel({
title : 'Our first grid',
renderTo : Ext.getBody(),
autoHeight : true,
width : 325,
store : ds,
colModel : colModel,
selModel : selModel,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){

if(rowIndex==2){
alert("pullu");
return 'pullu';
}
return 'chullu';
}
},

bbar: new Ext.PagingToolbar({
pageSize: 2,
store: ds,
displayInfo: true,
items:[
'-', {
pressed: true,
enableToggle:true,
text: 'Show Preview',
cls: 'x-btn-text-icon details',
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
})

});
ds.load({params:{start:0, limit:2}});

});

</script>
<div id='div1'>
Pulkit's
</div>
<div id="p1" style="width:300px;">
Grid
</div>
<div>
Example
</div>
</body>
</html>