`

Extjs的itemselector用法

阅读更多
var store = new Ext.data.Store({
    // autoLoad:true,
    // 获取数据的方式
    proxy : new Ext.data.HttpProxy({
       url : 'connCfgManage.do?reqCode=getChannelCode'
      }),
    // 数据读取器
    reader : new Ext.data.JsonReader({
       autoLoad : false,
       totalProperty : 'TOTALCOUNT', // 记录总数
       root : 'ROOT' // Json中的列表数据根节点
      }, [{
         name : 'channelCode'
        }])
   });

 var store2 = new Ext.data.Store({
    autoLoad : false,
    // 获取数据的方式
    proxy : new Ext.data.HttpProxy({
       url : 'accountChannel.do?reqCode=getAccountChannelInfo'
      }),
    // 数据读取器
    reader : new Ext.data.JsonReader({
       autoLoad : true,
       totalProperty : 'TOTALCOUNT', // 记录总数
       root : 'ROOT' // Json中的列表数据根节点
      }, [{
         name : 'channelCode'
        }])
   });
 var sm = new Ext.grid.CheckboxSelectionModel({
    singleSelect : false
   });

 var isForm = new Ext.form.FormPanel({
    title : '商户账号渠道配置选择',
    width : 700,
    region : 'center',
    buttonAlign : 'center',
    bodyStyle : 'padding:10px;',// 定义样式表
    items : [{
     xtype : 'itemselector',
     name : 'itemselector',
     id : 'myIt',
     toLegend : "已选栏",
     fromLegend : "可选栏",
     drawUpIcon : false,
     drawDownIcon : false,
     drawLeftIcon : true,
     drawRightIcon : true,
     drawTopIcon : false,
     drawBotIcon : false,
     hideLabel : false,
     imagePath : '../resource/extjs3.1/ux/images/',// 左右移动的图片
     multiselects : [{// 定义左边数据
      legend : '可选渠道',
      width : 250,
      height : 300,
      store : store,
      displayField : 'channelCode',
      valueField : 'channelCode'
     }, {
      legend : '已有渠道',
      width : 250,
      height : 300,
      displayField : 'channelCode',
      valueField : 'channelCode',
      store : store2,
      tbar : [{
       text : '清除所有',
       iconCls : 'deleteIcon',
       handler : function() {
        isForm.getForm().findField('itemselector')
          .reset();
       }
      }]
     }]
    }],
    buttons : [{
       text : '提交列表',
       iconCls : 'acceptIcon',
       handler : function() {
        saveAccountBank();
       }
      }, {
       text : '关闭',
       iconCls : 'deleteIcon',
       handler : function() {
        cWindow.close();
       }
      }]
   });


store.load({
    params : {
     connType : threeForm.getForm().findField('connType')
       .getValue()
    },
    callback : function() {
     editChannelCode();
    }
   });

 function editChannelCode() {
  if ("defaultEdit" == temp || "customizedEdit" == temp) {
   store2.load({
      params : {
       connType : threeForm.getForm()
         .findField('connType').getValue(),
       merId : merId,
       merAccount : merAccount,
       temp : temp
      },
      callback : function(records, options, success) {
       for (i = 0; i < records.length; i++) {
        var channelCode = records[i].get('channelCode');
        var index = store.find("channelCode",
          channelCode);
        store.removeAt(index);
       }
      }
     });} else if ("customized" == temp || "default" == temp) {
   store2.removeAll();
  }
 }


var channelCode = Ext.getCmp("myIt").getValue();

获取右边的所有值

效果如下:

分享到:
评论

相关推荐

    extjs4.2的itemselector

    `说明.docx` 文件很可能是对修改过程的详细文档,包含了修改的原因、步骤以及如何在实际应用中使用这个修复后的 `itemselector` 组件。文档可能还包含了示例代码、截图以及如何配置 `fromstore` 和 `tostore` 的说明...

    extJS3.1源码及demo

    通过下载并研究"ext-3.1.0"这个压缩包中的源码和示例,开发者不仅可以学习到ExtJS的基本用法,还能深入理解其内部机制,这对于提升JavaScript开发技能和扩展自定义功能非常有帮助。不过需要注意,随着技术的发展,...

    解决extjs 桌面图标换行方法

    ### 解决ExtJS桌面图标换行方法 #### 知识点概述 本文档将详细介绍如何在ExtJS框架中实现桌面图标的自动换行功能。在许多应用中,特别是在模仿桌面环境的应用程序中,桌面图标(通常称为快捷方式)的布局至关重要...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    在ExtJS 4.x框架中,ComboboxTree是一种特殊的组件,它将传统的下拉框与树形结构结合在一起,提供了一种更为灵活的用户输入方式。这种组件在数据选择上非常...理解并熟练掌握其用法,将极大地提升开发效率和用户体验。

    用extjs 4.0打造自己的WEB桌面

    我们可以使用 ExtJS 4.0 的 layout manager 来实现图标的自动换行。下面是一个简单的实现方法: 首先,我们需要在 desktop.js 文件中添加一个 initShortcut 函数,该函数用于初始化桌面图标的排列方式。函数中,...

    Extjs事件和模板

    事件监听和触发可以通过`addListener`(或简写为`on`)和`fireEvent`方法实现。例如: ```javascript // 监听按钮的click事件 button.on('click', function() { console.log('Button clicked!'); }); // 触发一个...

    ExtNet控件使用心得

    ### ExtNet控件使用心得详解 #### Panel控件特性概览 Panel控件在ExtNet框架中扮演着至关重要的角色,其丰富的配置选项使得开发者能够创建出高度定制化的界面组件。以下是一些关键特性的详细解析: - **Closable*...

Global site tag (gtag.js) - Google Analytics