注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

北漂的小羊

Java编程,开发者,程序员,软件开发,编程,代码。新浪微博号:IT国子监

 
 
 

日志

 
 
关于我

在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号: IT国子监(http://weibo.com/itguozijian)

网易考拉推荐

EXT itemSelector(双选框)-->实例(静态、动态数据加载)  

2012-09-19 16:01:21|  分类: Ext Js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
EXT itemSelector(双选框)--实例(静态、动态数据加载) - 天涯草 - 天涯草                       
 使用itemSelector的注意事项: 

  1、使用中需要引用3个文件,MultiSelect.js ,ItemSelector.js,MultiSelect.css                                                                    

  2、如果需要完整示例:可以参考:extJS例子中examples/multiselect文件夹下                                                                        

Js代码 
  1. <pre name="code" class="js"><span style="font-size: xx-small;">Js代码   
  2. <html>    
  3. <head>    
  4.     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />    
  5.     <link rel="stylesheet" type="text/css" href="../ux/css/MultiSelect.css"/>    
  6.     <script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script>    
  7.     <script type="text/javascript" src="../../ext-all.js"> </script>    
  8.     <script type="text/javascript" src="../ux/MultiSelect.js"></script>    
  9.     <script type="text/javascript" src="../ux/ItemSelector.js"></script>    
  10.    <script type ="text/javascript">     
  11.         Ext.onReady(function(){    
  12.           //定义数组数据    
  13.           var ds = new Ext.data.ArrayStore({    
  14.                data: [['1''One'], ['2''Two'], ['3''Three']],    
  15.                fields: ['value','text'],    
  16.                sortInfo: {    
  17.                     field: 'value',    
  18.                    direction: 'ASC'    
  19.               }    
  20.          });    
  21.          var isForm = new Ext.form.FormPanel({    
  22.               title: 'ItemSelector Test',    
  23.               width:700,    
  24.               bodyStyle: 'padding:10px;',//定义样式表    
  25.               renderTo: 'myDiv',//指定需要渲染到什么节点上    
  26.               items:[{    
  27.                   xtype: 'itemselector',    
  28.                   id : 'myIt',    
  29.                   imagePath: '../ux/images/',//左右移动的图片    
  30.                   multiselects: [{//定义左边数据    
  31.                   width: 250,    
  32.                   height: 200,    
  33.                   store: ds,    
  34.                   displayField: 'text',    
  35.                   valueField: 'value'    
  36.              },{//定义右边为空数据    
  37.                   width: 250,    
  38.                   height: 200,    
  39.                   store: [[]]    
  40.             }]    
  41.       }],     
  42.         buttons: [{    
  43.             text: 'Save',    
  44.             handler: function(){//获取选择的数据    
  45.                    if(isForm.getForm().isValid()){    
  46.                         alert(Ext.getCmp("myIt").getValue());    
  47.                         //打印出来,会自动拼接成字符串,但前面会多出一个‘,’--因为右边第一次会有一个默认的数据    
  48.                     }    
  49.              }    
  50.       }]    
  51.    });    
  52. });    
  53.      
  54. </script>    
  55. </head>    
  56. <body>    
  57.     <div id="myDiv" class="demo-ct"></div>    
  58. </body>    
  59. </html>    
  60.  </span></pre>  
  61. <span style="font-size: xx-small;"> </span>  

 




备注:如果需要动态数据,可以使用AJAX来实现

比如:


Js代码 
  1.    
  2. Ext.Ajax.request({  
  3.     url : 'findAelviewfieldconfigBeanNoCheckedByViewId.action',  
  4.     method : 'post',  
  5.            async : false,  
  6.     params : {  
  7.          viewId : ruleConfig_sm.getSelected().get("id")  
  8.             },  
  9.     success : function(result, request) {  
  10.         var data = result.responseText;//得到返回来的数据(注意返回来的数据,应该是字符串格式)  
  11. strLeft = eval_r(data.substring(1,data.length-1));//取消前后两头的引号  
  12.     },  
  13.     failure : function(result, request) {  
  14. Ext.MessageBox.alert('系统异常''请求数据失败!');  
  15.             }  
  16. });  



备注:今天需要对这个组件,做一点修改,就是取消排序功能,摸索了半天,也不知道,怎么入手。

  原因分析:itemSelector 这个组件为扩展组件,在EXT PAI 中没有这个的说明,好多属性,根本就无从下手,

不过,在网上看到一篇文章,上面的意思就是对Store来进行排序。。所以我直接取消掉sortInfo属性,让数据在后台排序以后,传递过来。。

 

特殊需求:

  在双选框中,有时候,不一定是取value,而是去displayField值,根据查看源代码,我们发现,并没有提供这个方法,那怎么呢?

  解决:(有点傻)

 1、 定义一个全局变量

var text = "";

 2、定义一个函数,模仿getValue,

 getText : function(){

    return text;

}

基本工作,已经做好,如何来得到displayField值,跟踪getValue,发现,value的值,全是在valueChanged函数中,得到的,

在这个函数中,他是通过valueField来取值,那么我们就通过displayFiled来取值对应的DisplayField的值,最后赋值给全局变量。然后调用函数,取得这个全局变量。。

新浪微博:IT国子监(记得关注噢) http://weibo.com/itguozijian
  评论这张
 
阅读(1915)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016