模拟 ext 的 ItemSelector 写了个控件,可以实现拖拽、鼠标双击、按钮操作功能,大概界面如下,原来里面的上下移动的功能感觉没有什么用也就没有实现,有需要的自己加两个方法实现下:
itemSelector.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="{wid}" height="{hei}" creationComplete="init();">
<mx:Script source="./code/itemSelector.as"/>
<mx:HBox>
<mx:VBox>
<mx:Label fontWeight="bold" text="{srclabel}"/>
<mx:List id="src" width="{listwid}" height="{listhei}" dataProvider="{srclist}"
allowMultipleSelection="true" dragEnabled="true" dropEnabled="true"
dragMoveEnabled="true" doubleClick="srcDoubleClick(event);" doubleClickEnabled="true"/>
</mx:VBox>
<mx:VBox verticalAlign="middle" height="100%">
<mx:TileList id="imgSelect" maxColumns="1" width="20" height="80"
verticalAlign="middle" borderStyle="none"
itemClick="imgSelect_itemClick(event);">
<mx:dataProvider>
<mx:Array>
<mx:Object icon="{insAll}" label=""/>
<mx:Object icon="{ins}" label=""/>
<mx:Object icon="{del}" label=""/>
<mx:Object icon="{delAll}" label=""/>
</mx:Array>
</mx:dataProvider>
</mx:TileList>
</mx:VBox>
<mx:VBox>
<mx:Label fontWeight="bold" text="{destlabel}"/>
<mx:List id="dest" width="{listwid}" height="{listhei}" dataProvider="{destlist}"
allowMultipleSelection="true" dragEnabled="true" dropEnabled="true"
dragMoveEnabled="true" doubleClick="destDoubleClick(event);" doubleClickEnabled="true"/>
</mx:VBox>
</mx:HBox>
</mx:Canvas>
itemSelector.as
// ActionScript file
/**
* @auth:Jack
* @date:2009-11-18
*/
import flash.events.MouseEvent;
import mx.collections.ArrayCollection;
import mx.events.ListEvent;
import mx.rpc.events.ResultEvent;
[Bindable]
[Embed(source="flex/assets/images/table_row_delete.png")]
public var ins:Class;
[Bindable]
[Embed(source="flex/assets/images/table_row_insert.png")]
public var del:Class;
[Bindable]
[Embed(source="flex/assets/images/application_side_contract.png")]
public var delAll:Class;
[Bindable]
[Embed(source="flex/assets/images/application_side_expand.png")]
public var insAll:Class;
[Bindable]
public var srclist:ArrayCollection;
[Bindable]
public var destlist:ArrayCollection;
[Bindable]
public var srclabel:String;
[Bindable]
public var destlabel:String;
[Bindable]
public var wid:uint;
[Bindable]
public var hei:uint;
[Bindable]
public var listwid:uint;
[Bindable]
public var listhei:uint;
private function init():void {
if (srclist == null) srclist = new ArrayCollection();
if (destlist == null) destlist = new ArrayCollection();
wid = wid < 400 ? 400 : wid;
hei = hei < 200 ? 200 : hei;
listwid = wid * 0.45;
listhei = hei - 30;
}
private function findAuthRangeHandler(event:ResultEvent):void {
var obj:Object = event.result as Object;
srclist = obj.prodSpecs as ArrayCollection;
}
private function imgSelect_itemClick(event:ListEvent):void {
var ind:uint = event.rowIndex;
switch (ind) {
case 0:
for each (var obj1:Object in srclist) {
destlist.addItem(obj1);
}
srclist.removeAll();
break;
case 1:
for each (var obj2:Object in src.selectedItems) {
destlist.addItem(obj2);
}
for each (var ind2:int in src.selectedIndices) {
srclist.removeItemAt(ind2);
}
break;
case 2:
for each (var obj3:Object in dest.selectedItems) {
srclist.addItem(obj3);
}
for each (var ind3:int in dest.selectedIndices) {
destlist.removeItemAt(ind3);
}
break;
case 3:
for each (var obj4:Object in destlist) {
srclist.addItem(obj4);
}
destlist.removeAll();
break;
default:
}
}
private function srcDoubleClick(event:MouseEvent):void {
destlist.addItem(src.selectedItem);
srclist.removeItemAt(src.selectedIndex);
}
private function destDoubleClick(event:MouseEvent):void {
srclist.addItem(dest.selectedItem);
destlist.removeItemAt(dest.selectedIndex);
}
调用方法:
<isps:itemSelector id="ps" width="600" height="500"
srclist="{prodSpecs}" wid="400" hei="250" destlist="{orderTypes}"
srclabel="所有产品规格" destlabel="已选产品规格"/>
isps 自定义命名空间,指向你存放 itemSelector.mxml 文件的位置;
srclist 源数据源,数据结构为 [{label:"haha", data:"1"}, {label:"heihei", data:"2"}] 的 ArrayCollection ;
destlist 目标数据源,数据结构和源数据一样,如果初始为空的话可以不传该属性,最后取值也直接使用 ps.destlist 即可,取出来也是上面格式的 ArrayCollection;
wid 为画布宽度,最小限制为400;
hei 为画布高度,最小限制为200;
srclabel 为源数据上面的描述;
destlabel 为目标数据上面的描述。
- 大小: 16.7 KB
分享到:
相关推荐
模仿Ext4实现ItemSelector,在Rally App开发中虽然是Ext4,但ux包下面的对象被阉割了 所以手动实现了一个,布局和组件化方面还有待改进。
基于itemselector做出的拓展,fromField以树结构展示。
4.2自带的itemselector,有问题,只有fromstore没有tostore,作了一些修改,可以使用,附件中有效果图
itemSelector: 'li.phone', overClass : 'phone-hover', singleSelect: true, multiSelect : false, autoScroll : true }); new Ext.Panel({ layout: 'fit', items : dataview, height: document.body....
NULL 博文链接:https://xuliduo.iteye.com/blog/656767
动画自适应,实现完美的布局,从移动端到pc端的完美变化,还可以搜索,过滤等功能
function ItemSelector(elem,opts){ this.elem = elem ; this.opts = opts ; } ; var ISProto = ItemSelector.prototype ; ISProto.getElem = function(){ return this.elem ;
$(function(){ //需要瀑布流布局的容器 var $container = $(".float-wrap"); $container.imagesLoaded( function(){ $container.isotope({ isResizableL:true, ... itemSelector :'.item' }); }); });
jquery masonry与infinitescroll两款瀑布流插件制作当下最流行的瀑布流图片展示实例,通过鼠标滚动图片无限加载的类似瀑布的效果的图片展示。... itemSelector: '.masonry_brick', columnWidth:226,
/** * 自动刷新 * @type {*|jQuery|HTMLElement} */ var $container = $('#main');... itemSelector : '.item', columnWidth:205, gutterWidth:10, isAnimated: true }); }); var pre_href;
小雨 特征 手风琴 诺林 安装及使用 npm install tbd ... itemSelector: ".knolling-el", layout: 'grid, columns: 3, gutter:".gutter", draggable: true }); 选项 let knolling = new Knolling( w
itemSelector : '.col' , columns : [ { breakPoint : 1200 , columns : 4 } , { breakPoint : 1000 , columns : 3 } , { breakPoint : 600 , columns : 2 } ] } ) ; 应用程序接口 var h = new ...
[] :只需输入目标幻灯片[whereAmI] : 返回当前幻灯片[next] : 转到下一张幻灯片[上一张]:转到上一张幻灯片[addItems] : 例如 $(el).miniCarousel('addItems', array) 选项: itemSelector : 项目类,例如“.child...
壁画可定制的平铺演示 jQuery 插件。... itemSelector : ".mural-item" , speed : 250 } ) ;} ) ;</ script >文档选项环境类型默认值描述项目选择器String "" 类选择器,确定 Mural 应影响哪些 HTML 元素。
对响应的项目网格进行分类,排序和过滤。 npm install shufflejs 文档和演示 用法(与ES6一起使用) ... itemSelector : '.js-item' , sizer : '.js-shuffle-sizer' , } ) ; 灵感 这个项目的灵感来自和。