zoukankan      html  css  js  c++  java
  • Ext:ComboBox实战

     1 var gsCombo = new Ext.form.ComboBox({
     2         id:'combo',
     3         hiddenName:'value',
     4         fieldLabel:'下拉框',
     5         triggerAction:'all', 
     6         pageSize: 10,//分页
     7         store:new Ext.data.Store({
     8             pageSize: 10,
     9             proxy: new Ext.data.HttpProxy({
    10                 url: '/servlet'
    11             }),
    12             reader: new Ext.data.JsonReader({
    13                   root:"data",
    14                 fields: ['value','id'] 
    15             })
    16         }),
    17         displayField:'value',        
    18         valueField:'id',    
    19         mode:'remote',                     
    20         forceSelection:true,            
    21         resizable:true,                  
    22         value:'默认值',                   
    23         handelHeight:10,               
    24           200
    25       });
    ComboBox
      ComboBox获取displayField和valueField的值
    var valueField = Ext.getCmp("id").value ;//获取valueField
    var displayField =  Ext.get('id').getValue() ;//获取displayField 
    1 store.on("load",function(){ //对 ComboBox 的数据源加上 load 事件就好  
    2 combo.setValue(this.getAt(0).get('name'));});   
    3 store.load();  
    设置第一个选项为默认值

     comboBox设置可输入可以职能联想功能:

     1       gsCombo.on('beforequery',function(e){ 
     2         var combo = e.combo;  
     3         if(!e.forceAll){ 
     4         var value = e.query; 
     5         combo.store.filterBy(function(record,id){ 
     6         var text = record.get(combo.displayField); 
     7             //用自己的过滤规则,如写正则式 
     8             return (text.indexOf(value)!=-1);    //实现的核心
     9         }); 
    10         combo.expand(); 
    11         return false; 
    12         } 
    13      });
    智能联想

     combox默认的空白选项高度很小,这个时候可以通过添加css样式统一高度

    1     <style type="text/css">
    2         .x-combo-list-item { height: 21px;} 
    3     </style>
    View Code
  • 相关阅读:
    跨域请求携带cookie
    vue单文件组件实例1:简单单文件组件
    vue单文件组件实例2:简单单文件组件
    vue路由1:基本使用
    项目中常用的javascript/jquery操作
    vue计算属性和侦听器
    专题8:javascript中事件
    普通文件的上传(表单上传和ajax文件异步上传)
    python导入包出错:ImportError: No module named XXXXX

  • 原文地址:https://www.cnblogs.com/zhutouying/p/3262535.html
Copyright © 2011-2022 走看看