`

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 treeselector 树结构选择器

    ExtJS TreeSelector是一款基于ExtJS库的组件,它扩展了基础的itemselector功能,提供了一种以树形结构展示数据的选择器。这个组件特别适用于那些需要用户从层次化的数据集中进行选择的应用场景,例如组织架构、目录...

    Extjs4使用要点个人整理

    2. **按钮(Button)的用法**:`EXTjs button用法.doc`将详细介绍如何创建和使用ExtJS 4的按钮组件,包括设置按钮文本、图标、事件监听器以及使用不同类型的按钮,如工具栏按钮、菜单按钮等。 3. **表单(Form)...

    extJs3升级extjs4方案

    在 ExtJS3 中,我们可以使用 Ext.extend 来定义类,而在 ExtJS4 中,我们需要使用 Ext.define 来定义类。例如,在 ExtJS3 中,我们可以使用以下代码来定义一个类: ```javascript Ext.ux.PostStore = Ext.extend...

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    这些可以通过ExtJS的命令模式和组件方法实现。 8. **验证**:设计的流程图可能需要遵循特定的规则,如不能形成循环。ExtJS的事件和数据验证机制可以用于实现这些逻辑。 9. **集成与部署**:设计完成后,工作流需要...

    轻松搞定Extjs 带目录

    ### 知识点概述 #### 1. Extjs概念与目录结构 Extjs是一个基于JavaScript的框架,用于构建交互式的web应用。...通过学习本书,读者能够全面掌握Extjs的各种特性,进而使用Extjs开发出功能强大、交互良好的Web应用。

    包含各种类型的extjs小图标,Extjs4小图标

    3. **使用方法**: - 在ExtJS应用中,可以使用`Icon`配置项在按钮、菜单项或其他组件上添加图标。例如,`{iconCls: 'add'}`将添加一个指定类名的图标,类名对应于CSS中的背景图像,通常存储在CSS文件中。 4. **...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    在“ExtJS3.3中文API.CHM”文档中,每个API或类都有详细的说明,包括其属性、方法、事件和配置项,这对于开发者来说是宝贵的参考资料。通过深入学习和理解这些内容,开发者能够熟练掌握ExtJS 3.3,编写出高效、高...

    Extjs4 grid使用例子

    在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...

    extjs技术文档资料

    这些文档对于开发者来说是十分宝贵的,可以帮助他们更好地理解和掌握EXTJS的使用方法,提高开发效率。 描述中的“EXTJS技术文档资料”再次强调了主题,暗示这份压缩包可能包含了EXTJS的官方文档、教程、案例分析等...

    ExtJS2.0简明教程

    教程包括ExtJS 的新手入门、组件体系结构及使用、ExtJS 中各控件的使用方法及示例应用等,是一个非常适合新手的ExtJS 入门教程。本教程主要是针对ExtJS2.0 进行介绍,全部代码、截图等都是基于ExtJS2.0。

    extjs6.6项目示例

    3. SASS 和主题定制,理解`base-color`的概念和使用方法。 4. 如何组织和编写ExtJS应用的代码结构。 5. 数据绑定和模型-视图-控制器(MVC)设计模式的应用。 6. 如何调试和优化ExtJS应用。 这个示例项目对于初学者...

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...

    extjs2----关于extjs 的使用,操作

    在标题"extjs2----关于extjs 的使用,操作"中,我们可以看出这是一份关于ExtJS 2.0版本的使用指南,主要涵盖了其基本操作和应用。描述中提到内容较为初级,适合初学者学习,这表明我们将探讨的是ExtJS的基础概念和...

    ExtJS 7.6 SDK trial

    ExtJS 是一个流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API,使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新,...

    extjs 3.4 开发前准备

    "程序,可以了解EXTJS的基本架构和组件使用方法。 通过上述准备工作,开发者可以顺利地开始EXTJS 3.4的开发工作。EXTJS的强大在于其丰富的组件库和高度可定制化,学习EXTJS不仅需要理解其API,还需要实践和调试以...

    extjs6.2 SDK下载

    对于初学者,"sencha CMD使用方法可以查看教程"这一提示意味着需要学习如何利用CMD来管理EXTJS项目,这通常涉及到初始化项目、生成组件、编译代码等操作。最后,"Sencha_Ext_JS_Commercial_6.0.1_REPACK_Downloadly....

    ExtJS 界面设计器

    对于新用户,可能需要花时间了解每个组件的功能和使用方法,以及如何通过设计器进行有效的布局和样式设置。 8. **兼容性和性能**:由于ExtJS是基于浏览器运行的,所以需要考虑兼容性问题,确保设计的界面能在不同...

    Extjs 2.2 Extjs 3.21 js

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端Web应用程序。这个压缩包包含了ExtJS的两个重要版本:2.2和3.2.1。这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解...

Global site tag (gtag.js) - Google Analytics