Results 1 to 6 of 6

Thread: Combo list in form not shown following loadRecord?

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    23

    Question Combo list in form not shown following loadRecord?

    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




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

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    You should not use Ext.create outside Ext.application like that.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    224
    Answers
    13

    Default

    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)

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    Quote Originally Posted by dedoz View Post
    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.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    23

    Question tried queryMode 'remote', autoLoad: false - problem persists

    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




    Code:
    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}

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    23

    Question Combo list in form not shown on setValue - possibly overwritten by the store load

    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

Posting Permissions

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