extjs--combo动态获取数据

weixin_30800807
于 2018-05-24 23:10:00 发布
阅读量174
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/bisonkeji/p/9085785.html
版权
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
  5     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
  6     <script type="text/javascript">
  7         Ext.onReady(function() {
  8             var buyTypeStore = new Ext.data.Store({
  9                 fields: ["text", "value"],
 10                 proxy: {
 11                     type: "ajax",
 12                     url: './getinfo.php',
 13                     actionMethods: {
 14                         read: "POST",  //解决传中文参数乱码问题，默认为“GET”提交
 15                         update : 'POST',
 16                         destroy: 'POST'
 17                     },
 18                     extraParams:{'pra':'55'},
 19                     reader: {
 20                         type: "json",  //返回数据类型为json格式
 21                         root: "root"  //数据
 22                     }
 23                 },
 24                 autoLoad: true  //自动加载数据
 25             });
 26 
 27             buyTypeStore.on("beforeload", function() {
 28                 var op = Ext.getCmp('radioxiao').getGroupValue();
 29                 var new_params = {op:op,page:1};
 30                 Ext.apply(buyTypeStore.proxy.extraParams, new_params);
 31             });
 32 
 33             var genderStore = Ext.create("Ext.data.Store", {
 34                 fields: ["Name", "Value"],
 35                 data: [
 36                     { Name: "man", Value: 10 },
 37                     { Name: "woman", Value: 20}
 38                 ]
 39             });
 40 
 41 
 42             Ext.create('Ext.form.Panel', {
 43                 id: 'newForm',
 44                 renderTo: 'formId',
 45                 border: true,
 46                 width: 600,
 47                 margin:50,
 48                 items: [
 49                     {
 50                         xtype: "combobox",
 51                         name: "Gender",
 52                         fieldLabel: "gender",
 53                         store: genderStore,
 54                         editable: false,
 55                         displayField: "Name",
 56                         valueField: "Value",
 57                         emptyText: "--please--",
 58                         queryMode: "local",
 59                         id:"Gender",
 60                         listeners: {
 61                             "select": function () {
 62                                 var myc = Ext.getCmp('buyType');
 63                                 var op = Ext.getCmp('Gender').getValue();
 64                                 myc.setValue(null);
 65                                 var mycvalue = Ext.getCmp('buyType').getValue();
 66                                 buyTypeStore.removeAll();
 67                                 myc.store.load({
 68                                     callback: function (records, operation, success) {
 69                                     },
 70                                     params: {
 71                                         page: 6,//重新设置页数，不设置会使用之前的页数进行查询，导致查询结果有误
 72                                         start: 0,//重新设置起始行
 73                                         limit: 21,//重新设置每页显示行
 74                                         pra:op
 75                                     }
 76                                 });
 77                             }
 78                         }
 79 
 80                     },
 81                     {
 82                         xtype: 'radiogroup',
 83                         fieldLabel: 'Radio field',
 84                         defaultType: 'radiofield',
 85                         id: 'radio1',
 86                         colums : 3,
 87                         defaults: {
 88                             flex: 1
 89                         },
 90                         layout: 'hbox',
 91                         items: [{
 92                             boxLabel: 'A',
 93                             inputValue: 'a',
 94                             name:'radio1',
 95                             id:'radioxiao',
 96                             checked:true
 97                         },{
 98                             boxLabel: 'B',
 99                             inputValue: 'b',
100                             name:'radio1'
101                         },{
102                             boxLabel: 'C',
103                             inputValue: 'c',
104                             name:'radio1'
105                         }
106                         ],
107                         listeners :{
108                             'change':function(){
109                                 var myc = Ext.getCmp('buyType');
110                                 var op = Ext.getCmp('radioxiao').getGroupValue();
111                                 myc.setValue(null);
112                                 var mycvalue = Ext.getCmp('buyType').getValue();
113                                 buyTypeStore.removeAll();
114                                 myc.store.load({
115                                     callback: function (records, operation, success) {
116                                     },
117                                     params: {
118                                         page: 2,//重新设置页数，不设置会使用之前的页数进行查询，导致查询结果有误
119                                         start: 0,//重新设置起始行
120                                         limit: 21,//重新设置每页显示行
121                                         pra:4
122                                     }
123                                 });
124                             }
125                         }
126                     }
127                    ,{
128                     xtype: "combo",
129                     id: "buyType",
130                     hiddenName: "buyType",  //hiddenName和id不要相同，在IE6中会显示错位。
131                     store: buyTypeStore,
132                     displayField: "text",
133                     valueField: "value",
134                     triggerAction: "all",
135                     //  mode : "remote",
136                     queryMode: "local",  //低版本使用mode属性
137                         queryParam : 'empUserNum',
138                         editable: false,
139                     allowBlank: false,
140                         emptyText: 'please select',
141                     fieldLabel: "xuanz",
142                     typeAhead: true,//设置为true，当开始输入字符时，在指定的延迟之后会自动匹配剩下的内容，如果找到了匹配的 内容则自动选中它 (typeAheadDelay) (默认值为 false)
143                     listeners: {
144                         "select": function () {
145                             alert("fff");
146                             // var name = Ext.getCmp("buyType").getRawValue();
147                             // var pid = Ext.getCmp("buyType").getValue();
148                             // var myc = Ext.getCmp('buyType');
149                             // // alert(myc);
150                             // myc.store.load({
151                             //     callback: function (records, operation, success) {
152                             //     },
153                             //     params: {
154                             //         page: 2,//重新设置页数，不设置会使用之前的页数进行查询，导致查询结果有误
155                             //         start: 0,//重新设置起始行
156                             //         limit: 21//重新设置每页显示行
157                             //     }
158                             // });
159                         }
160                     }
161                 }]
162             });
163         });
164     </script>
165 </head>
166 <body>
167 <div id = "formId"></div>
168 
169 </body>
170 </html>
转载于:https://www.cnblogs.com/bisonkeji/p/9085785.html
weixin_30800807
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs--combo动态获取数据

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" r...
复制链接

扫一扫