PDA

View Full Version : Form cascading select



steve1964
18 Sep 2010, 8:35 AM
I have done a form cascading select with 3 select and everything works fine except for the fact that when the select is updated with the datastore the dropdown is ok but the 1st value of the select remain setted to the previous selected value, i think i'm missing something with refresh, the code:


{
xtype: 'select',
name : 'area',
//label: 'Area',
valueField : 'area',
displayField : 'title',
store : areaStore,
listeners: {
select: {
fn: function() {
categoryStore.proxy.url = 'php/category.php?area=' + urlencode(formDeals.getValues().area);
categoryStore.read();
}
}
}
},
{
xtype: 'select',
name : 'category',
//label: 'Category',
valueField : 'category',
displayField : 'title',
store : categoryStore,
listeners: {
select: {
fn: function() {
subCategoryStore.proxy.url = 'php/subcategory.php?area=' + urlencode(formDeals.getValues().area) + '&category=' + urlencode(formDeals.getValues().category);
subCategoryStore.read();
}
}
}
},
{
xtype: 'select',
name : 'subcategory',
//label: 'Sub Category',
valueField : 'subCategory',
displayField : 'title',
store : subCategoryStore,
}

evant
19 Sep 2010, 7:34 PM
As in the previous thread, change the value once you modify the options.

steve1964
20 Sep 2010, 2:41 AM
Hi Evant, thanks for the response, but i have still a problem i get Uncaught TypeError: Cannot call method 'setValue' of undefined:, how can i reference the field category, it seems to me that the syntax is correct, what i'm missing


var formDeals = new Ext.form.FormPanel ({
//scroll: 'vertical',
layout: 'card',
url : 'php/dummy.php',
standardSubmit : false,
items: [
{
xtype: 'fieldset',
//title: 'Profile Info',
//instructions: 'Please enter profile info above.',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype: 'select',
name: 'distance',
//label: 'Distance',
options: [
{
text: '1 Km',
value: '1'
},
{
text: '5 Km',
value: '5'
},
{
text: '10 Km',
value: '10'
},
{
text: '25 Km',
value: '25'
},
{
text: '50 Km',
value: '50'
},
{
text: '100 Km',
value: '100'
}
]
},
{
xtype: 'select',
name : 'area',
//label: 'Area',
valueField : 'area',
displayField : 'title',
store : areaStore,
listeners: {
select: {
fn: function() {
categoryStore.proxy.url = 'php/category.php?area=' + urlencode(formDeals.getValues().area);
categoryStore.read();
formDeals.items.items.category.setValue(categoryStore.getAt(0).get('category'));
subCategoryStore.proxy.url = 'php/subcategory.php?area=' + urlencode(formDeals.getValues().area) + '&category=' + urlencode(formDeals.getValues().category);
subCategoryStore.read();
}
}
}
},
{
xtype: 'select',
name : 'category',
//label: 'Category',
valueField : 'category',
displayField : 'title',
store : categoryStore,
listeners: {
select: {
fn: function() {
subCategoryStore.proxy.url = 'php/subcategory.php?area=' + urlencode(formDeals.getValues().area) + '&category=' + urlencode(formDeals.getValues().category);
subCategoryStore.read();
}
}
}
},
{
xtype: 'select',
name : 'subcategory',
//label: 'Sub Category',
valueField : 'subCategory',
displayField : 'title',
store : subCategoryStore,
}
]
}
],
listeners : {
submit : function(form, result){
console.log('success', Ext.toArray(arguments));


c2 = tabpanelMain.add({
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{
text: 'Back',
ui: 'back',
handler: function(){
tabpanelMain.setCard(1);
}}
]
}],
items: [{xtype: 'list',
width: 320,
height: 265,
store: dealsStore,
tpl: '<tpl for="."><div class="deals"><strong>{username}</strong>&nbsp;({OnlineStatus}{type})</div></tpl>',
itemSelector: 'div.deals',
singleSelect: true,
grouped: false,
indexBar: false,
loadingText: 'Loading...',
emptyText: 'No Deals found...',
scroll: 'vertical'
}]
});
tabpanelMain.add(c2);

tabpanelMain.setCard(c2, 'slide');
dealsStore.proxy.url = 'php/deals.php?username=' + formL.getValues().username + '&distance=' + formDeals.getValues().distance + '&category=' + formDeals.getValues().category;
dealsStore.read();
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
}
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'center',
},
items: [{
text: 'Search',
ui: 'action',
handler: function() {
formDeals.submit({
waitMsg : {message:'Searching', cls : 'loading'}
});
}
}
]
}
]
});

evant
20 Sep 2010, 2:53 AM
No, it's not correct.

The select is a child of the fieldset, not of the form.



var formDeals = new Ext.form.FormPanel({
//scroll: 'vertical',
layout: 'card',
url: 'php/dummy.php',
standardSubmit: false,
items: [{
xtype: 'fieldset',
//title: 'Profile Info',
//instructions: 'Please enter profile info above.',
itemId: 'fs',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype: 'select',
name: 'distance',
//label: 'Distance',
options: [{
text: '1 Km',
value: '1'
}, {
text: '5 Km',
value: '5'
}, {
text: '10 Km',
value: '10'
}, {
text: '25 Km',
value: '25'
}, {
text: '50 Km',
value: '50'
}, {
text: '100 Km',
value: '100'
}]
}, {
xtype: 'select',
name: 'area',
//label: 'Area',
valueField: 'area',
displayField: 'title',
store: areaStore,
listeners: {
select: {
fn: function(){
categoryStore.proxy.url = 'php/category.php?area=' + urlencode(formDeals.getValues().area);
categoryStore.read();
formDeals.getComponent('fs').getComponent('category').setValue(categoryStore.getAt(0).get('category'));
subCategoryStore.proxy.url = 'php/subcategory.php?area=' + urlencode(formDeals.getValues().area) + '&category=' + urlencode(formDeals.getValues().category);
subCategoryStore.read();
}
}
}
}, {
itemId: 'category',
xtype: 'select',
name: 'category',
//label: 'Category',
valueField: 'category',
displayField: 'title',
store: categoryStore,
listeners: {
select: {
fn: function(){
subCategoryStore.proxy.url = 'php/subcategory.php?area=' + urlencode(formDeals.getValues().area) + '&category=' + urlencode(formDeals.getValues().category);
subCategoryStore.read();
}
}
}
}, {
xtype: 'select',
name: 'subcategory',
//label: 'Sub Category',
valueField: 'subCategory',
displayField: 'title',
store: subCategoryStore,
}]
}],
listeners: {
submit: function(form, result){
console.log('success', Ext.toArray(arguments));


c2 = tabpanelMain.add({
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Back',
ui: 'back',
handler: function(){
tabpanelMain.setCard(1);
}
}]
}],
items: [{
xtype: 'list',
width: 320,
height: 265,
store: dealsStore,
tpl: '<tpl for="."><div class="deals"><strong>{username}</strong>&nbsp;({OnlineStatus}{type})</div></tpl>',
itemSelector: 'div.deals',
singleSelect: true,
grouped: false,
indexBar: false,
loadingText: 'Loading...',
emptyText: 'No Deals found...',
scroll: 'vertical'
}]
});
tabpanelMain.add(c2);

tabpanelMain.setCard(c2, 'slide');
dealsStore.proxy.url = 'php/deals.php?username=' + formL.getValues().username + '&distance=' + formDeals.getValues().distance + '&category=' + formDeals.getValues().category;
dealsStore.read();
},
exception: function(form, result){
console.log('failure', Ext.toArray(arguments));
}
},
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'center',
},
items: [{
text: 'Search',
ui: 'action',
handler: function(){
formDeals.submit({
waitMsg: {
message: 'Searching',
cls: 'loading'
}
});
}
}]
}]
});

steve1964
20 Sep 2010, 3:06 AM
Thanks Evant, quick e precise response as always

steve1964
20 Sep 2010, 3:21 AM
Hi Evant, I get the same error Uncaught TypeError: Cannot call method 'setValue' of undefined


var formDeals = new Ext.form.FormPanel ({
//scroll: 'vertical',
layout: 'card',
url : 'php/dummy.php',
standardSubmit : false,
items: [
{
xtype: 'fieldset',
//title: 'Profile Info',
//instructions: 'Please enter profile info above.',
itemId: 'fs',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype: 'select',
name: 'distance',
//label: 'Distance',
options: [
{
text: '1 Km',
value: '1'
},
{
text: '5 Km',
value: '5'
},
{
text: '10 Km',
value: '10'
},
{
text: '25 Km',
value: '25'
},
{
text: '50 Km',
value: '50'
},
{
text: '100 Km',
value: '100'
}
]
},
{
xtype: 'select',
name : 'area',
//label: 'Area',
valueField : 'area',
displayField : 'title',
store : areaStore,
listeners: {
select: {
fn: function() {
categoryStore.proxy.url = 'php/category.php?area=' + urlencode(formDeals.getValues().area);
categoryStore.read();
//categoryStore.getAt(0).get('category')
formDeals.getComponent('fs').getComponent('category').setValue('Pluto');
subCategoryStore.proxy.url = 'php/subcategory.php?area=' + urlencode(formDeals.getValues().area) + '&category=' + urlencode(formDeals.getValues().category);
subCategoryStore.read();
}
}
}
},
{
xtype: 'select',
name : 'category',
//label: 'Category',
valueField : 'category',
displayField : 'title',
store : categoryStore,
listeners: {
select: {
fn: function() {
subCategoryStore.proxy.url = 'php/subcategory.php?area=' + urlencode(formDeals.getValues().area) + '&category=' + urlencode(formDeals.getValues().category);
subCategoryStore.read();
}
}
}
},
{
xtype: 'select',
name : 'subcategory',
//label: 'Sub Category',
valueField : 'subCategory',
displayField : 'title',
store : subCategoryStore,
}
]
}
],
listeners : {
submit : function(form, result){
console.log('success', Ext.toArray(arguments));


c2 = tabpanelMain.add({
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [
{
text: 'Back',
ui: 'back',
handler: function(){
tabpanelMain.setCard(1);
}}
]
}],
items: [{xtype: 'list',
width: 320,
height: 265,
store: dealsStore,
tpl: '<tpl for="."><div class="deals"><strong>{username}</strong>&nbsp;({OnlineStatus}{type})</div></tpl>',
itemSelector: 'div.deals',
singleSelect: true,
grouped: false,
indexBar: false,
loadingText: 'Loading...',
emptyText: 'No Deals found...',
scroll: 'vertical'
}]
});
tabpanelMain.add(c2);

tabpanelMain.setCard(c2, 'slide');
dealsStore.proxy.url = 'php/deals.php?username=' + formL.getValues().username + '&distance=' + formDeals.getValues().distance + '&category=' + formDeals.getValues().category;
dealsStore.read();
},
exception : function(form, result){
console.log('failure', Ext.toArray(arguments));
}
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'center',
},
items: [{
text: 'Search',
ui: 'action',
handler: function() {
formDeals.submit({
waitMsg : {message:'Searching', cls : 'loading'}
});
}
}
]
}
]
});

evant
20 Sep 2010, 3:28 AM
You didn't put the itemId on category.

steve1964
20 Sep 2010, 3:33 AM
Yes now it woks

steve1964
20 Sep 2010, 4:34 AM
Hi Evant i'm still facing a problem, the select works fine, but when setting the value i still get the value of the previous setted datastore (but the select of category is ok) , is like that the read on datastore is not sync with the next line of code in some way, any hint?



fn: function() {
alert(formDeals.getValues().area);
categoryStore.proxy.url = 'php/category.php?area=' + urlencode(formDeals.getValues().area);
categoryStore.read();
alert(categoryStore.getAt(0).get('category'));
formDeals.getComponent('fs').getComponent('category').setValue(categoryStore.getAt(0).get('category'));
subCategoryStore.proxy.url = 'php/subcategory.php?area=' + urlencode(formDeals.getValues().area) + '&category=' + urlencode(formDeals.getValues().category);
subCategoryStore.read();
}