- 浏览: 333902 次
- 性别:
- 来自: 长沙
文章分类
最新评论
-
努力吧飞翔:
...
[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 887两个浮动层的高度统一问题: // 保持边框对齐 / ... -
EXTJS ?JQUERY?
2014-06-08 09:46 0EXTJS ?JQUERY? --------------- ... -
[EXTJS4] 类的定义与类的创建
2013-08-10 16:55 11161. Ext.Base function Base(){} ... -
import.js
2013-07-27 04:02 961import.js oop.define('wldm.c ... -
oop.js
2013-07-23 21:12 789oop.js /** * 面向对象核心类. * ... -
[Chrome插件] 视频屏蔽专家绿色版
2013-05-25 05:20 1050亲测可以正常安装与屏蔽 YK! 目录结构: e: - bl ... -
IE JavaScript 最佳实践
2012-12-29 14:42 9591 使用 var 定义局部变量 2 尽可能缓存变量,查询结 ... -
[ExtJS4] TreePanel 取消默认双击事件行为:展开折叠菜单
2012-08-13 22:55 2796[ExtJS4] TreePanel 取消默认双击事件行为:展 ... -
[ExtJS] GridPanel 列自适应内容宽度
2012-08-11 20:42 4575[ExtJS] GridPanel 列自适应 ... -
[ExtJS4] 布局
2012-05-21 05:53 15631 介绍 布局,简单来说就是设置元素的大小和位置。 ... -
[ExtJS] MVC应用架构示例
2012-05-16 07:18 91881 项目目录结构 2. app.js Ext.Loa ... -
ExtJS4 API
2012-03-30 12:42 19341 Ext.util.HashMap Ext.util.Mix ... -
ExtJS4 Direct Demo using JAVA
2012-03-22 19:50 1701JAVA版本的 Ext Direct Demo for Ext ... -
Unix 脚本编程基础
2012-03-12 06:39 1523脚本模板 #!/usr/bin/ksh # # SCR ... -
ExtJS Combo box Store 加载两次问题
2012-02-06 14:40 1924ExtJS Combo box Store 加载两次问题, 若 ... -
Ext JS 4: 动态加载与新的类体系
2012-02-05 12:58 1584Ext JS 4: 动态加载与新的类体系 1 Ext 4 部 ... -
JavaScript 闭包
2011-11-14 07:40 10821 介绍 最简单的解释是闭包允许内部函数, 即函数可以嵌套. ... -
MYSQL 启动管理脚本工具
2011-05-01 18:58 1113mysqlm.bat -------------------- ... -
Sencha Touch 入门指导
2010-10-12 00:23 3243Sencha Touch 入门指导 1. 介绍Sencha ... -
EXT 源码学习与研究(一)
2010-10-02 06:25 1210EXT 源码学习与研究(一) 1. 适配器 EXT 原来 ...
相关推荐
4.2自带的itemselector,有问题,只有fromstore没有tostore,作了一些修改,可以使用,附件中有效果图
包含各种类型的extjs小图标,Extjs4小图标
对combo进行扩展,支持grid显示。
extjs多选 下拉框扩展
ExtJs中datetimefield扩展,不缺少任何文件,可以直接浏览效果,查看扩展代码
Extjs4下拉多选扩展
基于itemselector做出的拓展,fromField以树结构展示。
Extjs4的demo 很不错的例子
EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册...
EXTJS3.0扩展例子集合...内含源代码...
Extjs表单VTYPE扩展,方便验证!
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议
ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy,经过EXT3.0版本测试! 通过DWR向Ext提供数据!非常棒的扩展!
extJs3升级extjs4方案, extJs3升级extjs4需要修改大量代码
ExtJS 组件扩展 如何正确使用Extjs---扩展组件的两个层次
Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...
extjs-ux, EXT JS 4的一些插件和扩展 插件和 EXT JS 4扩展 Ext.ux. aceeditor.Panel 演示( 简单): 链接演示( 流 语法): 链接演示:链接论坛:链接 Ext.ux. grid.feature.Tileview 演示:链接
由于extjs3.0自己封装的时间不能够选择时分秒,给大家开发带来了一些麻烦。虽然网上有ext2.0的日期扩展控件,但...公司现在项目正用了,因此我就对extjs3.0时间控件的扩展,实现了可选择时分秒功能。希望对大家有帮助。
我很自豪能代表Sencha和ExtJS团队和大家成功的分享了ExtJS 4的预览版、3个beta版和今天发布的正式版等5个版本。 ExtJS 4从创建之初,就以最全面现代化为目标,它采用了改进的架构和加入了许多新的特性,从而使你可以...
ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)--...