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 ...
随机推荐
- ThreadLocal深入理解
作者:知乎用户链接:https://www.zhihu.com/question/23089780/answer/62097840来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
- InteliJ中文乱码；IDE快捷键使用
启动服务器的时候出现如图 解决方法: 对服务器的位置进行编辑 增加如图的信息 -Dfile.encoding=UTF-8
- javascript总结21:javascript-JSON与遍历
1 什么是JSON JavaScript Object Notation(JavaScript对象表示形式) JavaScript的子集 JSON和对象字面量的区别 JSON的属性必须用双引号引号引起 ...
- 【小梅哥SOPC学习笔记】NIOS II处理器运行UC/OS II
SOPC开发流程之NIOS II 处理器运行 UC/OS II 这里以在芯航线FPGA学习套件的核心板上搭建 NIOS II 软核并运行 UCOS II操作系统为例介绍SOPC的开发流程. 第一步:建 ...
- hbase项目
四.HBase 项目4.1.涉及概念梳理:命名空间4.1.1.命名空间的结构 1) Table:表,所有的表都是命名空间的成员,即表必属于某个命名空间,如果没有指定, 则在 default 默认的命名 ...
- spring源码研究之IoC容器在web容器中初始化过程
转载自 http://ljbal.iteye.com/blog/497314 前段时间在公司做了一个项目,项目用了spring框架实现,WEB容器是Tomct 5,虽然说把项目做完了,但是一直对spr ...
- Linq生成操作之DefautIfEmpty,Empty,Range,Repeat源码分析
Linq生成操作之DefautIfEmpty,Empty,Range,Repeat源码分析 Linq的四种生成运算 DefautIfEmpty,Empty,Range,Repeat 也就是给我们初始化 ...
- Replication--镜像+复制
场景:主服务器:Server1从服务器:Server2订阅服务器: Server3镜像DB: RepDB配置:1>配置SERVER3为分发服务器,在Server3上指定发布服务器SERVER1和 ...
- 【05】循序渐进学 docker：系统资源和网络
写在前面的话 在上一篇学习 Dockerfile 的时候其实还有几个相当重要得关键中没有谈到,但没关系,在后面的内容会单独提出来一个一个的学习.这里就先谈谈关于资源的控制个容器的网络~ 资源限制 其实 ...
- 并发编程---线程 ;python中各种锁
一,概念 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 --车间负责把资源整合到 ...