`

ExtJS4 ItemSelector 扩展

 
阅读更多
ImageBoundList.js
Ext.define('Ext.view.ImageBoundList', {
			extend : 'Ext.view.BoundList',
			alias : 'widget.imageboundlist',
			alternateClassName : 'Ext.ImageBoundList',		
				
			initComponent: function() {
				var me = this;
				
				if (!me.tpl) {
					me.tpl = new Ext.XTemplate(
						'<ul><tpl for=".">',
						'<li role="option" class="' + me.itemCls + '">'
								+ '<img src="'
								+ me.getInnerTpl(me.imageField)
								+ '" align="top" />'
								+ me.getInnerTpl(me.displayField) + '</li>',
						'</tpl></ul>');
				} else if (Ext.isString(me.tpl)) {
					me.tpl = Ext.create('Ext.XTemplate', me.tpl);
				}

				me.callParent();
			}
			
		});


MultiSelect.js
 uses: [
        'Ext.view.ImageBoundList',
        'Ext.form.FieldSet',
        'Ext.ux.layout.component.form.MultiSelect',
        'Ext.view.DragZone',
        'Ext.view.DropZone'
    ],

...


/**
     * @cfg {String} displayField Name of the desired display field in the dataset (defaults to 'text').
     */
    displayField: 'text',
	
	/**
     * @cfg {String} imageField Name of the desired display field in the dataset (defaults to 'image').
     */
    imageField: 'image',

...

onRender: function(ct, position) {
        var me = this,
            panel, boundList, selModel;

        me.callParent(arguments);

        boundList = me.boundList = Ext.create('Ext.view.ImageBoundList', {
            deferInitialRefresh: false,
            multiSelect: true,
            store: me.store,
            displayField: me.displayField,
			imageField: me.imageField,
            border: false,
            disabled: me.disabled
        });


ItemSelector.js
onRender: function(ct, position) {
        var me = this,
            baseCSSPrefix = Ext.baseCSSPrefix,
            ddGroup = 'ItemSelectorDD-' + Ext.id(),
            commonConfig = {
                displayField: me.displayField,
                valueField: me.valueField,
		imageField: me.imageField,


multiselect-demo.js

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
    'Ext.form.Panel',
    'Ext.ux.form.MultiSelect',
    'Ext.ux.form.ItemSelector'
]);

Ext.onReady(function(){
   
    var ds = Ext.create('Ext.data.ArrayStore', {
        data: [[123,'One Hundred Twenty Three', '../shared/icons/fam/cog.png'],
            ['1', 'One', '../shared/icons/fam/grid.png'], ['2', 'Two', '../shared/icons/fam/grid.png'], ['3', 'Three', '../shared/icons/fam/grid.png'], ['4', 'Four', '../shared/icons/fam/grid.png'], ['5', 'Five', '../shared/icons/fam/grid.png'],
            ['6', 'Six', '../shared/icons/fam/grid.png'], ['7', 'Seven', '../shared/icons/fam/grid.png'], ['8', 'Eight', '../shared/icons/fam/grid.png'], ['9', 'Nine', '../shared/icons/fam/grid.png']],
        fields: ['value','text', 'image'],
        sortInfo: {
            field: 'value',
            direction: 'ASC'
        }
    });

    /*
     * Ext.ux.form.ItemSelector Example Code
     */
    var isForm = Ext.widget('form', {
        title: 'ItemSelector Test',
        width: 700,
        bodyPadding: 10,
        renderTo: 'itemselector',
        items:[{
            xtype: 'itemselector',
            name: 'itemselector',
            id: 'itemselector-field',
            anchor: '100%',
            fieldLabel: 'ItemSelector',
            imagePath: '../ux/images/',
            store: ds,
            displayField: 'text',
            valueField: 'value',
			imageField: 'image',
            value: ['3', '4', '6'],
            allowBlank: false,
            msgTarget: 'side'
        }]
    });

});




效果:

  • 大小: 16.3 KB
分享到:
评论
3 楼 amos_tl 2012-05-16  
注意返回数据的格式
2 楼 amos_tl 2012-05-16  
改下store 的proxy为json就行了
1 楼 wilsonchen 2012-05-01  
楼主你没有试过从后台获取json数据作为itemselector的数据源啊?

相关推荐

    Extjs4 combogrid扩展

    在给定的“Extjs4 combogrid扩展”中,我们主要关注的是如何将传统的下拉框(combo)扩展为同时支持网格(grid)显示的功能。 标题中的“Extjs4 combogrid扩展”意味着我们要在ExtJS 4框架内,改造原有的 Combo ...

    extjs4.2的itemselector

    `MultiSelect.js` 文件可能是修改后的 `itemselector` 组件实现,包含了对多选功能的扩展或优化。在这个文件中,我们可能会看到自定义的事件处理程序,用于监听用户在两个列表间的交互,以及与两个数据存储之间的...

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

    在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...

    extJS3.1源码及demo

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

    EXTJS扩展例子集

    4. **主题**:EXTJS支持主题定制,开发者可以通过扩展来创建自己的UI风格。 5. **插件(Plugins)**:对于已存在的EXTJS组件,插件可以添加额外的功能,而无需修改组件的原始代码。 6. **数据代理(Data Proxy)**...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    Extjs treeselector 树结构选择器

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

    extjs多选 下拉框扩展

    总结起来,"extjs多选 下拉框扩展"是为了满足ExtJS应用中多选功能的需求,通过对原生ComboBox组件进行扩展和定制,实现了带有复选框的多选下拉框。这个扩展可能包括了新的配置项、模板修改、事件处理、数据模型、...

    ExtJs中datetimefield扩展

    4. **自定义扩展**:可能这个扩展提供了一些自定义功能,比如自定义的日期时间格式,或者增强的验证机制。 5. **样式与布局**:DateTimeField可以通过CSS样式来定制外观,同时也可以利用ExtJs的布局管理与其他组件...

    extjs-ux, EXT JS 4的一些插件和扩展.zip

    extjs-ux, EXT JS 4的一些插件和扩展 插件和 EXT JS 4扩展 Ext.ux. aceeditor.Panel 演示( 简单): 链接演示( 流 语法): 链接演示:链接论坛:链接 Ext.ux. grid.feature.Tileview 演示:链接

    ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy

    4. **EXT3.0测试通过**: 这表明这些扩展已经在ExtJs 3.0版本上进行了充分的测试,证明了它们的兼容性和稳定性。ExtJs 3.0是一个成熟的版本,提供了丰富的组件和功能,广泛应用于企业级开发。 在实际应用中,这些...

    Extjs树分页组件扩展

    "Extjs树分页组件扩展"就是为了解决这一问题而设计的,它通过扩展TreeLoader和PagingToolbar,实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...

    extjs6 datetimefield 扩展时间控件 分时秒控件

    在给定的场景下,"extjs6 datetimefield 扩展时间控件 分时秒控件"描述了一个针对EXTJS6的`datetimefield`组件的增强,目的是增加对小时、分钟和秒钟的单独选择功能。 EXTJS6是Sencha公司推出的一个强大的...

    Extjs4下拉多选扩展

    此外,`mode`应设置为`EXTJS4.model.MULTI`,表示多选模式。 ```javascript Ext.define('MyApp.form.field.MultiSelectComboBox', { extend: 'Ext.form.field.ComboBox', alias: 'widget.multiselectcombobox', ...

    Extjs4的demo

    在本例中,我们假设你已经在MyEclipse中创建了一个新的Web项目,并命名为"Extjs4"。将ExtJS 4.0.7的文件放入Webroot目录,以便于访问。 接下来,你需要设置一个学习环境。确保你的机器上已经安装了MyEclipse和...

    ExtJS4多文件上传,带进度条及管理

    本文将详细解析"ExtJS4多文件上传,带进度条及管理"这一主题,涵盖其核心概念、实现方式以及相关技术。 **一、ExtJS4概述** ExtJS4是Sencha公司推出的一个前端框架,它提供了丰富的组件库和强大的数据绑定机制,...

    ExtJS-4.2.6扩展ux插件89个

    这个特定的压缩包"ExtJS-4.2.6扩展ux插件89个"包含了Ext JS 4.2.6版本的一个重要组件:ux(用户界面扩展)插件。这些插件提供了额外的功能和组件,增强了框架的原生能力,帮助开发者构建更复杂、功能更丰富的应用...

    ExtJS 组件扩展

    ### ExtJS 组件扩展知识点详解 #### 一、ExtJS组件扩展概述 ExtJS是一款基于JavaScript的开源前端框架,主要用于构建复杂的企业级Web应用程序。它提供了丰富的UI组件库,可以帮助开发者快速构建美观且功能强大的...

    extjs4学习文档

    EXTJS4 是一款强大的JavaScript框架,用于构建富客户端Web应用程序。EXTJS4的学习文档旨在帮助开发者掌握这一框架,尤其对于初学者来说,提供了宝贵的资源。文档中包含了从环境配置到实际应用开发的基础步骤。 首先...

    EXTJS4自学手册

    EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册...

Global site tag (gtag.js) - Google Analytics