- 浏览: 341687 次
- 性别:
- 来自: 长沙
文章分类
最新评论
-
努力吧飞翔:
...
[ExtJS] MVC应用架构示例 -
coolnight:
[Maven]Nexus 安装与配置 -
Kevin_jiang2011:
官网的文档写的不好。 简单的执行命令,又要重新下载一个ecli ...
jBPM5 入门 -
litterdeer:
好东西....
[ExtJS] MVC应用架构示例 -
basherone:
可以用,谢谢了
[ExtJS] MVC应用架构示例
ImageBoundList.js
MultiSelect.js
ItemSelector.js
multiselect-demo.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' }] }); });
效果:
评论
3 楼
amos_tl
2012-05-16
注意返回数据的格式
2 楼
amos_tl
2012-05-16
改下store 的proxy为json就行了
1 楼
wilsonchen
2012-05-01
楼主你没有试过从后台获取json数据作为itemselector的数据源啊?
发表评论
-
前端常用JS代码
2014-08-23 10:43 982两个浮动层的高度统一问题: // 保持边框对齐 / ... -
EXTJS ?JQUERY?
2014-06-08 09:46 0EXTJS ?JQUERY? --------------- ... -
[EXTJS4] 类的定义与类的创建
2013-08-10 16:55 11661. Ext.Base function Base(){} ... -
import.js
2013-07-27 04:02 996import.js oop.define('wldm.c ... -
oop.js
2013-07-23 21:12 827oop.js /** * 面向对象核心类. * ... -
[Chrome插件] 视频屏蔽专家绿色版
2013-05-25 05:20 1098亲测可以正常安装与屏蔽 YK! 目录结构: e: - bl ... -
IE JavaScript 最佳实践
2012-12-29 14:42 10101 使用 var 定义局部变量 2 尽可能缓存变量,查询结 ... -
[ExtJS4] TreePanel 取消默认双击事件行为:展开折叠菜单
2012-08-13 22:55 2843[ExtJS4] TreePanel 取消默认双击事件行为:展 ... -
[ExtJS] GridPanel 列自适应内容宽度
2012-08-11 20:42 4659[ExtJS] GridPanel 列自适应 ... -
[ExtJS4] 布局
2012-05-21 05:53 16231 介绍 布局,简单来说就是设置元素的大小和位置。 ... -
[ExtJS] MVC应用架构示例
2012-05-16 07:18 93121 项目目录结构 2. app.js Ext.Loa ... -
ExtJS4 API
2012-03-30 12:42 19841 Ext.util.HashMap Ext.util.Mix ... -
ExtJS4 Direct Demo using JAVA
2012-03-22 19:50 1765JAVA版本的 Ext Direct Demo for Ext ... -
Unix 脚本编程基础
2012-03-12 06:39 1593脚本模板 #!/usr/bin/ksh # # SCR ... -
ExtJS Combo box Store 加载两次问题
2012-02-06 14:40 1982ExtJS Combo box Store 加载两次问题, 若 ... -
Ext JS 4: 动态加载与新的类体系
2012-02-05 12:58 1628Ext JS 4: 动态加载与新的类体系 1 Ext 4 部 ... -
JavaScript 闭包
2011-11-14 07:40 11421 介绍 最简单的解释是闭包允许内部函数, 即函数可以嵌套. ... -
MYSQL 启动管理脚本工具
2011-05-01 18:58 1149mysqlm.bat -------------------- ... -
Sencha Touch 入门指导
2010-10-12 00:23 3282Sencha Touch 入门指导 1. 介绍Sencha ... -
EXT 源码学习与研究(一)
2010-10-02 06:25 1261EXT 源码学习与研究(一) 1. 适配器 EXT 原来 ...
相关推荐
在给定的“Extjs4 combogrid扩展”中,我们主要关注的是如何将传统的下拉框(combo)扩展为同时支持网格(grid)显示的功能。 标题中的“Extjs4 combogrid扩展”意味着我们要在ExtJS 4框架内,改造原有的 Combo ...
`MultiSelect.js` 文件可能是修改后的 `itemselector` 组件实现,包含了对多选功能的扩展或优化。在这个文件中,我们可能会看到自定义的事件处理程序,用于监听用户在两个列表间的交互,以及与两个数据存储之间的...
在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...
通过下载并研究"ext-3.1.0"这个压缩包中的源码和示例,开发者不仅可以学习到ExtJS的基本用法,还能深入理解其内部机制,这对于提升JavaScript开发技能和扩展自定义功能非常有帮助。不过需要注意,随着技术的发展,...
4. **主题**:EXTJS支持主题定制,开发者可以通过扩展来创建自己的UI风格。 5. **插件(Plugins)**:对于已存在的EXTJS组件,插件可以添加额外的功能,而无需修改组件的原始代码。 6. **数据代理(Data Proxy)**...
ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...
ExtJS TreeSelector是一款基于ExtJS库的组件,它扩展了基础的itemselector功能,提供了一种以树形结构展示数据的选择器。这个组件特别适用于那些需要用户从层次化的数据集中进行选择的应用场景,例如组织架构、目录...
总结起来,"extjs多选 下拉框扩展"是为了满足ExtJS应用中多选功能的需求,通过对原生ComboBox组件进行扩展和定制,实现了带有复选框的多选下拉框。这个扩展可能包括了新的配置项、模板修改、事件处理、数据模型、...
4. **自定义扩展**:可能这个扩展提供了一些自定义功能,比如自定义的日期时间格式,或者增强的验证机制。 5. **样式与布局**:DateTimeField可以通过CSS样式来定制外观,同时也可以利用ExtJs的布局管理与其他组件...
extjs-ux, EXT JS 4的一些插件和扩展 插件和 EXT JS 4扩展 Ext.ux. aceeditor.Panel 演示( 简单): 链接演示( 流 语法): 链接演示:链接论坛:链接 Ext.ux. grid.feature.Tileview 演示:链接
4. **EXT3.0测试通过**: 这表明这些扩展已经在ExtJs 3.0版本上进行了充分的测试,证明了它们的兼容性和稳定性。ExtJs 3.0是一个成熟的版本,提供了丰富的组件和功能,广泛应用于企业级开发。 在实际应用中,这些...
"Extjs树分页组件扩展"就是为了解决这一问题而设计的,它通过扩展TreeLoader和PagingToolbar,实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...
在给定的场景下,"extjs6 datetimefield 扩展时间控件 分时秒控件"描述了一个针对EXTJS6的`datetimefield`组件的增强,目的是增加对小时、分钟和秒钟的单独选择功能。 EXTJS6是Sencha公司推出的一个强大的...
此外,`mode`应设置为`EXTJS4.model.MULTI`,表示多选模式。 ```javascript Ext.define('MyApp.form.field.MultiSelectComboBox', { extend: 'Ext.form.field.ComboBox', alias: 'widget.multiselectcombobox', ...
在本例中,我们假设你已经在MyEclipse中创建了一个新的Web项目,并命名为"Extjs4"。将ExtJS 4.0.7的文件放入Webroot目录,以便于访问。 接下来,你需要设置一个学习环境。确保你的机器上已经安装了MyEclipse和...
本文将详细解析"ExtJS4多文件上传,带进度条及管理"这一主题,涵盖其核心概念、实现方式以及相关技术。 **一、ExtJS4概述** ExtJS4是Sencha公司推出的一个前端框架,它提供了丰富的组件库和强大的数据绑定机制,...
这个特定的压缩包"ExtJS-4.2.6扩展ux插件89个"包含了Ext JS 4.2.6版本的一个重要组件:ux(用户界面扩展)插件。这些插件提供了额外的功能和组件,增强了框架的原生能力,帮助开发者构建更复杂、功能更丰富的应用...
### ExtJS 组件扩展知识点详解 #### 一、ExtJS组件扩展概述 ExtJS是一款基于JavaScript的开源前端框架,主要用于构建复杂的企业级Web应用程序。它提供了丰富的UI组件库,可以帮助开发者快速构建美观且功能强大的...
EXTJS4 是一款强大的JavaScript框架,用于构建富客户端Web应用程序。EXTJS4的学习文档旨在帮助开发者掌握这一框架,尤其对于初学者来说,提供了宝贵的资源。文档中包含了从环境配置到实际应用开发的基础步骤。 首先...
EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册...