Ext之级联Combox

/**
 * 定义store,在baseParams中定义参数，请求服务端数据，返回数据源
 */
var modelsStore = new Ext.data.JsonStore({
			url : 'cars-makes-models.action',
			baseParams : {
				cmd : 'models'
			},
			root : 'models',
			fields : ['id', 'name']
		});
/**
 * 
 * makeCombo 父类combox 控制自身store的加载， 以及modelStore的加载 通过select触发事件，去级联modelStore
 */
var MakeCombo = {
	xtype : 'combo',
	store : makestore,
	displayField : 'name',
	valueField : 'id',
	typeAhead : true,
	editable : false,
	mode : 'remote',
	forceSelection : true,
	triggerAction : 'all',
	fieldLabel : 'Make',
	emptyText : 'Select a make...',
	selectOnFocus : true,
	anchor : '95%',
	store : new Ext.data.JsonStore({
				url : 'cars-makes-models.action',
				baseParams : {
					cmd : 'makes'
				},
				root : 'makes',
				fields : ['id', 'name']
			}),
	listeners : {
		'select' : function(cmb, rec, idx) {
			// 得到models-combo组件
			modelsCbx = Ext.getCmp('models-combo');
			// 清除数据
			modelsCbx.clearValue();
			// 通过传入自身参数使modelStore重新加载
			modelsCbx.store.load({
						params : {
							'makeId' : this.getValue()
						}
					});
			// 启用组件
			modelsCbx.enable();
		}
	}
};
/**
 * 子类combox 注意这里的mode是定义为local(按常理是remote) 原因是不让这个组件在没有级联的关系下加载数据
 */
var ModelCombo = {
	xtype : 'combo',
	id : 'models-combo',
	store : modelsStore,
	displayField : 'name',
	valueField : 'id',
	typeAhead : true,
	editable : false,
	mode : 'local',
	forceSelection : true,
	triggerAction : 'all',
	fieldLabel : 'Model',
	emptyText : 'Select a model...',
	selectOnFocus : true,
	disabled : true,
	anchor : '95%'
};
/**
 * 初始化面板
 */
Ext.onReady(function() {
			var newCarForm = new Ext.FormPanel({
						frame : true,
						title : 'Car Reviews',
						bodyStyle : 'padding:5px',
						width : 420,
						id : 'make-selector-frm',
						url : 'new-car.php',
						items : [MakeCombo, ModelCombo]
					});
			newCarForm.render(document.body);
		});

评论

1 楼 风雨故都 2011-04-02  

在action中的代码怎么实现的？