PDA

View Full Version : [Solved] FormPanel with ComboBox not selecting form field value


mohaaron
11 Jun 2009, 2:31 PM
Hello All,


Load the store data first.
valueField - Field 0 from combobox data store.
TextField - Field 1 from combobox data store.
hiddenName - Must be the field/column name of the forms data store/database table.


[NOTE]
I'm am still having a problem with a combo on a tabpanel tab that won't select with the above rules.
[NOTE]

I been reading through all the examples and posts about the subject of adding a ComboBox to a FormPanel and having the form field value bind to the ComboBox item value. I currently have the combo showing up in the form and have been able to populate the combo using a JSonStore with either remote or local mode on the combo. This all works fine. I just can't seem to get the form field value pre-selected in the combo on load.

I'm starting to have a lot of code and I'm going to post all of it so you can see how everthing is organized. I feel like I'm doing something simple wrong just because I don't understand how this is supposed to work.

Does my problem have something to do with how I am loading the form in the grid JSonStore load function? I have the idea the the order in which the data is loaded has a lot to do with how well this works.

The stuff that's commented is what I've tried and didn't work.

Here is the code.


<!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>
<title></title>
<link rel="stylesheet" type="text/css" href="../Scripts/ext-3.0-rc1.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../Scripts/ext-3.0-rc1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../Scripts/ext-3.0-rc1.1/ext-all-debug.js"></script>
<script src="../Scripts/dateFormat.js" type="text/javascript"></script>
<style type="text/css">
.x-menu.x-menu-horizontal .x-menu-list {
overflow: hidden;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item {
float: left;
}
.x-menu.x-menu-horizontal .x-menu-list .x-menu-list-item .x-menu-item-arrow {
background: url(../Images/horizontal-menu-parent.gif) no-repeat right 9px;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

// Ext.override(Ext.form.ComboBox, {
// setValue: Ext.form.ComboBox.prototype.setValue.createSequence(function(v) {
// var idx = this.store.find(this.valueField, v);

// if (v && this.mode == 'remote' && idx == -1) {
// var p = {};
// p[this.valueField] = v;

// this.store.load({
// scope: this,
// params: p,
// callback: function() {
// this.setValue(v);
// this.collapse();
// }
// });
// }
// })
// });

Ext.override(Ext.menu.Menu, {
onLayout: function() {
if (this.isVisible()) {
if (this.enableScrolling) {
this.constrainScroll(this.el.getTop());
}
if (Ext.isIE) {
this.layout.doAutoSize();
}
if (this.floating) {
this.el.sync();
}
}
}
});

Ext.override(Ext.menu.Menu, {
onClick: function(e) {
var t;
if (t = this.findTargetItem(e)) {
if (t.menu) {
t.expandMenu();
} else {
t.onClick(e);
this.fireEvent("click", this, t, e);
}
}
}
});

var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
},
new Ext.menu.Item({
text: 'Another item',
handler: clickHandler
}),
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
})
]
});

var menu2 = new Ext.menu.Menu({
items: [{
text: 'Menu 1, option 1'
}]
});

var mainMenu = new Ext.menu.Menu({
region: 'north',
height: 30,
floating: false,
hidden: false,
enableScrolling: false,
cls: 'x-menu-horizontal',
subMenuAlign: 'tl-bl?',
items: [{
text: 'Our first Menu',
menu: menu // assign our menu to this button
}, {
text: 'Our second Menu',
menu: menu2 // assign our menu to this button
}]
});

function clickHandler() {
alert('Clicked on a menu item');
return;
}

function checkHandler() {
alert('Checked a menu item');
return;
}

function convertDate(v, mix) {
if (v)
return new Date( parseFloat(v.slice(6, 19)) ).format('mm/dd/yyyy').toLocaleString();
}

var currentRecord = null;

var jsonStore = new Ext.data.JsonStore({
url: '/Bugs/GetBugs',
totalProperty: 'totalRows',
root: 'rows',
id: 'NoteId',
fields: [
'NoteId',
'Summary',
{ name: 'DateEntered', convert: convertDate, type: 'date' }
],
listeners: {
load: function(store, records, options) {
try {
// Get an instance of the first record from the data store.
var currentRecord = store.getAt(0);
// Get an instance of the main form.
var form = Ext.getCmp('mainForm');
// Load the main form with the first record.
form.getForm().loadRecord(currentRecord);
} catch(err) {
console.log(err);
}
},
loadexception: function(store, options, response, e) {
console.log(e);
}
}
});

var pagesize = 100;
jsonStore.load({ params: { start: 0, limit: pagesize} });

var summaryGrid = new Ext.grid.GridPanel({
id: 'summaryGrid',
region: 'north',
border: true,
//width: 300,
height: 600,
loadMask: true,
store: jsonStore,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
,listeners: {
rowselect: function(sm, rowIndex, selectedRecord) {
//console.log(r.data.Summary);
// Overwrite previously selected record with record selected from gird row selection.
currentRecord = selectedRecord;
var form = Ext.getCmp('mainForm');
if (form)
{
form.getForm().loadRecord(selectedRecord);
}
}
}
}),
columns: [
{ header: 'NoteId', width: 80, sortable: true, dataIndex: 'NoteId' },
{ header: 'Summary', width: 300, sortable: true, dataIndex: 'Summary' }
],
bbar: new Ext.PagingToolbar({
pageSize: pagesize,
displayInfo: true,
emptyMsg: 'No data found',
store: jsonStore
})
});

var searchForm = new Ext.FormPanel({
id: 'searchForm',
region: 'center',
labelAlign: 'top',
autoScroll: true,
border: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Search',
name: 'SearchField',
width: 250
}],
buttons: [{
text: 'Search',
handler: function() {
Ext.getCmp('searchForm').getForm().submit({
// Still deciding how this will work.
//url: '/Bugs/Search',
//method: 'POST',
//waitTitle: 'Processing...',
//waitMsg: 'Please wait...'
});
}
}, {
text: 'Clear Search'
}]
});

var leftPanel = new Ext.Panel({
id: 'leftPanel',
region: 'west',
layout: 'border',
border: true,
collapsible: true,
split: true,
width: 300,
items: [ summaryGrid, searchForm ]
});

var productClassStore = new Ext.data.JsonStore({
autoLoad: true,
url: '/Bugs/GetProductClasses',
id: 'PrdClass',
root: 'rows',
fields: ['PrdClass', 'PrdDesc']
});

var productCombo = new Ext.form.ComboBox({
id: 'productCombo',
store: productClassStore,
valueField: 'PrdClass',
displayField: 'PrdDesc',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a product',
selectOnFocus: true
});

var mainForm = new Ext.FormPanel({
id: 'mainForm',
region: 'center',
labelAlign: 'top',
layout: 'fit',
border: true,
items: {
xtype: 'tabpanel',
deferredRender: false, // Don't deferr render of tabs so that they are data bound on load.
activeTab: 0,
border: true,
defaults: { autoHeight: true, bodyStyle: 'padding:10px' },
items: [ // Tab Panel Tabs/Items
{ // Tab: F2-General
title: 'F2-General',
layout: 'form',
defaultType: 'textfield',
items: [ // Tab: F2-General Items
{
fieldLabel: 'Summary',
name: 'Summary',
maxLength: 80,
allowBlank: false,
width: 500
}, {
xtype: 'panel',
border: false,
layout: 'column',
width: 600,
items: [{
columnWidth: .5,
layout: 'form',
border: false,
//labelWidth: 120,
items: [{
xtype: 'textfield',
maxLength: 20,
fieldLabel: 'Reported in version',
name: 'Version'
}, {
xtype: 'datefield',
fieldLabel: 'Date modified',
name: 'DateModified',
//format: 'mm/dd/yyy', // Not needed at this time. The date is being formated by the JsonStore.
width: 140
}, {
xtype: 'textfield',
maxLength: 20,
fieldLabel: 'Product class',
name: 'PrdClass'
},
productCombo,
// {
// xtype: 'combo',
// fieldLabel: 'Product class',
// name: 'PrdClass',
// valueField: 'PrdClass',
// displayField: 'PrdDesc',
// typeAhead: true,
// mode: 'local',
// forceSelection: false,
// triggerAction: 'all',
// //emptyText: 'Select a product',
// selectOnFocus: true,
// store: new Ext.data.JsonStore({
// autoLoad: true,
// url: '/Bugs/GetProductClasses',
// id: 'PrdClass',
// root: 'rows',
// fields: ['PrdClass', 'PrdDesc']
// })
// },
{
xtype: 'textfield',
maxLength: 10,
fieldLabel: 'Planned',
name: 'PvVersion'
}, {
xtype: 'textfield',
maxLength: 15,
fieldLabel: 'PV Priority',
name: 'PvPriority'
}, {
xtype: 'textfield',
maxLength: 2,
fieldLabel: 'Assignee',
name: 'AssignedTo'
}, {
xtype: 'textfield',
maxLength: 50,
fieldLabel: 'Menu',
name: 'MenuName'
}]
}, {
columnWidth: .5,
layout: 'form',
border: false,
//labelWidth: 80,
items: [{
xtype: 'textfield',
maxLength: 30,
fieldLabel: 'Reported by',
name: 'ReportedBy'
}, {
xtype: 'textfield',
maxLength: 10,
fieldLabel: 'Verified by',
name: 'VerifiedBy'
}, {
xtype: 'textfield',
maxLength: 30,
fieldLabel: 'Updated by',
name: 'UpdatedBy'
}, {
xtype: 'textfield',
maxLength: 20,
fieldLabel: 'Group',
name: 'PvGroup'
}, {
xtype: 'textfield',
//maxLength: 15,
//type: int,
fieldLabel: 'Priority',
name: 'Priority'
}, {
xtype: 'textfield',
//maxLength: 15,
//type: int,
fieldLabel: 'Seriousness',
name: 'Seriousness'
}]
}]
}, {
xtype: 'panel',
border: false,
layout: 'column',
width: 600,
items: [{
columnWidth: .3,
layout: 'form',
border: false,
labelWidth: 80,
items: [{
xtype: 'checkbox',
fieldLabel: 'Changes Doc',
name: 'IsChangesDoc'
}]
}, {
columnWidth: .3,
layout: 'form',
border: false,
labelWidth: 90,
items: [{
xtype: 'checkbox',
fieldLabel: 'Release Notes',
name: 'IsReleaseNotes'
}]
}, {
columnWidth: .3,
layout: 'form',
border: false,
labelWidth: 100,
items: [{
xtype: 'checkbox',
fieldLabel: 'Known Problems',
name: 'reportedInVersion'
}]
}]
}, {
xtype: 'htmleditor',
fieldLabel: 'Description',
name: 'Description',
height: 200,
anchor: '98%'
}] // END: F2-General Items
}, { // Tab: F3-Programmer Status
title: 'F3-Programmer Status',
layout: 'form',
defaultType: 'textfield',
items: [ // BEGIN: F3-Programmer Status Items
{
xtype: 'htmleditor',
fieldLabel: 'Status',
name: 'Status',
height: 200,
anchor: '98%'
}] // END: F3-Programmer Status Items
}, { // Tab: F4-Solution/Known Problem
title: 'F4-Solution/Known Problem',
layout: 'form',
defaultType: 'textfield',
items: [ // BEGIN: F4-Solution/Known Problem Items
{
xtype: 'htmleditor',
fieldLabel: 'Solution',
name: 'Solution',
height: 200,
anchor: '98%'
}, {
xtype: 'htmleditor',
fieldLabel: 'KnownProb',
name: 'KnownProb',
height: 200,
anchor: '98%'
}] // END: F4-Solution/Known Problem Items
}, { // Tab: F5-Test
title: 'F5-Test',
layout: 'form',
defaultType: 'textfield',
items: [ // BEGIN: F5-Test Items
{
xtype: 'htmleditor',
fieldLabel: 'Status',
name: 'Status',
height: 200,
anchor: '98%'
}] // END: F5-Test Items
}]
},
buttons: [{
text: 'Save',
handler: function() {
Ext.getCmp('mainForm').getForm().submit({
url: '/Bugs/Edit', // The REST based url that the data will be saved to.
method: 'POST',
params: { id: '10' },
waitTitle: 'Processing...',
waitMsg: 'Please wait...'
});
}
}, {
text: 'Cancel'
}]
});

var viewport = new Ext.Viewport({
layout: 'border',
items: [mainMenu, leftPanel, mainForm]
});
})
</script>
</head>
<body>

</body>
</html>
mohaaron
12 Jun 2009, 11:21 AM
I think I'm starting to understand part of my problem. It seems that the order of events is very important. I also don't know what the order should be to make the combo work.

So far I have found that this is the order in which events are being fired.

Form.Render
Grid.Render
Grid.Store.Load
Grid.Render.Store.Load

Can anyone tell me why the events are fired in the order that they are and how I might change the order? I need the grid or the grid store to load first so I can get at the first record, either through the grid or the store.

Here is the code that I am now using. I changed the form to try and load the data record by calling the form load method and pass the grid selected record.id as a parameter to the form load. This is not working because form load is being called first. It seems as though I need the order of events to be the opposite of what they are.

If anyone has any idea's I could sure use the help. I've been working on this for a while an have not made any progress.

Here is my current code. This code works and loads the grid and the form, it just doesn't select the correct item in the form combobox.


<script type="text/javascript">
Ext.onReady(function() {

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

// The currently selected data record. This will get initiall loaded from the summaryGridStore.load event. Then
// when a grid row is selected the currentRecord will become record for the selected row.
var currentRecord = null;

// The JsonStore which populates the Grid.
var summaryGridStore = new Ext.data.JsonStore({
url: '/Bugs/GetBugsLinq',
totalProperty: 'totalRows',
root: 'rows',
id: 'NoteId',
fields: [
'NoteId',
'Summary',
'PrdClass',
'Description'
]
,listeners: {
load: function(store, records, options) {
//alert('Grid.Store.Load'); // Event 3
},
loadexception: function(store, options, response, e) {
//
}
}
});

//summaryGridStore.load({ params: { start: 0, limit: 100} });

var summaryGrid = new Ext.grid.GridPanel({
id: 'summaryGrid',
region: 'north',
border: true,
//width: 300,
height: 600,
loadMask: true,
store: summaryGridStore,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
,listeners: {
rowselect: function(sm, rowIndex, record) {
// QUESTION: If we move the data loading to the form.load method then
// how do we reload the form data when a new grid row is selected?

// Overwrite previously selected record with record selected from gird row selection.
currentRecord = record;

// Load form with currently selected record.
Ext.getCmp('mainForm').getForm().loadRecord(record);
}
}
}),
columns: [
{ header: 'NoteId', width: 80, sortable: true, dataIndex: 'NoteId' },
{ header: 'Summary', width: 300, sortable: true, dataIndex: 'Summary' }
],
bbar: new Ext.PagingToolbar({
pageSize: 100,
displayInfo: true,
emptyMsg: 'No data found',
store: summaryGridStore
}),
listeners: {
render: function(g) {
//alert('Grid.Render'); // Event 2
// Load the grid store here so we can set focus and select the first row on grid load.
g.getStore().on('load', function() {
//alert('Grid.Render.Store.Load'); // Event 4
g.getView().focusEl.focus();
g.getSelectionModel().selectRow(0);
currentRecord = g.getSelectionModel().getSelected();
});
// Is this causing the store to load twice?
g.getStore().load({ params: { start: 0, limit: 100} });
},
delay: 10
}
});

var searchForm = new Ext.FormPanel({
id: 'searchForm',
region: 'center',
labelAlign: 'top',
autoScroll: true,
border: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Search',
name: 'SearchField',
width: 250
}],
buttons: [{
text: 'Search',
handler: function() {
Ext.getCmp('searchForm').getForm().submit({
// Still deciding how this will work.
//url: '/Bugs/Search',
//method: 'POST',
//waitTitle: 'Processing...',
//waitMsg: 'Please wait...'
});
}
}, {
text: 'Clear Search'
}]
});

var leftPanel = new Ext.Panel({
id: 'leftPanel',
region: 'west',
layout: 'border',
border: true,
collapsible: true,
split: true,
width: 300,
items: [ summaryGrid, searchForm ]
});

var mainForm = new Ext.FormPanel({
id: 'mainForm',
region: 'center',
labelAlign: 'top',
layout: 'fit',
border: true,
items: {
xtype: 'tabpanel',
deferredRender: false, // Don't deferr render of tabs so that they are data bound on load.
activeTab: 0,
border: true,
defaults: { autoHeight: true, bodyStyle: 'padding:10px' },
items: [
{
title: 'F2-General',
layout: 'form',
defaultType: 'textfield',
items: [
{
fieldLabel: 'Summary',
name: 'Summary',
maxLength: 80,
allowBlank: false,
width: 500
}, {
xtype: 'combo',
id: 'productCombo',
fieldLabel: 'Product class',
name: 'PrdClass',
valueField: 'PrdClass',
displayField: 'PrdDesc',
hiddenName: 'productName',
hiddenId: 'productId',
typeAhead: true,
mode: 'local',
forceSelection: false,
triggerAction: 'all',
emptyText: 'Select a product',
selectOnFocus: true,
store: new Ext.data.JsonStore({
autoLoad: true,
url: '/Bugs/GetProductClasses',
id: 'PrdClass',
root: 'rows',
fields: ['PrdClass', 'PrdDesc']
})
}, {
xtype: 'htmleditor',
fieldLabel: 'Description',
name: 'Description',
height: 200,
anchor: '98%'
}]
}]
},
listeners: {
render: function(f) {
//alert('Form.Render'); // Event 1
}
}
});

// mainForm.load({
// url: '/Bugs/GetBug/', //+ Ext.getCmp('summaryGrid').getSelectionModel().getSelected().id,
// params: { id: 1 },
// method: 'post',
// waitTitle: 'Processing...',
// waitMsg: 'Loading data...',
// success: function(form, action) {
//// if (console != null)
//// console.log('mainForm loaded.');
// }
// });

var viewport = new Ext.Viewport({
layout: 'border',
items: [leftPanel, mainForm]
});
});
</script>
mohaaron
12 Jun 2009, 1:31 PM
Some more new information. I've updated my code to the following and have found that the hidden field used for storing the selected combo value shows this. I got this bit of html using firebug.



<div id="ext-gen75" class="x-form-field-wrap" style="width: 164px;"><input id="productId" type="hidden" name="productName" value="01"/>

<input id="prdCombo" class="x-form-text x-form-field" type="text" autocomplete="off" size="24" title=""/>

<img id="ext-gen76" class="x-form-trigger x-form-arrow-trigger" src="http://extjs.com/s.gif"/>


</div>
The value of "01" is the correct value.

BTW, does anyone know how I can see the contents of the combo items? How can I see that the list of items contains the right name/value pairs for the data that I expect?

Here is the entire code base now. I also wonder now why the combo.load event is not being fired.



<script type="text/javascript">
Ext.onReady(function() {

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

// The currently selected data record. This will get initiall loaded from the summaryGridStore.load event. Then
// when a grid row is selected the currentRecord will become record for the selected row.
var currentRecord = null;

// The JsonStore which populates the Grid.
var summaryGridStore = new Ext.data.JsonStore({
url: '/Bugs/GetBugsLinq',
totalProperty: 'totalRows',
root: 'rows',
id: 'FixNoteId',
fields: [
'FixNoteId',
'Summary',
'PrdClass',
'Description'
]
});

function loadForm(record)
{
Ext.getCmp('mainForm').load({
url: '/Bugs/GetBug/',
params: { fixNoteId: record.id },
method: 'post',
waitTitle: 'Processing...',
waitMsg: 'Loading data...',
success: function(form, action) {
if (console != null)
console.log('mainForm loaded.');
}
});
}

var summaryGrid = new Ext.grid.GridPanel({
id: 'summaryGrid',
region: 'north',
border: true,
//width: 300,
height: 600,
loadMask: true,
store: summaryGridStore,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
,listeners: {
rowselect: function(sm, rowIndex, record) {
// QUESTION: If we move the data loading to the form.load method then
// how do we reload the form data when a new grid row is selected?

// Overwrite previously selected record with record selected from gird row selection.
currentRecord = record;

// Load form with currently selected record.
console.log('grid.rowselect.getForm().loadRecord(r)');
//Ext.getCmp('mainForm').getForm().loadRecord(record);
loadForm(record);
}
}
}),
columns: [
{ header: 'FixNoteId', width: 80, sortable: true, dataIndex: 'FixNoteId' },
{ header: 'Summary', width: 300, sortable: true, dataIndex: 'Summary' }
],
bbar: new Ext.PagingToolbar({
pageSize: 100,
displayInfo: true,
displayMsg: 'Bugs {0} - {1} of {2}',
emptyMsg: 'No data found',
store: summaryGridStore
}),
listeners: {
render: function(g) {
console.log('Grid.Render'); // Event 2
// Load the grid store here so we can set focus and select the first row on grid load.
g.getStore().on('load', function() {
console.log('Grid.Render.Store.Load'); // Event 4
g.getView().focusEl.focus();
console.log('grid.render.selectRow(0)');
g.getSelectionModel().selectRow(0);
currentRecord = g.getSelectionModel().getSelected();

// Commented this out because g.getSelectionModel().selectRow(0); is causing
// the grid.rowselect event to fire which is then callding form.loadRecord.
// Ext.getCmp('mainForm').load({
// url: '/Bugs/GetBug/',
// params: { fixNoteId: currentRecord.id },
// method: 'post',
// waitTitle: 'Processing...',
// waitMsg: 'Loading data...',
// success: function(form, action) {
// if (console != null)
// console.log('mainForm loaded.');
// }
// });
});
// Is this causing the store to load twice?
g.getStore().load({ params: { start: 0, limit: 100} });
},
delay: 10
}
});

var searchForm = new Ext.FormPanel({
id: 'searchForm',
region: 'center',
labelAlign: 'top',
autoScroll: true,
border: true,
items: [{
xtype: 'textfield',
fieldLabel: 'Search',
name: 'SearchField',
width: 250
}],
buttons: [{
text: 'Search',
handler: function() {
Ext.getCmp('searchForm').getForm().submit({
// Still deciding how this will work.
//url: '/Bugs/Search',
//method: 'POST',
//waitTitle: 'Processing...',
//waitMsg: 'Please wait...'
});
}
}, {
text: 'Clear Search'
}]
});

var leftPanel = new Ext.Panel({
id: 'leftPanel',
region: 'west',
layout: 'border',
border: true,
collapsible: true,
split: true,
width: 300,
items: [ summaryGrid, searchForm ]
});

var prdClassStore = new Ext.data.JsonStore({
autoLoad: true,
url: '/Bugs/GetProductClasses',
id: 'PrdClass',
root: 'rows',
fields: ['PrdClass', 'PrdDesc'],
listener: {
load: function(store, records, options)
{
// Why is the load method never called?
console.log('prdCombo.prdClassStore.load');
}
}
});

// So far it doesn't matter how I load the form with data. The ComboBox still does
// not pre select right item.
var mainForm = new Ext.FormPanel({
id: 'mainForm',
region: 'center',
labelAlign: 'top',
layout: 'fit',
border: true,
items: {
xtype: 'tabpanel',
deferredRender: false, // Don't deferr render of tabs so that they are data bound on load.
activeTab: 0,
border: true,
defaults: { autoHeight: true, bodyStyle: 'padding:10px' },
items: [
{
title: 'F2-General',
layout: 'form',
defaultType: 'textfield',
items: [
{
fieldLabel: 'Summary',
name: 'Summary',
maxLength: 80,
allowBlank: false,
width: 500
}, {
xtype: 'combo',
id: 'prdCombo',
fieldLabel: 'Product class',
name: 'prdCombo',
valueNotFoundText: 'Value not found...',
valueField: 'PrdClass',
displayField: 'PrdDesc',
hiddenName: 'productName',
hiddenId: 'productId',
typeAhead: true,
mode: 'local',
forceSelection: false,
triggerAction: 'all',
emptyText: 'Select a product',
selectOnFocus: true,
store: prdClassStore
// store: new Ext.data.JsonStore({
// autoLoad: true,
// url: '/Bugs/GetProductClasses',
// id: 'PrdClass',
// root: 'rows',
// fields: ['PrdClass', 'PrdDesc'],
// listener: {
// load: function(store, records, options)
// {
// console.log('productCombo.store.load');
// }
// }
// })
,listeners: {
render: function(combo) {
combo.setValue('01');
console.log('form.combo.render');
}
}
}, {
xtype: 'htmleditor',
fieldLabel: 'Description',
name: 'Description',
height: 200,
anchor: '98%'
}]
}]
}
// ,listeners: {
// render: function(f) {
// console.log('Form.Render'); // Event 1
// }
// }
});

// mainForm.load({
// url: '/Bugs/GetBug/', //+ Ext.getCmp('summaryGrid').getSelectionModel().getSelected().id,
// params: { id: 1 },
// method: 'post',
// waitTitle: 'Processing...',
// waitMsg: 'Loading data...',
// success: function(form, action) {
//// if (console != null)
//// console.log('mainForm loaded.');
// }
// });

var viewport = new Ext.Viewport({
layout: 'border',
items: [leftPanel, mainForm]
});
});
</script>
mohaaron
12 Jun 2009, 1:46 PM
I just figured out how to find the list of combo items. I also found that when I call the combo.setValue method it is in fact setting the correct value and combo item. It's just not displaying correctly. The combo actually acts like it didn't find the item value and gives me the valueNotFound message. Then when I open the combo the value/item is actually selected. Attached is a picture which seems very contradictory.

Can anyone explain this?
fausastu
12 Jun 2009, 4:50 PM
Excuse me.
I have no read your code. But....

I had same behavoir when I set the combo value before loading combo's data (even when assigned a correct value).

I hope this help you.
monofone
12 Jan 2010, 7:13 AM
Thx a lot for the Hint with the hiddenName, this saved my day and solved my problem.