Results 1 to 3 of 3

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

  1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    6

    Default Answered: View will not populate data on comboboxes, datefield and grid on second open.

    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.

    Code:
    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
                    }];
        }
       
    });

  2. 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

  3. #2
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    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

  4. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    6

    Default

    Thank you. It worked. Just edited the listener for the datefield to what you instructed and everything worked.

Similar Threads

  1. Conditional logic in the View to populate the grid
    By smaruvada in forum Ext: Discussion
    Replies: 1
    Last Post: 29 May 2011, 12:05 PM
  2. Populate Grid with Data from XML
    By alessalessio in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 31 Mar 2011, 4:58 AM
  3. Best approach to populate several comboboxes in form
    By mankz in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 17 Jul 2008, 1:52 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •