PDA

View Full Version : EditorGridPanel binding question...



Prnda1976
16 Sep 2009, 1:01 AM
I'm still trying out extJS so forgive me if this has already been asked some place else. I have the following scenario:

Using Northwind DB I am trying to make an edtable grid for products table. This table has 2 foreign keys for Product Categories on CategoryID and Product Suppliers on SupplierID. I want the user to be able to edit these also via ComboBox and I've managed to do this by creating separate Stores that populate combo boxes. My question is how can I make the grid column that hold the categoryID values diplay actual category rather than the category id? I still need the value of ID for the databse insertion but for the user I want to display category not it's id... the combo box works fine but as soon as I make my selection the grid cel value changes to the category id integer. What's the trick here? Also if you have any tips on how this can be done more efficiently please shoot I'm all ears. Here is my code:




var ProductsStore;
var PagingBar;
var ProductsColumnModel;
var ProductsEditorGrid;
var ProductsWindow;
Ext.onReady(function() {
Ext.QuickTips.init();
// Shorthand alias
var fm = Ext.form;
//------------------------------------------
// STORE(S) DEFINITION
//------------------------------------------
// Products store
ProductsStore = new Ext.data.Store({
id: 'ProductsStore',
proxy: new Ext.data.HttpProxy({
url: '/Home/LoadProducts',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalRecords',
root: 'products',
id: 'ProductID'},
[
{ name: 'ProductID' },
{ name: 'ProductName' },
{ name: 'SupplierID' },
{ name: 'CategoryID' },
{ name: 'QuantityPerUnit' },
{ name: 'UnitPrice' },
{ name: 'UnitsInStock' },
{ name: 'UnitsOnOrder' },
{ name: 'ReorderLevel' },
{ name: 'Discontinued' }
]
),
sortInfo: { field: 'ProductID', direction: "ASC" }
});
//------------------------------------------
// Product categories store
CategoriesStore = new Ext.data.Store({
id: 'CategoriesStore',
proxy: new Ext.data.HttpProxy({
url: '/Home/LoadProductCategories',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalRecords',
root: 'categories',
id: 'CategoryID'
},
[
{ name: 'CategoryID' },
{ name: 'CategoryName' },
{ name: 'Description' }
]
),
sortInfo: { field: 'CategoryID', direction: "ASC" }
});
//------------------------------------------
// Store for yes/no answers
YesNoStore = new Ext.data.SimpleStore({
fields: ['value', 'display'],
data: [[false, 'No'], [true, 'Yes']]
});

//------------------------------------------
// PAGING BAR DEFINITION - Used only if passed to the grid
// -----------------------------------------
PagingBar = new Ext.PagingToolbar({
store: ProductsStore,
pageSize: 20,
displayInfo: true,
// remoteSort: true,
displayMsg: 'Displaying Products {0} - {1} of {2}',
emptyMsg: "No Products Found"
});

//------------------------------------------
// COLUMN MODEL DEFINITION
//------------------------------------------
ProductsColumnModel = new Ext.grid.ColumnModel(
[
{
header: "ID",
width: 20,
dataIndex: 'ProductID',
sortable: true
},{
header: 'Category',
width: 70,
dataIndex: 'CategoryID',
sortable: true,
menuDisabled: true,
editor: new fm.ComboBox({
store: CategoriesStore,
valueField: 'CategoryID',
displayField: 'CategoryName',
editable: false
})
},{
header: "Name",
width: 100,
dataIndex: 'ProductName',
sortable: true,
menuDisabled: true,
editor: new fm.TextField({ allowBlank: false })
},{
header: "Price",
width: 20,
renderer: Ext.util.Format.usMoney,
align: "right",
dataIndex: 'UnitPrice',
sortable: true,
menuDisabled: true,
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 1000000
})
},{
header: "Stock",
width: 20,
renderer: stockRenderer,
dataIndex: 'UnitsInStock',
align: "center",
sortable: true,
menuDisabled: true,
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 32767
})
},{
header: "On Order",
width: 30,
dataIndex: 'UnitsOnOrder',
align: "center",
sortable: true,
menuDisabled: true,
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 32767
})
},{
header: "Reorder Level",
width: 30,
dataIndex: 'ReorderLevel',
align: "center",
sortable: true,
menuDisabled: true,
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 32767
})
},{
header: "Discontinued",
xtype: 'booleancolumn',
trueText: "✓",
falseText: "",
width: 30,
dataIndex: 'Discontinued',
align: "center",
sortable: true,
menuDisabled: true,
editor: new fm.Checkbox({
typeAhead: true,
triggerAction: 'all',
store: YesNoStore,
valueField: 'value',
displayField: 'display',
lazyRender: true
})
}]);
ProductsColumnModel.defaultSortable = true;

//------------------------------------------
// EDITOR GRID DEFINITION
//------------------------------------------
ProductsEditorGrid = new Ext.grid.EditorGridPanel({
store: ProductsStore,
// autoWidth: true,
// autoHeight: true,
width: 800,
height: 400,
collapsible: true,
animCollapse: true,
id: 'ProductsEditorGrid',
cm: ProductsColumnModel,
stripeRows: true,
title: 'Products',
frame: true,
viewConfig: { forceFit: true },
columnLines: true,
enableColLock: false,
clicksToEdit: 1,
selModel: new Ext.grid.RowSelectionModel({ singleSelect: false }),
buttons: [{
text: 'Save',
tooltip: 'Save all changes to database',
handler: function() {
GridSubmit();
}
}],
buttonAlign: 'left',
tbar: [{
text: 'Add Product',
tooltip: 'Add a new product to the list',
// iconCls:'add',
handler: function() {
// Access the record constructor through the grid's store
var Product = ProductsEditorGrid.getStore().recordType;
var p = new Product({
ProductName: 'New Product',
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: '',
UnitPrice: 0,
UnitsInStock: 0,
UnitsOnOrder: 0,
ReorderLevel: 0,
Discontinued: false
});
ProductsEditorGrid.stopEditing();
ProductsStore.insert(0, p);
ProductsEditorGrid.startEditing(0, 0);
}
}, '-', {
text: 'Delete Product(s)',
tooltip: 'Delete the selected product(s) from the list',
handler: function(){alert('DELETE method is not yet implemented!');}
// iconCls: 'option'
}]
// bbar: PagingBar
});

//------------------------------------------
// EDITOR GRID WINDOW DEFINITION - Not used
//------------------------------------------
ProductsWindow = new Ext.Window({
id: 'ProductsWindow',
title: 'Products',
closable: true,
width: 700,
height: 350,
plain: true,
layout: 'fit',
items: ProductsEditorGrid
});
// ProductsStore.load({ params: { start: 0, limit: 20} });
ProductsStore.load();
CategoriesStore.load();
ProductsEditorGrid.render('editor-grid');
// ProductsWindow.show();
});
// Column Renderers
function stockRenderer(v, p, r) {
return v <= r.data["ReorderLevel"] && r.data["Discontinued"] ? String.format("<span style='color:red'>{0}</span>", v) : v;
}
// Submits the grid for database insertion
function GridSubmit() {
jsonData = "[";
for (i = 0; i < ProductsStore.getCount(); i++) {
record = ProductsStore.getAt(i);
jsonData += Ext.util.JSON.encode(record.data) + ",";
}
jsonData = jsonData.substring(0, jsonData.length - 1) + "]";
alert(jsonData);
Ext.Ajax.request({
url: '/Home/SaveProducts',
method: 'POST',
params: { productsJson: jsonData },
callback: function(options, success, response) {
if (success) {
Ext.MessageBox.alert('Success!', 'Your chanes has been successfully saved!');
}
else {
Ext.MessageBox.alert('Failed!', 'There was an error during the saving process!');
}
}
});
}