Ext.form.ComboBox 后台取值 动态加载 ext5.0.0
我用的extjs是5.0.0版本的。
请注意:如果这里没有的combobox相关内容,这里一定有。
开始的时候keyup事件取到的数据就是放不到ComboBox中,放全局变量也不好用。最后大神出手帮忙解决了这个问题~~~
查看API的时候,对象没有找对,以至于方法事件都用不了。
总结出来方便查阅~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
输入号码结束--触发事件---从后台取数据---将数据放到下拉列表中
输入手机号
// 输入电话号 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(); });