PDA

View Full Version : Combo Box



amakowski
28 Aug 2014, 11:27 AM
In front of the Reload Data I want to add a combo box in the tool bar.
Options 30, 60, 90, begining. So i want to be able to select an option and hit reload data to refresh graph.
Also how can get the value of the combo box to send via java script.

I guess this is a two part question.
50161
(screen shot not from my code)

my current tool bar code.
var win = Ext.create('widget.panel', {
width : 1000,
height : 600,
hidden : false,
maximizable : true,
title : 'Performance - ' + p_CurrentReportName,
renderTo : 'perfchart',
layout : 'fit',
tbar: [
{
//add combobox here
},
{
text: 'Reload Data',
handler: function() {
// Add a short delay to prevent fast sequential clicks
window.loadTask.delay(100, function() {
performanceChartDataStore.loadData(generatePerformanceData());
});
}
},
{
enableToggle: true,
pressed: true,
text: 'Animate',
toggleHandler: function(btn, pressed) {
performanceChart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
}
}
],
items: performanceChart
});

scottmartin
2 Sep 2014, 4:53 AM
Are you asking how to add a combo to the toolbar? Just add a new items an specify the xtype.

amakowski
3 Sep 2014, 9:23 AM
I know I can make it this way. I am not sure how to just add it to the place I want it without making it a var and importing it.

//combo box
var dateRange = Ext.create('Ext.form.field.ComboBox', {
hideLabel: true,
store:
{
fields: ['abbr', 'name'],
data : [
{"abbr":"30", "name":"30 days"},
{"abbr":"60", "name":"60 days"},
{"abbr":"90", "name":"90 days"},
{"abbr":"0", "name":"Begining of time"}
]
},
displayField: 'name',
valueField: 'abbr',
emptyText: 'Select a Date Range...'
});

scottmartin
3 Sep 2014, 9:57 AM
Something like this?



Ext.onReady(function() {

Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width: 450,
items: [{
text: 'Save Chart'
}, {
xtype: 'combo',
//fieldLabel: '',
displayField: 'name',
valueField: 'abbr',
emptyText: 'Select a Date Range...',

store: {
fields: ['abbr', 'name'],
data: [{
"abbr": "30",
"name": "30 days"
}, {
"abbr": "60",
"name": "60 days"
}, {
"abbr": "90",
"name": "90 days"
}, {
"abbr": "0",
"name": "Begining of time"
}]
},

},{
text: 'Reload Data'
},{
text: 'Animate'
}]
});

});


Or define your own combo class and use that xtype instead combo default.

Scott.

amakowski
3 Sep 2014, 10:31 AM
Yes that it. Thank you. I guess the last thing I need to do was get the value of the combobox and pass it to the reload.

When the combo was the var dataRange I was able to do dateRange.getValue()

Its in the 'Reload Data' if its not possible i will go back to how it was.



var win = Ext.create('widget.panel', {
width : 1000,
height : 600,
hidden : false,
maximizable : true,
title : 'Performance - ' + p_CurrentReportName,
renderTo : 'perfchart',
layout : 'fit',
tbar: [
{
xtype: 'combo',
hideLabel: true,
store:
{
fields: ['abbr', 'name'],
data : [
{"abbr":"30", "name":"30 days"},
{"abbr":"60", "name":"60 days"},
{"abbr":"90", "name":"90 days"},
{"abbr":"0", "name":"Begining of time"}
]
},
displayField: 'name',
valueField: 'abbr',
emptyText: 'Select a Date Range...'
}
,
{
text: 'Reload Data',
handler: function() {
// Add a short delay to prevent fast sequential clicks
window.loadTask.delay(100, function() {
alert(dateRange.getValue());//test code before passing to function below
getPerformanceDataStore();
});
}
},
{
enableToggle: true,
pressed: true,
text: 'Animate',
toggleHandler: function(btn, pressed) {
performanceChart.animate = pressed ? { easing: 'ease', duration: 500 } : false;
}
}
],
items: performanceChart
});

amakowski
4 Sep 2014, 12:49 PM
Found out how.
Ext.getCmp('dateRange').getValue()

lets me get the value of the combobox.



tbar: [
{
xtype: 'combo',
id: 'dateRange',
fieldLabel: 'Select a Date Range',
labelWidth: 110,
store: {
fields: ['abbr', 'name'],
data : [
{"abbr":"30", "name":"30 days"},
{"abbr":"60", "name":"60 days"},
{"abbr":"90", "name":"90 days"},
{"abbr":"0", "name":"Begining of time"}
]
},
displayField: 'name',
valueField: 'abbr',
value: "30"// default value
},
{
text: 'Reload Data',
handler: function() {
// Add a short delay to prevent fast sequential clicks
window.loadTask.delay(100, function() {
var range = Ext.getCmp('dateRange').getValue();
getPerformanceDataStore(range);
});
}
},


I am very new to sencha charts thank you for all the help.