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 ...
随机推荐
- clickonce发布winform必备组件
ClickOnce 发布,在系统必备中勾选了 .NET Framework 4,并选择了"从与我的应用程序相同的位置下载系统必备组件"时,执行发布,会提示缺少很多文件 使用 Pac ...
- [GO]结构体的比较和赋值
package main import "fmt" func main() { type student struct { id int name string sex byte ...
- Error creating bean with name 'us' defined in class path resource [com/liuyang/test/DI/beans2.xml]: Cannot resolve reference to bean 'daoa' while setting bean property 'daoa'; nested exception is org.
org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'us' defined ...
- google/protobuf hello world
/(ㄒoㄒ)/~~ 官网被墙 1. github > Search > protobuf or protocol buffers 2.https://github.com/google/p ...
- 在Linux上编译Hadoop-2.4.0
目录 目录 1 1. 前言 1 2. 安装依赖 1 2.1. 安装ProtocolBuffer 2 2.2. 安装CMake 2 2.3. 安装JDK 2 2.4. 安装Maven 3 3. 编译Ha ...
- idea中java文件打包出去步骤
打包出去之后 通过xftp放在Linus上面去运行 然后用hadoop fs -put 放到hadoop集群上面(而且此时在/user/hadoop下面创建好input文件夹和一个输入的文件) 即 ...
- delphi中sql实现while循环插入，不存在则插入
' declare @i int; '+ ' set @i=0; '+ ' while @i<4 '+ ' begin '+ ' insert into NBCommission(Type,It ...
- Linq限定操作之All,Any,Contains源码分析
Linq限定操作之All,Any,Contains源码分析 linq的限定操作 常见的限定操作: All,Any,Contains 一:All 1. 解释: 确定序列中的所有元素是否满足条件. 从字面 ...
- Web.config配置文件详解(新手必看) （转载）
原文地址:http://www.cnblogs.com/gaoweipeng/archive/2009/05/17/1458762.html <?xmlversion="1.0&quo ...
- C++构造和析构的顺序
C++构造函数和析构函数的顺序 #include <iostream> using namespace std; class CA {public: CA() { cout << ...