PDA

View Full Version : filtering combo box



webarnie
24 Feb 2011, 9:24 AM
I have a screen with a combo box. The values in the combo box will vary based on whether I am processing a credit card or debit card. I set a filter on the store prior to rendering the page, however, the filter appears to have no affect and the items in the drop down. How can you filter a combo drop down? I have reviewed other posts and say it works and point to the combo example. Reviewing the samples listed, I do not see any filtering going on. How do you filter a combo box?

json store


{"success": "true", "msg": "", "total": "4", "rows":
[
{"displayName": "American Express", "hiddenName": "American Express", "paymentMethod": "Credit"},
{"displayName": "Discover", "hiddenName": "Discover", "paymentMethod": "Credit"},
{"displayName": "Master", "hiddenName": "Master", "paymentMethod": "Credit"},
{"displayName": "Visa", "hiddenName": "Visa", "paymentMethod": "Credit"},
{"displayName": "Master", "hiddenName": "Master", "paymentMethod": "Debit"},
{"displayName": "Visa", "hiddenName": "Visa", "paymentMethod": "Debit"}
]
}


code to setup filter


Ext.getCmp("creditCardType").store.filter('paymentMethod', filterValue);


elements define with Extjs designer



/*
* File: creditCardInput.ui.js
* Date: Thu Feb 24 2011 12:14:18 GMT-0500 (Eastern Standard Time)
*
* This file was generated by Ext Designer version xds-1.0.3.2.
* http://www.extjs.com/products/designer/
*
* This file will be auto-generated each and everytime you export.
*
* Do NOT hand edit this file.
*/

creditCardInputUi = Ext.extend(Ext.Window, {
title: 'Credit Card Input',
width: 441,
height: 424,
layout: 'absolute',
closable: false,
resizable: false,
modal: true,
id: 'creditCardInput',
initComponent: function() {
this.items = [
{
xtype: 'label',
text: 'Payment Method:',
x: 30,
y: 20,
width: 90
},
{
xtype: 'label',
text: 'Card Type:',
x: 75,
y: 55,
width: 60
},
{
xtype: 'label',
text: '',
x: 140,
y: 20,
width: 190,
ref: 'paymentMethod',
id: 'paymentMethod'
},
{
xtype: 'label',
text: 'Card Holders\'s Full Name:',
x: 5,
y: 175
},
{
xtype: 'label',
text: 'Zip Code:',
x: 80,
y: 215
},
{
xtype: 'label',
text: 'Secuirty Code:',
x: 55,
y: 255
},
{
xtype: 'label',
text: 'Expiration Date:',
x: 50,
y: 135,
width: 90
},
{
xtype: 'label',
text: 'Card Number:',
x: 60,
y: 95,
id: ''
},
{
xtype: 'label',
text: 'Nickname:',
x: 75,
y: 305,
width: 50
},
{
xtype: 'textfield',
x: 140,
y: 170,
width: 210,
name: 'name',
allowBlank: false,
tabIndex: 4,
ref: 'name',
id: 'name'
},
{
xtype: 'textfield',
x: 140,
y: 210,
width: 140,
name: 'zipCode',
allowBlank: false,
tabIndex: 5,
ref: 'zipCode',
id: 'zipCode'
},
{
xtype: 'textfield',
x: 140,
y: 250,
width: 80,
name: 'routingNumber',
allowBlank: false,
tabIndex: 5,
id: 'securityCode'
},
{
xtype: 'textfield',
x: 140,
y: 90,
width: 210,
name: 'cardNumber',
allowBlank: false,
tabIndex: 2,
ref: 'cardNumber',
id: 'cardNumber'
},
{
xtype: 'textfield',
x: 140,
y: 300,
width: 210,
tabIndex: 6,
ref: 'nickName',
id: 'nickName'
},
{
xtype: 'combo',
x: 140,
y: 50,
allowBlank: false,
blankText: 'Select Credit Card Type',
store: 'creditCardTypeStore',
hiddenValue: '',
title: '',
typeAhead: true,
mode: 'local',
hiddenName: 'hiddenName',
displayField: 'displayName',
width: 140,
tabIndex: 1,
triggerAction: 'all',
ref: 'creditCardType',
id: 'creditCardType'
},
{
xtype: 'datefield',
x: 140,
y: 130,
width: 140,
allowBlank: false,
tabIndex: 3,
name: 'expirationDate',
ref: 'expirationDate'
}
];
this.bbar = {
xtype: 'toolbar',
buttonAlign: 'center',
height: 30,
id: 'bankInformationInputToolbar',
items: [
{
xtype: 'button',
text: 'Cancel',
width: 90,
height: 32,
scale: 'medium',
ref: '../cancelButtonCreditCardInput',
id: 'cancelButtonCreditCardInput'
},
{
xtype: 'button',
text: 'Process',
width: 90,
height: 32,
scale: 'medium',
ref: '../processButtonCreditCardInput',
id: 'processButtonCreditCardInput'
}
]
};
creditCardInputUi.superclass.initComponent.call(this);
}
});