PDA

View Full Version : View will not populate data on comboboxes, datefield and grid on second open.



ching29
14 Jul 2016, 2:22 AM
Hello,

Please help.

I have created a view that has combobox, datefields and grids on it. On first load, everything is perfect. But when I close and re-open the view the combobox has no data and grids are not visible same with the datefield. I already added closeAction:'hide' and autoDestroy:false but still the problem happens.

Please see below code. The code below is fired from the controller which pop-up this view (window) when Add Item is clicked from the Grid Panel.


Ext.define('tdo.view.trngRecords.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.itemedit',
addMode : false,
title : 'Edit Training Record',
layout: 'fit',
autoShow: true,
modal: true,
closeAction: 'hide',
autoDestroy: false,


initComponent: function() {
this.items = this.buildItems();
this.buttons = this.buildButtons();
this.callParent();
},

buildItems: function(){
return [{
xtype: 'form',
id: 'multiColumnForm',
bodyPadding: '5 5 0',
width: 900,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
closeAction: 'hide',
autoDestroy: false,


items: [{
xtype: 'container',
anchor: '100%',
layout: 'hbox',
autoDestroy: false,

items:[{
xtype: 'container',
flex: 1,
layout: 'anchor',
autoDestroy: false,
items: [{
xtype:'textfield',
fieldLabel: 'Title',
allowBlank: false,
name: 'title',
width: 580
},{
xtype:'combobox',
fieldLabel: 'Venue',
allowBlank: false,
autoShow: true,
name: 'venue',
store:venue,
displayField: 'name',
valueField: 'abbr',
anchor:'95%'
},{
xtype:'datefield',
fieldLabel: 'From',
allowBlank: false,
name: 'fromDate',
format: 'M/d/Y',
anchor:'95%',
maxValue: new Date(),
value: new Date(),
endDateField: 'toDate',
id: 'fromDate',
listeners:{
'change': function(th,a){
Ext.getCmp('toDate').setMinValue(a);
Ext.getCmp('toDate').setValue(a);
}
}
},{
xtype: 'fieldset',
width:280,
title: 'Topic',
defaults: {
labelWidth: 89,
anchor: '95%',
layout: {
type: 'hbox',
defaultMargins: {top: 0, right: 5, bottom: 0, left: 5}
}
},
items: [{
xtype: 'combobox',
allowBlank: false,
store: storeTopics,
queryMode: 'local',
displayField: 'topicDesc',
valueField: 'topicCode',
forceSelection:true,
listeners: {
buffer: 50,
change: function() {
var store = this.store;
store.suspendEvents();
store.clearFilter();
store.resumeEvents();
store.filter({
property: 'topicDesc',
anyMatch: true,
value : this.getValue()
});
}
}
}]

},{
xtype: 'fieldset',
width:280,
title: 'Remarks',
defaults: {
labelWidth: 89,
anchor: '90%',
layout: {
type: 'hbox',
defaultMargins: {top: 0, right: 5, bottom: 0, left: 5}
}
},
items: [{
xtype: 'textareafield'
}]
}]
},{
xtype: 'container',
flex: 1,
layout: 'anchor',
padding:'48 0 0 0',
autoDestroy: false,
items: [{
xtype:'combobox',
fieldLabel: 'Type',
allowBlank: false,
name: 'type',
anchor:'100%',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
value: 'Training'
},{
xtype:'datefield',
fieldLabel: 'To',
allowBlank: false,
name: 'toDate',
format: 'M/d/Y',
anchor:'100%',
editable: false,
value: new Date(),
minValue: new Date(),
id: 'toDate'
}]
},{
xtype: 'fieldset',
title: 'Attendees',
flex: 1,
layout: 'fit',
margin: '0 0 0 10',
defaults: {
height: 378,
labelWidth: 89,
layout: {
type: 'hbox',
defaultMargins: {top: 0, right: 5, bottom: 0, left: 10}
}
},
items: grid3
}]
}]
}
];
},
buildButtons: function(){
return [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}];
}

});

jdkhamba
14 Jul 2016, 4:41 AM
It is not advisable to use id for Ext components.

id: 'fromDate', etc is probably causing the problem. Get rid of them and it should work.Use itemId instead and ComponentQuery instead of Ext.getCmp() to access them and populate them.

Here is a working example:
https://fiddle.sencha.com/#fiddle/18r7

ching29
14 Jul 2016, 10:16 PM
Thank you. It worked. Just edited the listener for the datefield to what you instructed and everything worked.