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 ...
随机推荐
- yii2 定义友好404
1.frontend->config->main.php添加如下: 'errorHandler' => [ 'errorAction' => 'site/error', ], ...
- CodeForces 427B Prison Transfer (滑动窗口)
题意:给定 n, t, c 和 n 个数,问你在这 n 个数中有多少连续的 c 个数,并且这个 c 个数不大于 t. 析:很简单么,是滑动窗口,从第一个开始遍历,如果找到 c 个数,那么让区间前端点加 ...
- Jquery 欲绑定事件
有时候,想提前给即将添加的的元素绑定事件,这时候使用on就不行了,利用事件的冒泡机制可以完成这个功能 Jquery 提供了delegate方法就是这样实现的. $("#schemaaccor ...
- Head First Python之4持久存储
open()用法 # encoding:utf-8 try: # 写模式打开文件,若不存在该文件,则创建 out = open("data.out", "w") ...
- ASP.NET Identity + Entity Framework 6 注意
最近一个项目使用ASP.NET Identity + Entity Framework 6开发,本来一切正常. 某时注意到,更改密码功能程序执行起来没有问题,界面上也报修改密码成功,但实际上密码并没有 ...
- jQuery获取各种input输入框的值
1.获取一组radio单选框的值(name属性为一组的radio的name属性) var q1 = $("input[name=element_name]:checked").va ...
- 27款经典的CSS框架
利用 CSS 框架,可以简化你的工作,提高工作效率.CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版.网格布局.表单样式.通用规则等代码块.下面给你推荐了27款优秀的CSS框 ...
- wp8.1 app退出操作提示
微软的wp8.1 sdk相比之前wp8 sdk以及相关dll类库,微软又重新编译过,相关系统类库也经过精简,删改了部分传统dll库中的方法对象,很多常用方法对象被写进Windows.UI为前缀的命名空 ...
- django drf GenericAPIView和ListAPIView
drf提供了更快捷的查询方法ListModelMixin+GenericAPIView,和ListAPIView 1.ListModelMixin+GenericAPIView from django ...
- cesium编程入门(七)3D Tiles，模型旋转
cesium编程入门(七)3D Tiles,模型旋转 上一节介绍了3D Tiles模型的位置移动,和贴地的操作,这一节来聊一聊模型的旋转, 参考<WebGl编程指南>的第四章 假设在X轴和 ...