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(); });
Ext.form.ComboBox 后台取值 动态加载 ext5.0.0的更多相关文章
- asp.net向后台传参数动态加载图片
//向后台传参数动态加载图片 $(function() { $("#Button1").click(function() { var stockcode = getUrlParam ...
- 爬虫——爬取Ajax动态加载网页
常见的反爬机制及处理方式 1.Headers反爬虫 :Cookie.Referer.User-Agent 解决方案: 通过F12获取headers,传给requests.get()方法 2.IP限制 ...
- Python网络爬虫_爬取Ajax动态加载和翻页时url不变的网页
1 . 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...
- python+selenium+PhantomJS爬取网页动态加载内容
一般我们使用python的第三方库requests及框架scrapy来爬取网上的资源,但是设计javascript渲染的页面却不能抓取,此时,我们使用web自动化测试化工具Selenium+无界面浏览 ...
- easyui combobox 在datagrid中动态加载数据
场景:datagrid 中用编辑框修改数据,有一个列使用的combobox 在可编辑的时候需要动态绑定数据,这个数据是在根据其他条件可变的 思路:在每次开启编辑框的时候动态绑定数据, datagri ...
- Python爬虫学习——使用selenium和phantomjs爬取js动态加载的网页
1.安装selenium pip install selenium Collecting selenium Downloading selenium-3.4.1-py2.py3-none-any.wh ...
- 根据返回值动态加载select
// 路由 if (return_routeChoice != null && return_routeChoice != "") { for (var i = 0 ...
- Ext JS学习第十天 Ext基础之动态加载JS文件(补充)
此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...
- Ajax动态加载数据
前言: 1.这个随笔实现了一个Ajax动态加载的例子. 2.使用.net 的MVC框架实现. 3.这个例子重点在前后台交互,其它略写. 开始: 1.控制器ActionResult代码(用于显示页面) ...
随机推荐
- android EditText控件可输入正负数及小数位
设置android:inputType="numberSigned|numberDecimal" <EditText android:id="@+id/editTe ...
- JQUERY EASYUI 验证框(VALIDATEBOX)用法
Query EasyUI 验证框(ValidateBox)在表单的验证方面给我们提供了很方便的方法,下面来介绍一下验证框(ValidateBox)的详细用法(查看演示):HTML 代码 <inp ...
- android SharedPreferences
除了SQLite数据库外,SharedPreferences也是一种轻型的数据存储方式,它的本质是基于XML文件存储key-value键值 对数据,通常用来存储一些简单的配置信息.其存储位置在/dat ...
- 解决 winform 界面对不齐 z
一个winform的程序,本机上界面对得很齐,到一到客户的机器上就惨不忍睹,一番研究后搞定: 1. AutoScaleMode = None 2. BackgroundImageLayout = No ...
- Android 自定义dialogfragment
在用dialogfragment的时候我们可能会不喜欢系统自带的黑色边框,那怎么办呢? dialofragment提供可供修改样式的方法setStyle(style,R.style.MyTryUseD ...
- Delphi 提示在Delphi的IDE中,按Ctrl+Shift+G键可以为一个接口生成一个新的GUID。
对于Object Pascal语言来说,最近一段时间最有意义的改进就是从Delphi3开始支持接口(interface),接口定义了能够与一个对象进行交互操作的一组过程和函数.对一个接口进行定义包含两 ...
- JDBC项目实践
这几天学习了JDBC的接口,从简单的连接,到不断地对JDBC的代码进行优化,最后到实体类,DAO类的设计,现在对这几天所学做一个总结: 首先是软件的系统组成: 数据库中有很多的表:Customer,D ...
- 两个队列+k叉哈夫曼树 HDU 5884
// 两个队列+k叉哈夫曼树 HDU 5884 // camp题解: // 题意:nn个有序序列的归并排序.每次可以选择不超过kk个序列进行合并,合并代价为这些序列的长度和.总的合并代价不能超过TT, ...
- Azure中的分布式1——多实例
Azure中的WebRole和WorkerRole天然支持负载均衡,只需要简单配置一下即可,下面我以一个WebRole为例说明这一点. 创建一个项目类型为MVC4的WebRole 项目结构如下: 右键 ...
- ASP.NET 管道事件与HttpModule, HttpHandler简单理解 -摘自网络
第一部分:转载自Artech IIS与ASP.NET管道 ASP.NET管道 以IIS 6.0为例,在工作进程w3wp.exe中,利用Aspnet_ispai.dll加载.NET运行时(如果.NET ...