PDA

View Full Version : Dynamic populating of combo box



sravaniv
16 Jan 2012, 9:58 PM
urgent help needed!!

Hi all,
I'm very new to Ext JS .I hope you help me out.

I have to populate the combobox with names of previous months in an order.Like suppose if I access a page in January ,the items in the combo box should be starting frm December,November,October and so on. till July in the same order.Accessing the page in feb should give me items in combo box starting from Jan,Dec so on till August.I have no idea how to do it .

I'm using MVC architecture.But there is no constraint .I think i can initialize the combox where we declare /add it.I'm using Json.

Please help me :(

kskrumpet
16 Jan 2012, 11:49 PM
You could do this server side (by using a proxy in the store attached to the combo, using the programming language of your choice to return the json) or you could build an array of months in javascript when the page is loaded and then simply pass this array to the stores "data" initialization variable. But I'm not going to write it for you ;)

sravaniv
17 Jan 2012, 1:27 AM
Thanks for taking time to reply.
But can you please explain in detail how to handle it server side, using json?
Pleaseeeeeeeeeeeee?
:s

kskrumpet
17 Jan 2012, 1:52 AM
Ok, I'll help you out, but please remember that the best way to learn is to try to code things yourself. I'll give you an example server side piece of code in the hope that you'll be able to write the ExtJS yourself.

1. Create a combo box with a store that uses the proxy config to point to where on the server you want the combo box to take its values from. You should be able to use the API documentation to figure this bit out (look at Ext.data.Store and Ext.form.field.ComboBox) - note you don't need a model for this to work.

2. You should have a script (php, perl, whatever) at the location you specified in the store's proxy. Exactly what that would look like depends on your programming language. For example, in perl:


#!/usr/bin/perl

use strict;
use warnings;
use JSON;
use CGI;

my @months = qw(null Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec);
my $month = `date +"%m"`;chomp($month);
my @data = ();
for (my $i=0; $i<12; $i++) {
$month = (!--$month) ? 12 : $month;
push(@data, { num => $month, name => $months[$month] });
}

print CGI::header(-charset=>'utf-8').encode_json(\@data);

Note that in the example perl above I've assumed you want the month as an number and as a name; you'll have to configure the store to take these two fields and the combo to use the "num" field as the id value and the "name" field as the display value.

kskrumpet
17 Jan 2012, 1:54 AM
Deleted my last comment - misread your code. Looks like you've got a bit confused. The combo store does indeed specify that it should load the data from the server, so your bit of code doesn't go anywhere - the bit of code you wrote to get a list of month names into dateRangeList would be client side!

If you want to use that last bit of code to generate the month list client side then get rid of the proxy in the store and simply pass the dateRangeList as data to the store (although as it's a pure array you'll have to use a straight array store rather than a json store.

sravaniv
17 Jan 2012, 2:00 AM
Sorry, you posted this after I'd looked at your reply and I didn't see it until after I'd replied. It looks like you want to do this client side then, since you seem to be writing the month array in javascript? Is that right?


Yes,exactly..

kskrumpet
17 Jan 2012, 2:09 AM
We're getting our wires crossed now. :)

Ok, so you said in a previous post you wanted to do this server side, and in the last post you wanted to do it client side - I'll assume client side.

What's the definition for model 'srav.model.DateForm.comboBoxList'?

sravaniv
17 Jan 2012, 2:15 AM
Ext.define('Ponderosa.store.DateForm.comboBoxData', {
extend: 'Ext.data.Store',
model:'Ponderosa.model.DateForm.comboBoxList',
id:'comboData',
//autoLoad: true,
proxy: {
type: 'localstorage',
id:'proxyID'
},
data: dateRangeList
})

something of this sort ?
but my exact problem is where do I write the code for dateRangeList

sravaniv
17 Jan 2012, 2:16 AM
:)

model file is :

Ext.define('srav.model.DateForm.comboBoxList', {
extend: 'Ext.data.Model',
fields : ['timeRange']

});

kskrumpet
17 Jan 2012, 2:49 AM
Ok, well one of the issues is that if you simply subtract up to 6 from the month number, if like today you're in January then your array doesn't stretch back. This is a rather crude way around that, and showing you how it hangs together.


var dt = new Date();
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var dateRangeList = [
{timeRange : "Past 24 hours"},
{timeRange : "Last 7 Days"},
{timeRange : "Last 31 days"},
{timeRange : monthNames[dt.getMonth() + 11]},
{timeRange : monthNames[dt.getMonth() + 10]},
{timeRange : monthNames[dt.getMonth() + 9]},
{timeRange : monthNames[dt.getMonth() + 8]},
{timeRange : monthNames[dt.getMonth() + 7]},
{timeRange : monthNames[dt.getMonth() + 6]},
{timeRange : "Past 6 months"}];

Ext.define('srav.store.DateForm.comboBoxData', {
extend: 'Ext.data.Store',
model:'srav.model.DateForm.comboBoxList',
id:'comboData',
data: dateRangeList
});


Note that I've changed the format of the array to an object (see the example in the API docs for stores), and simply passed the variable into the store data property. Hopefully that'll get you going.

Yes, I am busy today ;)

sravaniv
17 Jan 2012, 5:09 AM
lol

It works to some extent but it says you have defined a Server Proxy but have not supplied it with a url.

I didn't use any server proxies :(
What could be the problem ?

kskrumpet
17 Jan 2012, 5:19 AM
In your store code you did have a proxy attribute - did you remove it (you'll notice I didn't use one at all)? Can't really remote debug without seeing your code again. Another question: are you sure this isn't being generated elsewhere in your code? Use Firebug to get a stack trace on the error - you should be able to find where in your code the error originates.

sravaniv
17 Jan 2012, 5:32 AM
My Store file : ( i have copy pasted whatever u have give :) )

var dt = new Date();
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var dateRangeList = [
{timeRange : "Past 24 hours"},
{timeRange : "Last 7 Days"},
{timeRange : "Last 31 days"},
{timeRange : monthNames[dt.getMonth() + 11]},
{timeRange : monthNames[dt.getMonth() + 10]},
{timeRange : monthNames[dt.getMonth() + 9]},
{timeRange : monthNames[dt.getMonth() + 8]},
{timeRange : monthNames[dt.getMonth() + 7]},
{timeRange : monthNames[dt.getMonth() + 6]},
{timeRange : "Past 6 months"}];

Ext.define('srav.store.DateForm.comboBoxData', {
extend: 'Ext.data.Store',
model:'srav.model.DateForm.comboBoxList',
id:'comboData',
data: dateRangeList
});

my Model file is :

Ext.define('srav.model.DateForm.comboBoxList', {
extend: 'Ext.data.Model',
fields : ['timeRange']

});

sravaniv
17 Jan 2012, 5:51 AM
In your store code you did have a proxy attribute - did you remove it (you'll notice I didn't use one at all)? Can't really remote debug without seeing your code again. Another question: are you sure this isn't being generated elsewhere in your code? Use Firebug to get a stack trace on the error - you should be able to find where in your code the error originates.

Yeah,I'm pretty sure.
I have two stores in my application, in which I use proxy and data is getting loaded without any problem  from that store.
The other one is this, which is generating the problem.
I use firebug also.

kskrumpet
17 Jan 2012, 7:00 AM
Sorry, it works in my world. Hang on... have you got queryMode: 'local' in the combo definition?

sravaniv
17 Jan 2012, 12:43 PM
Sorry, it works in my world. Hang on... have you got queryMode: 'local' in the combo definition?

No,I will give it a try :)

sravaniv
17 Jan 2012, 10:37 PM
bingo!! got it !!
thanks a ton!!! :)