Results 1 to 5 of 5

Thread: ComboBox not loading?

  1. #1
    Sencha User lukefowell89's Avatar
    Join Date
    Nov 2010
    Location
    Dorset, UK
    Posts
    262

    Default ComboBox not loading?

    Having a problem loading a combo box, basically I am populated a store with a list of the columns in a grid, these will act as axis so I can create a chart later on. The data is populated in the store correctly, all the display/value fields and records etc etc all match up, and the populated store will populate a grid correct, but will show nothing in the combobox.

    Probably something really simple but can someone have a quick check of my code to why the combobox isnt loading?

    Code:
    chartWindow = Ext.extend(Ext.Window, {
        constructor: function(config) {
            
            this.axisStore = new Ext.data.SimpleStore({
                storeId: 'axisStore',
                fields: [
                    {name: 'id'},
                    {name: 'header'}
                ]
            });
                
            var chartStore = new Ext.data.ArrayStore({
                fields: [
                    {name: 'chart_name'},
                    {name: 'chart_id'}
                ],
                data: [['Pie Chart', 1],['Bar Chart', 2],['Column Chart', 1],['Line Chart', 1]]
            });
        
            var xAxisCombo = new Ext.form.ComboBox({
                mode: 'local',
                triggerAction: 'all',
                name: 'xAxis',
                valueField: 'id',
                displayField: 'header',
                store: this.axisStore
            });
            
            var yAxisCombo = new Ext.form.ComboBox({
                mode: 'local',
                triggerAction: 'all',
                name: 'yAxis',
                valueField: 'id',
                displayField: 'header',
                store: this.axisStore
            });
            
            var chartTypes = new Ext.form.ComboBox({
                mode: 'local',
                valueField: 'chart_id',
                triggerAction: 'all',
                name: 'chartTypes',
                displayField: 'chart_name',
                store: chartStore
            });
            
            var previewPane = new Ext.Panel({
                id: 'previewPane',
                height: 330,
                width: 450,
                items: [{
                    xtype: 'grid',
                    autoHeight: true,
                    store: this.axisStore,
                    colModel: new Ext.grid.ColumnModel({
                        columns: [
                            {header: "Col 1"},
                            {header: "Col 2"}
                        ]
                    })
                }]
            });
            
            var controlPanel = new Ext.Panel({
                region: 'west',
                title: 'Form Options',
                width: 160,
                height: 200,
                layout: 'vbox',
                frame: true,
                border: false,
                defaults: {width: 145, style: {marginBottom: '5px'}},
                items: [
                    {xtype: 'label', text: 'X-Axis:'},
                    xAxisCombo,
                    {xtype: 'label', text: 'Y-Axis:'},
                    yAxisCombo,
                    {xtype: 'label', text: 'Chart Type:'},
                    chartTypes,
                    {
                        xtype: 'button',
                        text: 'Create Chart',
                        style: {marginTop: '5px'},
                        handler: function() {
                            
                        }
                    }
                ]
            });
            
            var chartPanel = new Ext.Panel({
                region: 'center',
                minWidth: 300,
                border: false,
                cls: 'chartPreviewBg',
                items: previewPane
            });
            
                config = Ext.apply({
                layout         : 'border',
                width        : 640,
                title        : 'Create New Chart',
                cls            : 'chartWindow',
                constrain   : true,
                height        : 400,
                resizable   : false,
                items        : [controlPanel, chartPanel]
            }, config);
    
        chartWindow.superclass.constructor.call(this, config);
    
        },
        
        initComponent: function(){
            chartWindow.superclass.initComponent.call(this, arguments);
            
            var axisRecord = new Ext.data.Record.create([
                {name:'id'},
                {name:'header'}
            ]);
            
            Ext.each(this.chartAxis.columns, function(column){
                if(column.id != 'numberer')
                {
                    var axis = new axisRecord(
                        {
                            id: column.id,
                            header: column.header
                        }
                    );
                    this.axisStore.add(axis);
                }
            },this);
            
        },
        
        render: function(){
            chartWindow.superclass.render.apply(this, arguments);
        }
    });
    
    Ext.reg('chartwindow', chartWindow);
    My Web Design, Development & Internet Marketing Blog: http://www.aztec-online.com
    Read My Review of the latest Ext JS Framework:Ext JS 4 Review

  2. #2

    Default

    this.chartAxis.columns doesn't seem to be defined.

    Code:
    new chartWindow({
        chartAxis: {
            columns: [{
                id: 1,
                header: 'Axis 1'
            },
            {
                id: 2,
                header: 'Axis 2'
            }]
        }
    }).show();
    Works for me, loads up the combos properly.
    Wes

  3. #3
    Sencha User lukefowell89's Avatar
    Join Date
    Nov 2010
    Location
    Dorset, UK
    Posts
    262

    Default

    Thanks for taking a look!

    I instatiate chartWindow by using this: -

    Code:
    this.contextMenu = [{
                text: 'Add Column',
                iconCls: 'new-query',
                scope: this,
                handler: function()
                {
                    var columnNo = this.items.items[0].colModel.getColumnCount();
                    this.items.items[0].addColumn({name: 'C'+columnNo},{header: columnNo});
                }
            },{
                text: 'Add Row',
                iconCls: 'new-query',
                scope: this,
                handler: function()
                {
                    var rec = Ext.data.Record.create(this.defaultColumns);
                    this.store.add(new rec);
                }
            },{
                text: 'Delete Column',
                iconCls: 'formula-builder-cancel',
                scope: this,
                handler: function()
                {
                    
                }
            },{
                text: 'Delete Row',
                iconCls: 'formula-builder-cancel',
                scope: this,
                handler: function()
                {
                    
                }
            },{
                text: 'Create Chart',
                iconCls: 'new-chart',
                scope: this,
                handler: function()
                {
                    var chartThing = new chartWindow({
                        id: 'chart1',
                        chartData: this.component.store,
                        chartAxis: this.component.colModel
                    }).show();
                }
            }];
    chartAxis is the column model for a grid that I have selected. For me the comboboxes dont load at all :S Weird
    My Web Design, Development & Internet Marketing Blog: http://www.aztec-online.com
    Read My Review of the latest Ext JS Framework:Ext JS 4 Review

  4. #4

    Default

    What version are you running?
    Code:
    alert(Ext.version);
    The combos have no drop downs or the combos have drop downs but no default values selected?
    Wes

  5. #5
    Sencha User lukefowell89's Avatar
    Join Date
    Nov 2010
    Location
    Dorset, UK
    Posts
    262

    Default

    Found out what it was, something stupid really, I have selectable films on the grid below with a z-index of 10,000 which were showing above my window, which was annoying. So I had set the windows zindex to 12000, but the problem was that the drop down area from the combo boxes had a lower z-index and was being hidden behind the window!

    Thanks for your help, if it wasnt for the test you did and I replicated, I wouldnt have found out!
    My Web Design, Development & Internet Marketing Blog: http://www.aztec-online.com
    Read My Review of the latest Ext JS Framework:Ext JS 4 Review

Similar Threads

  1. combobox - loading
    By Bleak in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 1 Sep 2010, 6:55 AM
  2. combobox loading
    By stevieke in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 6 Apr 2009, 5:37 AM
  3. combobox loading..
    By abhilashsastry in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 29 Jan 2009, 12:12 PM
  4. loading 2nd combobox depending on the item selected in 1st combobox
    By basavarajkoti in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 7 Jan 2008, 5:20 AM
  5. loading comboBox
    By cooldude87801 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 7 Jan 2008, 1:51 AM

Posting Permissions

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