PDA

View Full Version : Generating Y grids in X forms



Angilo
2 Aug 2010, 12:47 AM
Hello all,

I found myself having the following problem.

On the Sales page there is a grid (in a tab) displaying every order, the order can be clicked and a new tab will open.

The new tab will be a sales case, which contains a sales form. The sales form consists of a few input elements and a tab, the tab contains a few elements, such as grids (e.g. orders products). The problem is...
The sales form is mingling the orders products grids. When you open 1 order, everything is being displayed just fine, when you open a second order, the elements are being disarranged. This means, the orders products grid that belongs to order #2 is also being displayed in order #1. When you open a third order, the orders products grid in order #2 disappears... I would say this is a name mismatch, therefor I constructed an array named OrdersItems. The structure is: OrdersItems ( Orders ID ) -> elements. Every element will be assigned to the right order id.

But still, the problem exists. Here is my code:



function OpenSales ( oID )
{


OrdersItems[oID] = new Array(0, // store
1, // grid
2, // form
3); // columns

OrdersItems[oID][0] = new Ext.data.Store({
id: 'SalesProductsDataStore_' + oID,
proxy: new Ext.data.HttpProxy({
url: '<?php echo base_url();?>index.php/sales/ListProducts/' + oID + '/',
method: 'POST'
}),

reader: new Ext.data.JsonReader({
// we tell the datastore where to get his data from
root: 'results',
totalProperty: 'total',
id: 'orders_products_id'
},[
{name: 'orders_products_id', type: 'int', mapping: 'orders_products_id'},
{name: 'products_quantity', type: 'int', mapping: 'products_quantity'},
{name: 'products_name', type: 'string', mapping: 'products_name'},
{name: 'products_model', type: 'string', mapping: 'products_model'},
{name: 'final_price', type: 'float', mapping: 'final_price'}
]),
sortInfo:{field: 'orders_products_id', direction: "ASC"}
});

OrdersItems[oID][0].load({params:{start:0, limit:30}});
//SalesProductsDataStore.Load();

OrdersItems[oID][3] = new Ext.grid.ColumnModel(
[{
header: '#',
readOnly: true,
dataIndex: 'orders_products_id', // this is where the mapped name is important!
width: 50,
hidden: true
},{
header: "Quantity",
dataIndex: 'products_quantity',
width: 50,
editor: new Ext.form.NumberField({
allowBlank: false,
decimalSeparator : ',',
allowDecimals: false,
allowNegative: false,
blankText: '0',
maxLength: 11
})
},
{
header: 'Product',
dataIndex: 'products_name',
width: 200,
editor: new Ext.form.TextField({ // rules about editing
allowBlank: false,
maxLength: 64,
maskRe: /([a-zA-Z0-9\s]+)$/ // alphanumeric + spaces allowed
})
},
{
header: 'Model',
dataIndex: 'products_model',
width: 150,
editor: new Ext.form.TextField({ // rules about editing
allowBlank: false,
maxLength: 64,
maskRe: /([a-zA-Z0-9\s]+)$/ // alphanumeric + spaces allowed
})
},{
header: "Price (p/u)",
dataIndex: 'final_price',
width: 50,
editor: new Ext.form.NumberField({
allowBlank: false,
decimalSeparator : ',',
renderer: function(v){ return ' ' + v; },
allowDecimals: true,
allowNegative: false,
blankText: '0',
maxLength: 11
})
},
]);

OrdersItems[oID][1] = new Ext.grid.EditorGridPanel({
id: 'SalesProductsListingEditorGrid',
store: OrdersItems[oID][0], // the datastore is defined here
cm: OrdersItems[oID][3], // the columnmodel is defined here
enableColLock:false,
clicksToEdit:1,
autoHeight: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false})
});

var countriesDataStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: '<?php echo base_url();?>index.php/countries/listing/',
method: 'POST'
}),
root: 'results',
fields: ['countries_id', 'countries_name'],
autoLoad: true
})


OrdersItems[oID][2] = new Ext.FormPanel({
//labelAlign: 'top',
title: 'Sales #' + oID ,
id: 'SalesCaseForm_' + oID,
bodyStyle:'padding:5px',
width: 600,
frame: true,
items: [{
layout:'column',
border:false,
defaults: {width: 280, autoHeight: true},
items:[{
// columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Customer ID',
name: 'customers_id',
disabled: true
}, {
xtype:'textfield',
fieldLabel: 'Order ID',
name: 'orders_id',
disabled: true
}]
},{
//columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:235,
/*
By turning off deferred rendering we are guaranteeing that the
form fields within tabs that are not activated will still be rendered.
This is often important when creating multi-tabbed forms.
*/
deferredRender: false,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Products',
layout:'form',
bodyStyle: 'padding: 0px',
defaultType: 'textfield',

items: [OrdersItems[oID][1]]
},{
title:'Delivery details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'Name',
name: 'delivery_name'
},{
fieldLabel: 'Address',
name: 'delivery_street_address'
},{
fieldLabel: 'City',
name: 'delivery_city'
},{
fieldLabel: 'Postcode',
name: 'delivery_postcode'
},
new Ext.form.ComboBox({
fieldLabel: 'Country',
hiddenName:'delivery_country',
store: countriesDataStore,
valueField:'countries_name',
displayField:'countries_name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a country...',
selectOnFocus:true,
width:190
})]
},{
title:'Invoice details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',

items: [{
fieldLabel: 'Name',
name: 'billing_name'
},{
fieldLabel: 'Address',
name: 'billing_street_address'
},{
fieldLabel: 'City',
name: 'billing_city'
},{
fieldLabel: 'Postcode',
name: 'billing_postcode'
},
new Ext.form.ComboBox({
fieldLabel: 'Country',
hiddenName:'billing_country',
store: countriesDataStore,
valueField:'countries_name',
displayField:'countries_name',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a country...',
selectOnFocus:true,
width:190
})]
},{
cls:'x-plain',
title:'Comments',
layout:'fit',
bodyStyle: 'padding: 0px',
items: {
xtype:'htmleditor',
id:'bio2',
fieldLabel:'Comments'
}
}]
}],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
OrdersItems[oID][2].getForm().load({
url: '<?php echo base_url();?>index.php/sales/Open/' + oID + '/',
failure: function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
});
return OrdersItems[oID][2];

}


Is there anyone that could help?

Thanks in advance!

Condor
2 Aug 2010, 1:19 AM
'id's need to be unique!

Most of your ids are postfixed with the orderid, but you missed a few.

Also, a ComboBox with a hiddenName needs to be configured with a unique hiddenId (otherwise it will use the hiddenName as hiddenId).