PDA

View Full Version : ComboBox not loading?



lukefowell89
23 Dec 2010, 7:34 AM
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?


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);

darthwes
23 Dec 2010, 8:13 AM
this.chartAxis.columns doesn't seem to be defined.



new chartWindow({
chartAxis: {
columns: [{
id: 1,
header: 'Axis 1'
},
{
id: 2,
header: 'Axis 2'
}]
}
}).show();


Works for me, loads up the combos properly.

lukefowell89
23 Dec 2010, 8:21 AM
Thanks for taking a look!

I instatiate chartWindow by using this: -


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

darthwes
23 Dec 2010, 1:28 PM
What version are you running?


alert(Ext.version);


The combos have no drop downs or the combos have drop downs but no default values selected?

lukefowell89
24 Dec 2010, 1:10 AM
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!