PDA

View Full Version : Need help in selectfield



sapna_kotresh
27 Apr 2011, 11:41 PM
Hi All,

In order to set the default value of selectfield I need to fetch the first value of store, in this case Blue(color). When I give store.getAt(0) it gives undefined, can any one please figure out where am going wrong. Below is my code.

<script type="text/javascript">

Ext.setup({
onReady: function() {

Ext.regModel('Color', {
fields: [
{name: 'color', type: 'string'},
{name: 'value', type: 'int'},
]
});

var combostore = new Ext.data.Store({
id: 'colorid',
model: 'Color',
autoLoad: true,
proxy: {
type: 'ajax',
url:'combodata.php',
reader: {
type: 'json'
}
}
});

new Ext.Panel({
fullscreen: true,
style: "background-color: #fee"
})
var form = new Ext.form.FormPanel({
renderTo: document.body,
layout: {
type: 'vbox',
align: 'left'
},
items: [{
items: [
{
xtype: 'selectfield',
id: 'combofieldid',
name: 'combofield',
label: 'Colors: ',
store: combostore,
width: 400,
valueField: 'value',
displayField: 'color',
listeners: {
afterrender:{
fn: function(combo, value){
var store = Ext.getStore(combostore);
//resulting in undefined
console.log(store.getAt(0));
//resulting in []
console.log(store.collect('color'));
//need to set the default value color Blue instead of 1
this.setValue(1);
}
}
}
}
]
}]
})

}
});
</script>

-----------------

combodata.php

<?php

$blue = array( color =>'Blue', value=> 1);
$green = array( color =>'Green', value=> 2);
$white = array( color =>'White', value=> 3);

$colors = array($blue,$green, $white);
echo json_encode($colors);

?>

realjax
28 Apr 2011, 12:38 AM
First make sure your store has actually loaded correctly, store.getAt(0) should not return undefined. It should return a record (from which you then have to retrieve the color field). So I suspect your store is not populated. Do a console.log(store) and check the objects data.

Also, Ext.getStore() expects the store's ID as the parameter, not an assigned variable name.
Give your store a storeId: 'myStore' and then do Ext.getStore('myStore').

Finally, next time wrap your code in a code tag when you post it here. Makes it a bit easier to read.

sapna_kotresh
28 Apr 2011, 1:10 AM
Sorry, I was rearranging the codes and on edit it was not giving an option of html wrap, please refer my below reply.

sapna_kotresh
28 Apr 2011, 1:23 AM
Thank you for the reply.

When I execute console.log(store), object->data->items->0->data color "Blue" value 1 is displayed

object->data->items->1->data color "Green" value 2 and so on. So we can conclude that store is getting loaded properly

I had tried giving store id(in the code 'colorid') as a parameter to Ext.getStore(), same thing resulted "undefined".

sorry to paste it unwrapped, please check out the below wrapped code.



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sencha touch form panel</title>

<!-- Sencha Touch JS -->
<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>

<!-- Sencha Touch CSS -->
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />

</head>
<body></body>
</html>


<script type="text/javascript">

Ext.setup({
onReady: function() {

Ext.regModel('Color', {
fields: [
{name: 'color', type: 'string'},
{name: 'value', type: 'int'},
]
});

var combostore = new Ext.data.Store({
id: 'colorid',
model: 'Color',
autoLoad: true,
proxy: {
type: 'ajax',
url:'combodata.php',
reader: {
type: 'json'
}
}
});

new Ext.Panel({
fullscreen: true,
style: "background-color: #fee"
})

var form = new Ext.form.FormPanel({
renderTo: document.body,
layout: {
type: 'vbox',
align: 'left'
},
items: [{
items: [
{
xtype: 'selectfield',
id: 'combofieldid',
name: 'combofield',
label: 'Colors: ',
store: combostore,
width: 400,
valueField: 'value',
displayField: 'color',
listeners: {
afterrender:{
fn: function(combo, value){
var store = Ext.getStore('colorid');
//resulting in undefined
console.log(store);
//resulting in []
// console.log(store.collect('color'));
//need to set the default value color Blue instead of 1
this.setValue(1);
}
}
}
}
]
}]
})

}
});
</script>



----------------------------------------
<?php

$blue = array( color =>'Blue', value=> 1);
$green = array( color =>'Green', value=> 2);
$white = array( color =>'White', value=> 3);

$colors = array($blue,$green, $white);
echo json_encode($colors);

?>


It will be really helpful if you could figure out the problem.
Thanks in advance.

realjax
28 Apr 2011, 1:49 AM
'storeId'

not

'id'

sapna_kotresh
28 Apr 2011, 1:55 AM
ok, I made the change from id to storeId (code bit - storeId: 'colorid'), still store.getAt(0) is undefined.

sapna_kotresh
28 Apr 2011, 2:07 AM
I guess, store is getting identified properly with id/storeId since when I print the store on console it's showing the object with data. If I give store.currentPage/store.pageSize, it's giving me the result as 1 and 25 respectively, but store.getAt(0)/store.collect('color') is undefined/empty

realjax
28 Apr 2011, 2:09 AM
Because your store is not loaded yet at the time you fire the getAt(0).
It's asynchronous, remember ?

sapna_kotresh
28 Apr 2011, 2:12 AM
hmmm, I thought afterrender listener should be good to load the default value, any suggestions that what I can try?.

realjax
28 Apr 2011, 2:22 AM
You need to be sure your store is loaded before you can (successfully) read its records. Setting a listener on the store for the load event is one way:




new Ext.data.Store({
....
listeners: {
Load: function(){
console.log('Yeeeah! I\'m loaded!')
// or start your form here :)
}
}

})

sapna_kotresh
28 Apr 2011, 2:41 AM
Thank you sooo much for your timely reply and suggestion. I could solve the problem on your guideliness. Below code works for me.


combostore.load(function(records, operation, success) {
var combofield = Ext.getCmp('combofieldid');
combofield.setValue(this.collect('color')[0]);
});

realjax
28 Apr 2011, 2:58 AM
you're welcome.

riyaad
1 Sep 2011, 3:06 AM
Hi sapna_kotresh

Would you mind posting your entire solution?
I'd like to learn from this where possible.

Thanks
Riyaad