Results 1 to 3 of 3

Thread: Combo inside a button in a toolbar

  1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    157

    Default Combo inside a button in a toolbar

    I'm having an issue with this code:
    Code:
    Ext.onReady(function(){
        new Ext.Panel({
            renderTo: document.body,
            bbar: {
                xtype:"toolbar",
                width: 1500,
                items:[{
                    xtype:"button",
                    text:"Nuevo",
                    menu: {
                        xtype:"menu",
                        items:[{
                            xtype: 'textfield',
                            width: 500
                        },
                        {
                            xtype:"combo",
                            editable:true,
                            forceSelection:false,
                            valueField: 'id',
                            displayField: 'name',
                            mode:"local",
                            triggerAction: 'all',
                            lastQuery: '',
                            store: new Ext.data.JsonStore({
                                autoLoad: true,
                                url: 'data.json'
                            })
                        }]
                    }
                }]
            }
        });
    });
    In chrome when I click in a value of the combo, the menu closes, but the item isn't selected (combo stays blank). In firefox the behaviour is erratic, it works but not all of the times, if you change the value a lot of times some times it doesn't work.
    Besides, if I put the textfield after the combo, the combo list appears behind the textfield.
    Oh, if I select it with the keyboard, the value gets selected and the menu doesn't get closed.
    Anyone can help??

    data.json:
    Code:
    {"success":true,"root":[{"name":"One","id":1},{"name":"Two","id":2},{"name":"Three","id":3},{"name":"Four","id":4}],"metaData":{"totalProperty":"results","successProperty":"success","root":"root","id":"id","fields":[{"name":"id","type":"string"},{"name":"name","type":"string"}]},"results":4}

  2. #2
    Touch Premium Member
    Join Date
    Sep 2008
    Location
    Orange County, CA, USA
    Posts
    186

    Default Test Case

    I'm not sure if it's the developers or the support or the general community that loves implicit structures. Stop using xtype and braces to create components. Create them explicitly and use DI to create your interfaces, you won't have these problems.

    This works correctly. Please note, no braces unless they are within the explicit definition of a component or function. xType requires a finer understanding of what's going on. Use it only when necessary (generic or hybrid components).

    Using the Ext code:
    Code:
    Ext.onReady(function(){
        var myPanel = new Ext.Panel({
            bbar: new Ext.Toolbar({ 
                width: 1500
                ,items:[
                    new Ext.Button({
                        text:"Nuevo"
                        ,menu: new Ext.menu.Menu({
                            items:[
                                new Ext.form.TextField({
                                    width: 500
                                })
                                ,new Ext.form.ComboBox({
                                    editable:true
                                    ,forceSelection:false
                                    ,valueField: 'id'
                                    ,displayField: 'name'
                                    ,mode:"local"
                                    ,triggerAction: 'all'
                                    ,lastQuery: ''
                                    ,store: new Ext.data.JsonStore({
                                        autoLoad: true
                                        ,url: 'test.php'
                                    })
                                })
                            ]
                        })
                    })
                ]
            })
        });
        myPanel.render("testDiv");
    });
    Using the backend response (from test.php):
    Code:
    {
        "success":true,
        "root":[{
                "name":"One",
                "id":1
            },{
                "name":"Two",
                "id":2
            },{
                "name":"Three",
                "id":3
            },{
                "name":"Four",
                "id":4
        }],
        "metaData":{
            "totalProperty":"results",
            "successProperty":"success",
            "root":"root",
            "id":"id",
            "fields":[{
                    "name":"id",
                    "type":"string"
                },{
                    "name":"name",
                    "type":"string"
            }]
        },
        "results":4
    }

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    157

    Default

    Jack9, I still have the same problems with your code.
    I didn't mention I'm under linux, I'll try to test it in windows as well to check if the problem occurs there too.
    I don't get why you say I should not use (or abuse) the xtypes, I don't see any difference between your code and mine, they should both do exactly the same thing (and as far as I know, they do).
    Any other suggestions??

Posting Permissions

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