PDA

View Full Version : Combo list in form not shown following loadRecord?



bryan10
5 Feb 2012, 10:51 AM
Hello,
I am having a problem whereby a combo that exists in a form and
that gets set using loadRecord, requires to have the dropdown
button clicked twice in order for the list to appear.


In the code below, when the 'Add' button is clicked, the AddWin
containing the AddForm is displayed. The AddForm contains the
combobox - the store is loaded remotely.
When the store's autoLoad is set to true and the AddForm
is invoked and the combos dropdown button is clicked, the
list is not displayed.
When the store's autoLoad is set to false, the AddForm
is invoked and the combos dropdown button is clicked, the
list is displayed correctly - however following the cancel
being clicked and the form reshown and the combos dropdown button
clicked, the list is again not displayed.


Would you be able to provide a solution to this?
i.e. the combo list is shown the first time the dropdown button is
selected.


Note that the response for the UserforCombo proxy (i.e. list for combo)
contains users having same descr's as in grid plus extra users.


Thank you,
Bryan





Ext.Loader.setConfig({enabled:true});


Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'long' },
{ name: 'descr', type: 'string' }
]
});


var gridstore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ id: 20, descr: 'Bryan' },
{ id: 30, descr: 'Sue' }
]
});


Ext.define('UserforCombo', {
extend: 'Ext.data.Model',


fields: [
{name: 'id', type: 'long'},
{name: 'descr', type: 'string'}
],


proxy: {
type: 'ajax',
api: {
read: '/user/users'
},
reader: {
type: 'json',
root: 'records',
successProperty: 'success'
}
}
});


Ext.define('BILL.store.UserforCombos', {
extend: 'Ext.data.Store',
model: 'UserforCombo',
id: 'userforcombo-store',
autoLoad: true
});


var userforcombostore = new BILL.store.UserforCombos;




Ext.define('BILL.view.ListPanel' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.listpanel',
selType: 'rowmodel',
store: gridstore,

bbar: [
{
xtype: 'button',
text : 'Add',
width: 100,
handler: function(btn) {
var f = Ext.create('BILL.view.AddForm');
var w = Ext.create('BILL.view.AddWin');
w.add(f);


var sel = btn.up('listpanel').getSelectionModel();

if (!sel.hasSelection())
alert('Record not Selected');
else {
f.loadRecord(sel.getSelection()[0]);
w.show();
}


}
},
],

initComponent: function() {


this.columns = [
{header: 'Id', dataIndex: 'id',flex: 1},
{header: 'Description', dataIndex: 'descr', flex: 1}
];


this.callParent(arguments);
}


});


Ext.define('BILL.view.AddForm', {
extend: 'Ext.form.Panel',
alias: 'widget.addfrm',
items: [
{
xtype: 'fieldset',
items: [{
fieldLabel: 'Id',
name: 'id',
readOnly: true,
xtype: 'numberfield',
allowDecimals: false,
type:'long'
},
{
fieldLabel: '*Descr',
name: 'descr',
readOnly: false,
xtype: 'combobox',
store: userforcombostore,
valueField: 'descr',
displayField: 'descr',
allowBlank: false
}


]
},
{
xtype: 'button',
text: 'Cancel',
width: 90,
handler: function() {
this.up().up().close();
}
}
],


});




Ext.define('BILL.view.AddWin', {
extend: 'Ext.window.Window',
width:400,
height: 200,
constrainHeader: true,
closable: true,
resizeable: true,
layout : 'fit',


initComponent: function() {
this.callParent();
}
});


Ext.define('BILL.view.UserWin', {
extend: 'Ext.window.Window',
width:400,
height: 200,
constrainHeader: true,
title: 'Users',
layout : 'border',

initComponent: function() {


this.items = [
{
region : 'center',
xtype : 'listpanel',
height: 400
}
]
this.callParent();
}
});


var win = Ext.create('BILL.view.UserWin');


Ext.application({

launch: function() {


win.show();
}
});

mitchellsimoens
5 Feb 2012, 11:30 AM
You should not use Ext.create outside Ext.application like that.

dedoz
5 Feb 2012, 12:32 PM
1) you can use ext define and create before Ext application, no problem there, maybe you should at least use onReady just to be sure everything is ... ready ;d

2) type long doesnt exist i think, check documentation on Ext / Data / Types

3) which version of ExtJs are you using ?
anyway, prolly u have an error loading the store and the queryMode of your combobox
check documentation for combobox, the queryMode config.

You have two options, one is set store to autoload: false and use queryMode : remote, so the combobox will load the store when pressed.

Second, you can load the store before (setting autoload: true or doing myStore.load() ) but u have to put your Ext.create('MyForm') in the load callback, if not the store.load and the combobox trying to load the thing will end in weird errors (this is using ExtJs 4.1 beta)

Best option , if its not important to load the store before the combobox creation, then just set autoload : false and in the combobox set queryMode : 'remote'

(sorry for my bad english :d)

mitchellsimoens
5 Feb 2012, 12:43 PM
1) you can use ext define and create before Ext application, no problem there, maybe you should at least use onReady just to be sure everything is ... ready ;d

Except it is bad practice and unorganized.

bryan10
8 Feb 2012, 3:12 AM
Hello,


Thank you for your replies.
I have tried using queryMode 'remote', autoLoad: false as suggested.
However the problem persists still.
I have sent over the code which instead uses a json static file as url.
Would you be able to reproduce the problem / suggest a soln?
When the combos dropdown button is first clicked, the list is
displayed correctly - however following the cancel being clicked
and the form reshown and the combos dropdown button reclicked, the
list is not displayed.


Thank you,
bryan





Ext.Loader.setConfig({enabled:true});


Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'long' },
{ name: 'descr', type: 'string' }
]
});


var gridstore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
{ id: 1, descr: 'David Cameron' },
{ id: 2, descr: 'Ed Miliband' }
]
});


Ext.define('UserforCombo', {
extend: 'Ext.data.Model',


fields: [
{name: 'id', type: 'long'},
{name: 'descr', type: 'string'}
],


proxy: {
type: 'ajax',
api: {
read: '/public/data/users.json'
},
reader: {
type: 'json',
root: 'records',
successProperty: 'success'
}
}
});


Ext.define('BILL.store.UserforCombos', {
extend: 'Ext.data.Store',
model: 'UserforCombo',
id: 'userforcombo-store',
autoLoad: false,
queryMode: 'remote'
});


var userforcombostore = new BILL.store.UserforCombos;




Ext.define('BILL.view.ListPanel' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.listpanel',
selType: 'rowmodel',
store: gridstore,

bbar: [
{
xtype: 'button',
text : 'Add',
width: 100,
handler: function(btn) {
var f = Ext.create('BILL.view.AddForm');
var w = Ext.create('BILL.view.AddWin');
w.add(f);


var sel = btn.up('listpanel').getSelectionModel();

if (!sel.hasSelection())
alert('Record not Selected');
else {
w.show();
f.loadRecord(sel.getSelection()[0]);

}


}
},
],

initComponent: function() {


this.columns = [
{header: 'Id', dataIndex: 'id',flex: 1},
{header: 'Description', dataIndex: 'descr', flex: 1}
];


this.callParent(arguments);
}


});


Ext.define('BILL.view.AddForm', {
extend: 'Ext.form.Panel',
alias: 'widget.addfrm',
items: [
{
xtype: 'fieldset',
items: [{
fieldLabel: 'Id',
name: 'id',
readOnly: true,
xtype: 'numberfield',
allowDecimals: false
},
{
fieldLabel: '*User',
name: 'descr',
readOnly: false,
xtype: 'combobox',
store: userforcombostore,
valueField: 'descr',
displayField: 'descr',
allowBlank: false
}


]
},
{
xtype: 'button',
text: 'Cancel',
width: 90,
handler: function() {
this.up().up().close();
}
}
],


});




Ext.define('BILL.view.AddWin', {
extend: 'Ext.window.Window',
width:400,
height: 200,
constrainHeader: true,
closable: true,
resizeable: true,
layout : 'fit',


initComponent: function() {
this.callParent();
}
});


Ext.define('BILL.view.UserWin', {
extend: 'Ext.window.Window',
width:400,
height: 200,
constrainHeader: true,
title: 'Users',
layout : 'border',

initComponent: function() {


this.items = [
{
region : 'center',
xtype : 'listpanel',
height: 400
}
]
this.callParent();
}
});


var win = Ext.create('BILL.view.UserWin');


Ext.application({

launch: function() {


win.show();
}
});




data/users.json
{"records":[{"descr":"Fred Bloggs","id":0},{"descr":"David Cameron","id":1},{"descr":"Ed Miliband","id":2}],"totrecs":3}

bryan10
9 Feb 2012, 5:48 AM
Hello,
version of ext js used: 4.0.7.
I was wondering if this could be investigated - it's been a problem hanging around for weeks - I think others
may have encountered a similar problem - but I haven't been able to resolve it.
Thank you,
bryan