How load auto select with combo box?

[RyanZec]

I am trying to auto select a combo by by the selectByValue but that is no working. how do i select a field thorugh javascript when i have the value(so if 'One' was the display and 1 was the true value, i have the 1 not the 'One')?

[jay@moduscreate.com]

have you tried 'setvalue'?

are you trying to simulate a select via the pick list?

[RyanZec]

that is what i am trying to simulate. for instance say this is the combo options:

display: One, value: 1
display: Two, value: 2
display: Three, value: 3

Now if i don combobox.setValue(1) the combobox actually show '1' and not 'One' like i want. if i do combobox.selectByValue(1) nothing happens.

[jay@moduscreate.com]

you'll need to post your code. let's see what's going on

[RyanZec]

here is the store for the perticular element:

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:

{
	"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

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:

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.

[gaetan]

Didn't try, so not 100% sure, but I would try hiddenName in the combo box,
else the displayfield will be returned by getvalue.

[RyanZec]

I tried setting hiddenName to 'group_leader_name' but that still did not work.

[moegal]

something like this??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>
	<script type="text/javascript" src="states.js"></script>

<title>Untitled Document</title>
</head>

<body>
<script>
Ext.onReady(function(){

var cmb = new Ext.form.ComboBox({
			fieldLabel:'department',
			name:'dep',
			valueField:'depid',
			displayField:'depdesc',
			applyTo: 'local-states',
			emptyText:'Select a state...',
			triggerAction:'all',
			typeAhead:true,
			mode: 'remote',
			store: new Ext.data.JsonStore({
				autoLoad: true,
				root:'records',
				fields:[{name:'depdesc', mapping: 'name'}, {name:'depid', mapping: 'depid'}],
				url: 'test-json.asp'
			})
})
cmb.store.on("load",function(){cmb.setValue("3");})
});
</script>
<div>
    <input type="text" id="local-states" size="20"/>
</div>
<div id="test"></div>
</body>
</html>

[iLoLo21]

Yes but if I have this code for populate my form :

formPanel.form.load({
                url : this.data_url + '?id=' + selectedId,
                waitMsg : 'Loading'
            });

I can't use setvalue property of my combobox. So how can I load my dynamic value in my combobox after create this combo !?

Thanks

[saqwer]

The most complicated thing is what for the Ext.form.TextField I can use as "width: 'auto'" , so "width: 100" (specs' width : Number format). But for the Ext.form.ComboBox I cann't use first variant and always had got width:180 (seems to default value for combobox).
p.s.: it's just for notice to some others developers who tries to tame ExtJS UI and ExtJS' developers.