extjs--combo动态获取数据
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var buyTypeStore = new Ext.data.Store({
fields: ["text", "value"],
proxy: {
type: "ajax",
url: './getinfo.php',
actionMethods: {
read: "POST", //解决传中文参数乱码问题，默认为“GET”提交
update : 'POST',
destroy: 'POST'
},
extraParams:{'pra':'55'},
reader: {
type: "json", //返回数据类型为json格式
root: "root" //数据
}
},
autoLoad: true //自动加载数据
}); buyTypeStore.on("beforeload", function() {
var op = Ext.getCmp('radioxiao').getGroupValue();
var new_params = {op:op,page:1};
Ext.apply(buyTypeStore.proxy.extraParams, new_params);
}); var genderStore = Ext.create("Ext.data.Store", {
fields: ["Name", "Value"],
data: [
{ Name: "man", Value: 10 },
{ Name: "woman", Value: 20}
]
}); Ext.create('Ext.form.Panel', {
id: 'newForm',
renderTo: 'formId',
border: true,
width: 600,
margin:50,
items: [
{
xtype: "combobox",
name: "Gender",
fieldLabel: "gender",
store: genderStore,
editable: false,
displayField: "Name",
valueField: "Value",
emptyText: "--please--",
queryMode: "local",
id:"Gender",
listeners: {
"select": function () {
var myc = Ext.getCmp('buyType');
var op = Ext.getCmp('Gender').getValue();
myc.setValue(null);
var mycvalue = Ext.getCmp('buyType').getValue();
buyTypeStore.removeAll();
myc.store.load({
callback: function (records, operation, success) {
},
params: {
page: 6,//重新设置页数，不设置会使用之前的页数进行查询，导致查询结果有误
start: 0,//重新设置起始行
limit: 21,//重新设置每页显示行
pra:op
}
});
}
} },
{
xtype: 'radiogroup',
fieldLabel: 'Radio field',
defaultType: 'radiofield',
id: 'radio1',
colums : 3,
defaults: {
flex: 1
},
layout: 'hbox',
items: [{
boxLabel: 'A',
inputValue: 'a',
name:'radio1',
id:'radioxiao',
checked:true
},{
boxLabel: 'B',
inputValue: 'b',
name:'radio1'
},{
boxLabel: 'C',
inputValue: 'c',
name:'radio1'
}
],
listeners :{
'change':function(){
var myc = Ext.getCmp('buyType');
var op = Ext.getCmp('radioxiao').getGroupValue();
myc.setValue(null);
var mycvalue = Ext.getCmp('buyType').getValue();
buyTypeStore.removeAll();
myc.store.load({
callback: function (records, operation, success) {
},
params: {
page: 2,//重新设置页数，不设置会使用之前的页数进行查询，导致查询结果有误
start: 0,//重新设置起始行
limit: 21,//重新设置每页显示行
pra:4
}
});
}
}
}
,{
xtype: "combo",
id: "buyType",
hiddenName: "buyType", //hiddenName和id不要相同，在IE6中会显示错位。
store: buyTypeStore,
displayField: "text",
valueField: "value",
triggerAction: "all",
// mode : "remote",
queryMode: "local", //低版本使用mode属性
queryParam : 'empUserNum',
editable: false,
allowBlank: false,
emptyText: 'please select',
fieldLabel: "xuanz",
typeAhead: true,//设置为true，当开始输入字符时，在指定的延迟之后会自动匹配剩下的内容，如果找到了匹配的 内容则自动选中它 (typeAheadDelay) (默认值为 false)
listeners: {
"select": function () {
alert("fff");
// var name = Ext.getCmp("buyType").getRawValue();
// var pid = Ext.getCmp("buyType").getValue();
// var myc = Ext.getCmp('buyType');
// // alert(myc);
// myc.store.load({
// callback: function (records, operation, success) {
// },
// params: {
// page: 2,//重新设置页数，不设置会使用之前的页数进行查询，导致查询结果有误
// start: 0,//重新设置起始行
// limit: 21//重新设置每页显示行
// }
// });
}
}
}]
});
});
</script>
</head>
<body>
<div id = "formId"></div> </body>
</html>
extjs--combo动态获取数据的更多相关文章
- highcharts动态获取数据生成图表问题
动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说). 柱状图的动态传值: //获取后台数据 va ...
- echarts通过ajax动态获取数据的方法
echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...
- React使用jquery方式动态获取数据
好久没写react了,今天有空写一下来react实现实时请求数据,并刷新数据的小demo. 首先我还是选择了jquery方式中自带的ajax获取数据,首先要引用所需的js包 接下来要写一个自定义的js ...
- ECharts 从后台动态获取数据 （asp.net）
(一) 使用工具 visual studio 2017:Web开发:asp.net (代码中的js引用路径以及ajax方法调用的url,记得修改哦) (二) 准备工作(此处写给和我一样小白) 1.动态 ...
- JS动态获取数据
JS访问数据,有实时获取数据的时候,请加上时间戳 如:'&stampflag=' + Math.round(new Date().getTime() / 1000); 因为有的浏览器(如IE9 ...
- ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】
具体实现的效果如图:
- asp.net mvc Areas 母版页动态获取数据进行渲染
经常需要将一些通用的页面元素抽离出来制作成母版页,但是这里的元素一般都是些基本元素,即不需要 进行后台数据交换的基本数据,但是对于一些需要通过后台查询的数据,我们应该怎么传递给前台的母版页呢 这里描述 ...
- react 动态获取数据
如果reander()里面的dom元素是动态获取的,就要将函数放到setSTATE()里面执行
- fullCalendar动态获取数据
fullCalendar http://fullcalendar.io/docs/event_data/events_function $('#calendar').fullCalendar({ he ...
随机推荐
- 3.3.4深度剖析ConcurrentLinkedQueue
队列.链表之类的数据结构及其常用.Java中,ArrayList和Vector都是使用数组作为其内部实现.两者最大的不同在于:Vector是线程安全的,而ArrayList不是.此外LinkedLis ...
- 编写高质量代码改善C#程序的157个建议——建议104：用多态代替条件语句
建议104:用多态代替条件语句 假设要开发一个自动驾驶系统.在设计之初,此自动驾驶系统拥有一个驾驶系统命令的枚举类型: enum DriveCommand { Start, Stop } 当前该枚举存 ...
- Getting Started with Node.js on Heroku
NodeJS应用托管平台 https://devcenter.heroku.com/articles/getting-started-with-nodejs#dyno-sleeping-and-sca ...
- winform 中TextBox只能输入数字
textBox1.KeyPress+=TextNumber_KeyPress; private void TextNumber_KeyPress(object sender, KeyPressEven ...
- 淘宝IP地址库采集器c#
个人原创.欢迎转载.转载请注明出处.http://www.cnblogs.com/zetee/articles/3482085.html 采集器概貌,如下: 最近做一个项目,功能类似于CNZZ站长统计 ...
- bitnami openedx安装的各种坑及痛苦经历
那天在华为网站上学习,看见他们的培训系统挺不错的,看到下边写着openedx,百度了一下是个开源软件,挺流行的,在这之前对于openedx没有任何了解,然后开始了一周多的痛苦经历. 首先在opened ...
- mvc - Authorize授权
from : http://www.cnblogs.com/asks/p/4372783.html http://www.cnblogs.com/myindex/p/5479428.html
- C语言顺序结构和分支结构总结
1. 本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 感觉学的内容比较基础,也是日后编程的基石.今后还应多加练习,能够更自如地运用,避免低级错误,一步步地提 ...
- OI树上问题 简单学习笔记
判断链 每个点的度数不超过2 判断树 n个点,n-1条边 每两个点之间的路径唯一 多叉树转换成二叉树 第一个孩子作为左孩子,第一个孩子的兄弟作为它的右孩子. 树的重心 树上一点,满足删除该点时,树内剩 ...
- 贝塞尔曲线 WPF MVVM N阶实现 公式详解+源代码下载
源代码下载 效果图: 本程序主要实现: N阶贝塞尔曲线(通用公式) 本程序主要使用技术 MVVM InterAction 事件绑定 动态添加Canvas的Item 第一部分公式: n=有效坐标点数量 ...