HeathT
07-27-2007, 06:26 PM
Hi gang
Currently, I'm trying to put together a grid that has a couple comboBox's which interact with one another. The comboBox that is dependent on a selection is disabled by default until the other comboBox has a proper value. (see attached image for a visual)
There are three parts of interaction:
Enabling the Contact comboBox once a value is selected in the Company comboBox
A filter for the Contact comboBox based on the selection of the Company comboBox using companyID
This interaction is PER ROW. (This is where the problem is... I can't seem to find the rowIndex AND the comboBox value per that rowIndex).
Company datastore
// Setup the store for the COMPANY comboBox
dsCompany = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'qry_company.cfm?thisAction=browseCompany'}),
reader: new Ext.data.JsonReader(
{root: 'data', id: 'company_id'},
[
{name: 'company_id', type:'int'}
, {name: 'companyName'}
]
)
});
Contact datastore:
// Setup the store for the Contact comboBox
// contactName is firstName + ' ' + lastName
dsContact = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'qry_contact.cfm?thisAction=browseContact'}),
reader: new Ext.data.JsonReader(
{root: 'data', id: 'manager_id'},
[
{name: 'manager_id', type:'int'},
{name: 'contactName'}
]
)
});
ComboBox setup:
// COMPANY
cbCompany = new Ext.form.ComboBox(
{
typeAhead: false,
lazyRender: false,
triggerAction: 'all',
store: dsCompany,
displayField: 'companyName',
valueField: 'company_id',
emptyText: 'Please select ...',
listWidth: 200
}
);
// CONTACT
cbContact = new Ext.form.ComboBox(
{
typeAhead: false,
lazyRender: false,
triggerAction: 'all',
store: dsContact,
displayField: 'contactName',
emptyText: 'Please select ...',
fieldLabel: 'Contact Person',
valueField: 'manager_id',
mode: 'local',
disabled: true
}
);
// EVENT HANDLER - BASICALLY WHAT I'D LIKE TO DO
cbCompany.on('select', function(){
cbContact.store.load(); // load cbContact's store object to get any dsContact updates
selectedRow = grid.getSelectionModel().getSelected();
// CHECK AND SET VALUES HERE
// selectedRow.cbContact[rowIndex].enable();
cbContact.enable(); // This enables ALL cbContact comboBox's which isn't what I want
cbContact.reset();
});
I'm not sure if I'm having trouble finding things in the docs or if they are just a little light. In either case I've checked here: editorGrid (http://extjs.com/deploy/ext/docs/output/Ext.grid.EditorGrid.html#getSelectionModel) and here: grid (http://extjs.com/deploy/ext/docs/output/Ext.grid.Grid.html) in addition to search the forums for the last few days and can't find anything helpful.
Any help in terms of code, links to documentation, or a link to a thread would be a godsend! I just need to know how to reference the value of the comboBox(es). :)
TIA
Heath
Currently, I'm trying to put together a grid that has a couple comboBox's which interact with one another. The comboBox that is dependent on a selection is disabled by default until the other comboBox has a proper value. (see attached image for a visual)
There are three parts of interaction:
Enabling the Contact comboBox once a value is selected in the Company comboBox
A filter for the Contact comboBox based on the selection of the Company comboBox using companyID
This interaction is PER ROW. (This is where the problem is... I can't seem to find the rowIndex AND the comboBox value per that rowIndex).
Company datastore
// Setup the store for the COMPANY comboBox
dsCompany = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'qry_company.cfm?thisAction=browseCompany'}),
reader: new Ext.data.JsonReader(
{root: 'data', id: 'company_id'},
[
{name: 'company_id', type:'int'}
, {name: 'companyName'}
]
)
});
Contact datastore:
// Setup the store for the Contact comboBox
// contactName is firstName + ' ' + lastName
dsContact = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'qry_contact.cfm?thisAction=browseContact'}),
reader: new Ext.data.JsonReader(
{root: 'data', id: 'manager_id'},
[
{name: 'manager_id', type:'int'},
{name: 'contactName'}
]
)
});
ComboBox setup:
// COMPANY
cbCompany = new Ext.form.ComboBox(
{
typeAhead: false,
lazyRender: false,
triggerAction: 'all',
store: dsCompany,
displayField: 'companyName',
valueField: 'company_id',
emptyText: 'Please select ...',
listWidth: 200
}
);
// CONTACT
cbContact = new Ext.form.ComboBox(
{
typeAhead: false,
lazyRender: false,
triggerAction: 'all',
store: dsContact,
displayField: 'contactName',
emptyText: 'Please select ...',
fieldLabel: 'Contact Person',
valueField: 'manager_id',
mode: 'local',
disabled: true
}
);
// EVENT HANDLER - BASICALLY WHAT I'D LIKE TO DO
cbCompany.on('select', function(){
cbContact.store.load(); // load cbContact's store object to get any dsContact updates
selectedRow = grid.getSelectionModel().getSelected();
// CHECK AND SET VALUES HERE
// selectedRow.cbContact[rowIndex].enable();
cbContact.enable(); // This enables ALL cbContact comboBox's which isn't what I want
cbContact.reset();
});
I'm not sure if I'm having trouble finding things in the docs or if they are just a little light. In either case I've checked here: editorGrid (http://extjs.com/deploy/ext/docs/output/Ext.grid.EditorGrid.html#getSelectionModel) and here: grid (http://extjs.com/deploy/ext/docs/output/Ext.grid.Grid.html) in addition to search the forums for the last few days and can't find anything helpful.
Any help in terms of code, links to documentation, or a link to a thread would be a godsend! I just need to know how to reference the value of the comboBox(es). :)
TIA
Heath