zoukankan      html  css  js  c++  java
  • 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                  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>
  • 相关阅读:
    【WPF】城市级联(XmlDataProvider)
    【C#】利用反射构建实体
    毕业档案保存
    【WPF】淡入淡出切换页面
    【C#】Lamada表达式演变过程
    【C#】实现INotifyPropertyChanged的3种方法
    【Unity】矩阵运算
    (win7/8/10)鼠标右键添加按下SHIFT键时弹出带管理员权限的“在此处打开命令窗口”
    如何给grldr.mbr和grldr改名
    常用的时间同步服务器地址
  • 原文地址:https://www.cnblogs.com/bisonkeji/p/9085785.html
Copyright © 2011-2022 走看看