PDA

View Full Version : Are DataGrid add-ons like JSON, edit, pagingand grouping orthogonal



JonathansCorner.com
20 Apr 2011, 7:57 AM
I have a working EditGrid, populated from JSON, and I am trying to add grouping. My code is below; the grouping doesn't seem to be showing up, and for a seven-page resultset, only the first page is showing up.


var writer = new Ext.data.JsonWriter({
encode: true,
writeAllFields: false
});
var reader = new Ext.data.JsonReader({
fields: ['id', 'approved_date',
'approval_status', {name:'approval_id', type:'int'},
'reference_id', 'manufacturer_distributor_name',
'shipping_authorization_number',
'purchase_order_number', 'original_amount',
'open_amount', 'requestor'],
root: 'dataRoot'
});
var store = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
api:
{
create: '/create',
'delete': '/delete',
read: '/read',
update: '/update'
}}),
autoSave: true,
groupField: 'manufacturer_distributor_name',
reader: reader,
remoteSort: true,
root: 'dataRoot',
sortInfo: {field: 'manufacturer_distributor_name',
direction: 'ASC'},
totalProperty: 'totalCount',
writer: writer
});

var cm = new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [{
id: 'approved_date',
header: 'Approved Date',
dataIndex: 'approved_date',
flex: 1,
editor: new fm.TextField({
allowBlank: true
})
},
{
id: 'approval_status',
header: 'Approval Status',
dataIndex: 'approval_status',
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: [
['Approved', 'Approved'],
['Held', 'Held'],
['Rejected', 'Rejected']
],
lazyRender: true,
listClass: 'x-combo-list-small'
})
},
{
id: 'approval_id',
header: 'Approval ID',
dataIndex: 'approval_id',
flex: 1,
editor: new fm.TextField({
allowBlank: false
})
},
{
id: 'reference_id',
header: 'Reference ID',
dataIndex: 'reference_id',
flex: 1,
editor: new fm.TextField({
allowBlank: true
})
},
{
id: 'shipping_authorization_number',
header: 'Shipping Authorization Number',
dataIndex: 'shipping_authorization_number',
flex: 1,
editor: new fm.TextField({
allowBlank: true
})
},
{
id: 'manufacturer_distributor_name',
header: 'Manufacturer / Distributor Name',
dataIndex: 'manufacturer_distributor_name',
flex: 1,
editor: new fm.TextField({
allowBlank: true
})
},
{
id: 'purchase_order_number',
header: 'Purchase Order Number',
dataIndex: 'purchase_order_number',
flex: 1,
editor: new fm.TextField({
allowBlank: true
})
},
{
id: 'original_amount',
header: 'Original Amount',
dataIndex: 'original_amount',
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false
})
},
{
id: 'open_amount',
header: 'Open Amount',
dataIndex: 'open_amount',
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false
})
},
{
id: 'requestor',
header: 'Requestor',
dataIndex: 'requestor',
editor: new fm.TextField({
allowBlank: true
})
}],
selModel:
{
selType: 'cellmodel'
},
renderTo: 'editor-grid',
width: 600,
height: 388,
title: 'Approvals',
frame: true,
});
store.load();
var grid = new Ext.grid.EditorGridPanel({
animCollapse: false,
autoExpandColumn: 'approval_id',
cm: cm,
collapsible: true,
frame: true,
height: 388,
iconCls: 'icon-grid',
renderTo: 'editor-grid',
stateful: true,
stateId: 'grid',
store: store,
title: 'Approvals',
width: 1010,
clicksToEdit: 1,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: 'Displaying items {0} - {1} of {2}',
emptyMsg: 'No pages to display',
items:[
'-'
]}),
plugins:[new Ext.ux.grid.Search({
iconCls:'icon-zoom',
readonlyIndexes:[],
disableIndexes:[],
minChars: 2,
autofocus: true})],
tbar: [{
text: 'Add Approval',
handler: function()
{
var approval = grid.getStore().recordType;
var a = new approval({approved_date: '',
approval_status: '',
approval_id: '',
reference_id: '',
manufacturer_distributor_name: '',
shipping_authorization_number: '',
purchase_order: '',
original_amount: 0.0,
open_amount: 0.0,
requestor: ''
})
grid.stopEditing();
store.insert(0, a);
grid.startEditing(0, 0);
}
}],
view: new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
})
});

So far as I can tell this imitates the functionality in http://dev.sencha.com/deploy/dev/examples/grid/grouping.js to make a grouping grid. Is there an error in my code? (I hope so.) Or are these modules not orthogonal in that you cannot plug in an arbitrary number of them and have things work?

Thanks,

felenka
27 Apr 2011, 6:53 AM
I've been playing recently with grid grouping example (http://dev.sencha.com/deploy/ext-3.3.0/examples/grid/grouping.html) by adding the ability to edit the cells inside the grouped grid. Also, I added the paging toolbar to the grid, but I believe that grouping and paging are mutually exclusive, therefore, the toolbar is active only when grouping is cleared (press "Clear grouping" to see what I mean).

Please, see the code below, and let me know if it helps in any way.
To make things working, just place the code below in separate file and include it instead of "grouping.js" file in default example.



/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
Ext.onReady(function(){

Ext.QuickTips.init();

var xg = Ext.grid;
var fm = Ext.form;


// 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'}
]);

cm = new xg.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true // columns are not sortable by default
},columns: [{
id:'company',
header: "Company",
width: 60,
sortable: true,
dataIndex: 'company',
editor: new fm.TextField({
allowBlank: false
})
},
{
header: "Price",
width: 20,
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: 'price',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
},
{
header: "Change",
width: 20,
sortable: true,
dataIndex: 'change',
renderer: Ext.util.Format.usMoney,
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
},
{
header: "Industry",
width: 20,
sortable: true,
dataIndex: 'industry',
editor: new fm.TextField({
allowBlank: false
})
},
{
header: "Last Updated",
width: 20,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange',
editor: new fm.DateField({
format: 'm/d/Y',
minValue: '01/01/2006'
})
}]
});

var store = new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry',
listeners:{
groupchange: function(st,f){
bbar.disable();
}
}
});

var bbar = new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: 'Displaying items {0} - {1} of {2}',
emptyMsg: 'No pages to display',
disabled: true,
items:['-']
});

var grid = new xg.EditorGridPanel({
store: store,
cm : cm,

view: new xg.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),

frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
clicksToEdit: 1,
title: 'Grouping Example',
iconCls: 'icon-grid',
fbar : ['->', {
text:'Clear Grouping',
iconCls: 'icon-clear-group',
handler : function(){
store.clearGrouping();
bbar.enable();
}
}],
bbar: bbar,
renderTo: document.body
});
});



// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'],
['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'],
['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'],
['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services']
];

// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');
}

JonathansCorner.com
27 Apr 2011, 11:49 AM
Thank you!