Results 1 to 2 of 2

Thread: Destroy component and create new each time the user clicks on a button

  1. #1
    Sencha User
    Join Date
    Jan 2016
    Posts
    11
    Answers
    1

    Default Answered: Destroy component and create new each time the user clicks on a button

    Hi,
    I have a form which works like this:

    1) User select a value in a comboBox.
    2) User clicks on a button, and depending of the value selected in the comboBox, a new comboBox is created with values associated.
    3) User can select a second value.

    My code actually works, but only for a single time:

    Code:
    items: [
                {
                xtype: 'combo',
                fieldLabel: 'Choose layer:',
                id: "lay1",
                store: store,
                queryMode: 'local',
                emptyText: 'Select point layer...',
                valueField      : 'name',
                displayField    : 'value',
                enableKeyEvents : false,
                submitEmptyText : false,
            }, {
                xtype: 'button',
                text: "Get keys...",
                 listeners: {
    /*                 single: true, */
                    click: function(){
                        if(typeof keysForm === 'undefined'){
                                keysForm = new Ext.create('Ext.form.ComboBox', {
                                fieldLabel: 'Choose key to render',
                                id: 'comboKey',
                                store: reachKeys(Ext.getCmp('lay1').getDisplayValue()),
                                queryMode: 'local',
                            });
                            getLayerAndKeys.add(keysForm);
                        } else {
                            Ext.getCmp('comboKey').destroy();
                                var keysForm2 = new Ext.create('Ext.form.ComboBox', {
                                    fieldLabel: 'Choose key to render',
                                    id: 'comboKey2',
                                    store: reachKeys(Ext.getCmp('lay1').getDisplayValue()),
                                    queryMode: 'local',
                                });
                                getLayerAndKeys.add(keysForm2);
                            }
                        
                    }    
                }
            }]
    How can I get the same results but for everytime the user clicks on the "Get keys" button ?

    Thanks

  2. Ok solved it.

    Code:
    click: function(){
                        if(typeof Ext.getCmp('comboKey') === 'undefined'){
                                keysForm = new Ext.create('Ext.form.ComboBox', {
                                fieldLabel: 'Choose key to render',
                                id: 'comboKey',
                                store: reachKeys(Ext.getCmp('lay1').getDisplayValue()),
                                queryMode: 'local',
                            });
                            getLayerAndKeys.add(keysForm);
                        } else {
                            Ext.getCmp('comboKey').destroy();
                                var keysForm = new Ext.create('Ext.form.ComboBox', {
                                    fieldLabel: 'Choose key to render',
                                    id: 'comboKey',
                                    store: reachKeys(Ext.getCmp('lay1').getDisplayValue()),
                                    queryMode: 'local',
                                });
                                getLayerAndKeys.add(keysForm);
                            }
                        
                    }

  3. #2
    Sencha User
    Join Date
    Jan 2016
    Posts
    11
    Answers
    1

    Default

    Ok solved it.

    Code:
    click: function(){
                        if(typeof Ext.getCmp('comboKey') === 'undefined'){
                                keysForm = new Ext.create('Ext.form.ComboBox', {
                                fieldLabel: 'Choose key to render',
                                id: 'comboKey',
                                store: reachKeys(Ext.getCmp('lay1').getDisplayValue()),
                                queryMode: 'local',
                            });
                            getLayerAndKeys.add(keysForm);
                        } else {
                            Ext.getCmp('comboKey').destroy();
                                var keysForm = new Ext.create('Ext.form.ComboBox', {
                                    fieldLabel: 'Choose key to render',
                                    id: 'comboKey',
                                    store: reachKeys(Ext.getCmp('lay1').getDisplayValue()),
                                    queryMode: 'local',
                                });
                                getLayerAndKeys.add(keysForm);
                            }
                        
                    }

Similar Threads

  1. Replies: 1
    Last Post: 31 Dec 2013, 9:44 AM
  2. [FIXED] Component ID is forgotten after component destroy and re-create
    By gubarez in forum Sencha Touch 2.x: Bugs
    Replies: 5
    Last Post: 26 Jan 2012, 9:14 AM
  3. Replies: 15
    Last Post: 28 Jul 2010, 4:37 AM
  4. Replies: 3
    Last Post: 1 Jun 2010, 8:09 PM
  5. which event fires before user clicks PagingToolbar navigating button?
    By littlegg in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 21 Jun 2007, 5:20 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
  •