here is the store for the perticular element:
Code:
var reservation_by_group_leader_store = new Ext.data.Store({
id: 'reservation_by_group_leader_store',
proxy: new Ext.data.HttpProxy({
url: '/index.php/sales_reps/reservation_list_by_group_leader_data',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'res_list',
totalProperty: 'data_size',
id: 'reservation_id'
},
[
{name: 'group_leader_name', type: 'string'},
{name: 'reservation_id', type: 'string'}
]),
sortInfo: {field: 'group_leader_name', direction: 'ASC'},
listeners:
{
clear: function()
{
reservation_customer_store.removeAll();
}
}
});
the data the store returns for example is:
Code:
{
"data_size":3,
"res_list":
[
{"reservation_id":"1111","group_leader_name":"User A"},
{"reservation_id":"2222","group_leader_name":"User B"},
{"reservation_id":"3333","group_leader_name":"User C"}
]
}
here is the code for the custom combobox
Code:
Ext.ux.LeaderResSelectBox = Ext.extend(Ext.form.ComboBox, {
mode: 'local',
width: 115,
triggerAction: 'all',
displayField: 'group_leader_name',
valueField: 'reservation_id',
listClass: 'x-combo-list-small',
emptyText: 'Select a reservation',
targetStore: null,
listeners: {
'select': function(targetSelect) {
application_data.target_reservation_id = targetSelect.getValue();
if(this.targetStore != null) {
this.targetStore.reload({ params: {reservation_id: application_data.target_reservation_id } });
}
}
}
});
Ext.reg('leader_res_select_box', Ext.ux.LeaderResSelectBox);
here is the grid code, the element of the grid is the tbar item with an id of reservation_by_group_leader_select_box:
Code:
return new Ext.grid.GridPanel(
{
id: 'customer_reservation_grid',
store: reservation_customer_store,
columns: [
{header: 'Name', sortable: true, dataIndex: 'customer_name', tooltip: "Customer Name"},
{header: 'Sales Rep ID', sortable: true, dataIndex: 'sales_rep_id', tooltip: "Sales Rep ID"},
{header: 'Reservation ID', sortable: true, dataIndex: 'reservation_id', tooltip: "Reservation ID"},
{header: 'Customer Number', sortable: true, dataIndex: 'customer_id', tooltip: 'Customer Number'},
{header: 'Phone Number', sortable: true, dataIndex: 'phone', tooltip: 'Customer Phone Number'},
{header: 'Trip Total', sortable: true, dataIndex: 'trip_total', tooltip: "Total Trip Cost"},
{header: 'Payments', sortable: true, dataIndex: 'payments', tooltip: "Payments Made By Customer"},
{header: 'Balance', sortable: true, dataIndex: 'balance', tooltip: "Unpaid Balance"},
{header: 'Room', sortable: true, dataIndex: 'room', tooltip: "Internal Room Number"},
{header: 'Status', sortable: true, dataIndex: 'status', tooltip: "Customer Status"}
],
view: new Ext.grid.GroupingView({
forceFit: true,
showGroupName: false
}),
selModel: new Ext.grid.RowSelectionModel({ singleSelect: true }),
frame: true,
autoSizeColumns: true,
height: 600,
width: 777,
autoScroll: true,
renderTo: Ext.get('center_column'),
listeners: {
'rowdblclick': {
scope: this,
fn: function() {
var selection = Ext.getCmp('customer_reservation_grid').getSelectionModel().getSelected();
if(selection && selection.get('customer_id') != '')
{
application_data.target_customer_id = selection.get('customer_id');
update_customer_data();
}
else
{
no_selection_made();
}
}
}
},
tbar:
[
'View list for ',
{xtype: 'rep_select_box', targetStore: reservation_store, store: sales_rep_store, id: 'sales_rep_reservation_list'},
'Group Leader',
{xtype: 'leader_res_select_box', targetStore: reservation_customer_store, id: 'reservation_by_group_leader_select_box', store: reservation_by_group_leader_store},
'-',
{
text: 'Customer Details',
tooltip: 'View Details for Selected Customer',
handler: function ()
{
var selection = Ext.getCmp('customer_reservation_grid').getSelectionModel().getSelected();
if(selection && selection.get('customer_id') != '')
{
application_data.target_customer_id = selection.get('customer_id');
update_customer_data();
}
else
{
no_selection_made();
}
}
},
{
text:'Tools',
iconCls: 'bmenu', // <-- icon
menu: menu // assign menu by instance
}
]
});
if(application_data.target_reservation_id != null)
{
setTimeout("Ext.getCmp('reservation_by_group_leader_select_box').setValue(application_data.target_reservation_id);", 50);
}
now lets says that application_data.target_reservation_id is equal to 2222 which points to User B but instead of displaying User B it displays 2222. Another thing to note is that when i click on the select box even tho the the data that is in the box is 2222 the select box does highlight the correct name so it seem to be selecting the right name just not sure the correct display.