Ext.form.ComboBox 后台取值 动态加载 ext5.0.0

时间:2023-03-08 17:36:43

我用的extjs是5.0.0版本的。

  请注意:如果这里没有的combobox相关内容,这里一定有。

开始的时候keyup事件取到的数据就是放不到ComboBox中,放全局变量也不好用。最后大神出手帮忙解决了这个问题~~~

查看API的时候,对象没有找对,以至于方法事件都用不了。

总结出来方便查阅~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

输入号码结束--触发事件---从后台取数据---将数据放到下拉列表中

Ext.form.ComboBox  后台取值 动态加载    ext5.0.0

输入手机号

// 输入电话号
var $inpTel = new Ext.form.TextField({
fieldLabel: '电话号',
labelWidth: 70,
regex: /^[1]\d{10}$/,
enableKeyEvents: true,
margin: "10 10 0 10"
}); // 显示号码状态
var $telState = new Ext.form.Label({
text: '',
margin: '0 0 0 85',
style: {
color: 'red'
}
}); // 获取产品列表的参数
var params = {
'phone': $inpTel.getValue()
}; var $comboboxProductList; // 产品列表数据
var remoteStore = Ext.create('Ext.data.Store', {
proxy: ({
type: "ajax",
method: "POST",
url:-------路径--------,
reader: {
type: 'json',
successProperty:"success",
rootProperty: "data",
transform: {
fn: function(data) {
var code = data["code"];
var message = data["message"];
var data = data["data"];
//console.dir(code);
//console.dir(message);
if (code!=0) {
$comboboxProductList.disable();
$telState.setText('手机号码有误');
}else{
$comboboxProductList.enable();
$comboboxProductList.setValue(data[0]["productId"]);
}
return data;
},
scope: this
}
}
}),
//listeners: {
// load: function (store, records, successful, eOpts) {
// console.log("====>[store.getData()]");console.log(store.getData());
// console.log("====>[records]");console.log(records);
// console.log("====>[successful]");console.log(successful);
// console.log("====>[eOpts]");console.log(eOpts);
// }
//},
fields: ["productId", "productName"]
}); //选择下拉框
$comboboxProductList = new Ext.form.ComboBox({
fieldLabel: 'AAAAAA',
margin: '5 0 0 10',
labelWidth: 70,
emptyText: '请选择',
autoSelect:true,
displayField: 'productName', //下拉显示
valueField: 'productId',
forceSelection: true,
queryDelay: 300,
store: remoteStore,
queryMode: 'remote',
hiddenName: 'productId'
}); // 给号码获取下拉框
$inpTel.on('keyup', function () {
// 不满足检查条件
if (this.getValue().length != 11) return; // 满足检查条件,修改store请求参数
var params = {
'phone': $inpTel.getValue()
}; remoteStore.getConfig("proxy").setExtraParams(params);
remoteStore.load(); });