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 ...
随机推荐
- Qt之QML开发常用知识
小技巧: 1. QML的内部逻辑可以直接调试 2. ctrl+ alt + space,在写QML时,可以直接调出工具条 3. 属性以小写字母开发 4. 属性改变事件,基本都是on+Property+ ...
- UVa 3211 Now or later (二分+2-Sat)
题意:有 n 架飞机,每个飞机早着陆,或者晚着陆,让你安排一个方式,让他们着陆的时间间隔尽量大. 析:首先对于时间间隔,可以用二分来解决,然后就成了一个判定性问题,然后怎么判断该时间间隔是不是成立呢, ...
- CodeForces 681C Heap Operations (模拟题，优先队列)
题意:给定 n 个按顺序的命令,但是可能有的命令不全,让你补全所有的命令,并且要求让总数最少. 析:没什么好说的,直接用优先队列模拟就行,insert,直接放入就行了,removeMin,就得判断一下 ...
- [Selenium With C#基础教程] Lesson-06 单选按钮
作者:Surpassme 来源:http://www.jianshu.com/p/08ee1929875f 声明:本文为原创文章,如需转载请在文章页面明显位置给出原文链接,谢谢. 单选按钮通常用在需要 ...
- js链式调用
我们都很熟悉jQuery了,只能jQuery中一种非常牛逼的写法叫链式操作 * $('#div').css('background','#ccc').removeClass('box').stop() ...
- Intel GPA果然是神器
又一次PERF暗黑三...只有GPA帮到了我. Intel GPA是一个用于测试产品性能和质量的工具.使用这个工具可以运行在游戏或3D应用程序中用来看看它们是如何工作的,其优势性的一点是,有了Auto ...
- 也说AOP
前言 1.引言 2.Aop概念 3.Aop实践 4.总结 一.引言 对于初入行的小白来讲,aop,ioc这两个程序设计思想总是傻傻分不清,不知道是个什么东东?别人再一谈各种框架更是云里雾里...博主今 ...
- Entity Framework异步查询和保存
EF6开始提供了通过async和await关键字实现异步查询和保存的支持(.net 4.5及更高版本).虽然不是所有的操作都能从异步中获益,但是耗时的操作.网络或IO密集型任务中,使用异步可以提升客户 ...
- 爆款AR游戏如何打造？网易杨鹏以《悠梦》为例详解前沿技术
本文来自网易云社区. 7月31日,2018云创大会游戏论坛在杭州国际博览中心103B圆满举行.本场游戏论坛聚焦探讨了可能对游戏行业发展有重大推动的新技术.新实践,如AR.区块链.安全.大数据等. 网易 ...
- 514. Freedom Trail
In the video game Fallout 4, the quest "Road to Freedom" requires players to reach a metal ...