Ext js combo not working properly

Question

I'm new in ExtJS and I'm trying to display a window with a combo, a cancel and an OK button but the combo does not seem to be working properly: It's not showing the label and when I click the picker (or the trigger) it does not show the list.

I need the combo to either accept free text and selected values but I don't know what I'm doing wrong. I went over Sencha api and forums but I can't work this out.

I hope you guys have a solution for this. Thanks and sorry if my English is not good enough.

 function new_filter()
  {     
        var ds_filter2 = new Ext.data.JsonStore({
        url: 'forms-combobox-data-filters.php?user='+user_id,
        fields: ['id', 'name'],
        autoLoad: true/*,
        totalProperty: "results"*/

});

    var dlg = new Ext.Window(
    {
        title:  'Save Current Settings as a Filter',
        id: 'frmFilter',
        width: 350,
        y: 200,
        height: 120,
        minWidth: 350,
        minHeight: 100,
        iconCls: 'save',
        bodyStyle:'padding:0px 0px 0px 0px; background-color:#F5F5F5;',
        modal: true,
        resizable: false,
        maximizable: false,
        draggable:false,
        closable: true,
        closeAction: 'close',
        hideMode: "offsets",
        constrainHeader: true,
        //autoLoad: { url : 'filter_form2.php', scripts: true},
        keys: [
                { key: [Ext.EventObject.ENTER], handler: function() {
                        create_new_filter();
                    }
                },
                { key: [Ext.EventObject.ESCAPE], handler: function() {
                        dlg.close();
                    }
                }],

        buttons:[
                    {
                        text    : 'OK',
                        handler: function() 
                        {
                            var selectedValue = Ext.getCmp('combo-new-filter').value;   //selectedValue => Nombre                                                   
                            var rec = ds_filter2.getById(selectedValue);                    //rec => ID                                                                 
                            //alert('rec: '+rec+'\nselected value: '+selectedValue);
                            if (rec == undefined ) //si el valor seleccionado no se encuentra en combo
                            {
                                create_new_filter(selectedValue);
                                dlg.close();
                            }
                            else

                            {
                                //alertar con el message box si se desea sobre escrbir el filtro
                                //ok---> grabar
                                //cancel--->cancelar
                                var selected_text = rec.get('name');
                                var id = rec.get('id'); 
                                //alert("selected text: "+selected_text);
                                Ext.MessageBox.confirm('Confirm','Are you sure you want to overwrite this filter "'+selected_text+'"?', function(btn)
                                {

                                    if (btn=='yes')

                                    {   

                                        var url = 'deleteFilter.php?filter='+id;        
                                        var mnmxmlhttp = Array ();
                                        mnmxmlhttp = new myXMLHttpRequest ();
                                        if (mnmxmlhttp) 
                                        {
                                            mnmxmlhttp.open ("POST", url, true);
                                            mnmxmlhttp.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded');
                                            mnmxmlhttp.send ("");
                                            mnmxmlhttp.onreadystatechange = function () 
                                            {
                                                if (mnmxmlhttp.readyState == 4) 
                                                {  
                                                    create_new_filter(selected_text);   
                                                }
                                            }


                                        }

                                    }


                                });

                            }
                        }

                    },
                    {
                        text    : 'Cancel',
                        handler: function() {
                            dlg.close();
                        }

                    }
                ],

        items:[
                /*{
                    xtype: 'label',
                    forId: 'myFieldId',
                    text: 'Name of saved filter:',
                },*/
                {

                    id:'combo-new-filter',
                    labelAlign: 'left',
                    fieldLabel: 'Filter Name:',
                    xtype: 'combo',                 
                    store: ds_filter2,
                    //queryMode: 'local',                       
                    displayField:'name',
                    valueField: 'id',
                    //editable: true,
                    x: 110,
                    y: 20,
                    listeners:  {
                                    /*beforerender: function(combo){  
                                    combo.setValue("Select saved filter to apply");
                                    },
                                    select:{fn:function(combo, value) {
                                            if (combo.getValue()>0){onSelectFilter(combo.getValue());}

                                            }
                                    }*/

                                }

                }
        ]

    });
dlg.show(); 

}

Answer 1

Your window needs to have the layout: 'form' configuration. In order to display fields, combos, etc, the layout that contains them needs to be a form one.