extjs--combo动态获取数据
Posted 野牛科技W
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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" 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>
以上是关于extjs--combo动态获取数据的主要内容，如果未能解决你的问题，请参考以下文章