对itemrenderer的一些认知(1)-理解data driven

第一阶段的快完成了,回想一下做的过程中遇到问题,分成好几个写下来,希望对大家有帮助

首先是itemrenderer,刚开始的过程对我来说太痛苦了,在还没有充分理解它之前,简直是太二了。其中经典问题之一就是滚动后数据错位和保存的问题,小谈一下:

关键在于itemrenderer是一种data driven的东西,adobe为了提高performance会在可见的范围内建立n+1或2个itemrenderer,这就是为什么会出现拉动滚动条后出现错位的情况,因为滚动后出现的itemrenderer并不是全新的,而是沿用了滚动前已经建好了的,如果你没有重设新建的行的itemrenderer的data属性,新建的itemrender就会分配到的之前已经建好的并延用的itemrenderer的属性,比如背景颜色,选中的项等等。

所以,一定要在itemrenderer里override set data(),并且在这个set方法里用if else判定属性的变化重设各种属性,才能使每一次新建的itemrenderer都是类似于新的。而且如果想对某个itemrenderer做变化并记录,一定要用一个变量去记录,这个变量可以是定义
1. 在这个itemrenderer的容器里,
2. 或更直观的用类似于data.name这种方式去记录,

千万不能是随意一个定义在itemrenderer里的变量,这样下一次重建这行的temrenderer的时候系统就会找到这个已经存在的变量,并且赋给这个itemrenderer。这样你就能用这个变量去改变这个itemrenderer了

这个文章讲的非常好,这个文章讲的非常好,看完之后能知道原理,下面有例子,能帮助理解和自己使用
[url]http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html[/url]

这是我用到的一个combobox的itemrenderer,里面还有一些别的tricks,之后再详说,现在主要看data那块:



public class ActionComboBoxRenderer extends ComboBox
{
public function ActionComboBoxRenderer(){
super();
}

override protected function createChildren():void{
super.createChildren();
}

public var actionList:ArrayCollection;
public var selectedAction:ActionVo;
//这些量是用来跟父容器交互的
public var currentOwner:LinkageIPPDataGrid;
public var currentOwnerDataProvider:ArrayCollection;
public var index:int;

override public function set data(value:Object):void {
super.data = value; // this must be called
currentOwner = new LinkageIPPDataGrid();
currentOwner = owner as LinkageIPPDataGrid;

this.dataProvider = null;

//因为我每点一次这个combobox都问后台要数据做dataProvider,所以要听这两个events
this.addEventListener(DropdownEvent.OPEN, this.loadActionList);
this.addEventListener(ListEvent.CHANGE , this.handleSelect);
//这个就是用来检查属性的改变的方法
checkActionSelect();
}

public function checkActionSelect():void{

//获得父容器的信息
currentOwnerDataProvider = currentOwner.dataProvider as ArrayCollection;
index = currentOwnerDataProvider.getItemIndex(data);
var obj:Object = currentOwnerDataProvider.getItemAt(index);


if(obj.selectedAction){
data.selectAct = obj.selectedAction;
}

//这一块是关键,就是这里体现了对属性的改变,一定要用if和else,如果漏了else,就等着错位吧
if(data.selectAct){
this.prompt = data.selectAct.actionName;
if(data.selectAct.actionId == "2"){
this.setStyle("chromeColor", 0x00CC00);
}
else if(data.selectAct.actionId == "3"){
this.setStyle("chromeColor", 0xff1d23);
}
}else{
this.prompt = "Select";
this.setStyle("chromeColor", "white");
}
}


public function loadActionList(event:DropdownEvent):void{
this.removeEventListener(DropdownEvent.OPEN, loadActionList);
LinkageHttpService.getInstance().addEventListener(ActionListRendererEvent.ACTION_LIST,
handleActionListData);
LinkageHttpService.getInstance().getActionList();
}

//对后台数据的请求和对选择了数据的
public function handleActionListData(event:ActionListRendererEvent):void{
this.actionList = event.dataCollection;
this.dataProvider = actionList;
this.labelField = "actionName";
this.open();
LinkageHttpService.getInstance().removeEventListener(ActionListRendererEvent.ACTION_LIST,
handleActionListData);
}
//对选择了数据的保存,是通过用event传给从父容器并用自身data.selectAct来保存
public function handleSelect(event:ListEvent):void{
currentOwnerDataProvider = currentOwner.dataProvider as ArrayCollection;
index = currentOwnerDataProvider.getItemIndex(data);

this.selectedAction = actionList.getItemAt(this.selectedIndex) as ActionVo;
if(this.selectedAction is ActionVo){
if(this.selectedAction.actionId == "2"){
this.setStyle("chromeColor", 0x00CC00);
}else this.setStyle("chromeColor", 0xff1d23);
}else this.setStyle("chromeColor", 0xffffff);

this.data.selectAct = selectedAction;
this.dispatchEvent(new ActionSelectEvent("actionSelected", selectedAction, index));
}

override public function validateNow():void{
super.validateNow();
this.height = 26;
this.y += 8;
}
}




好吧,code单独拿出来可能不容易看懂,但要看的重点应该够清楚,下次再讲讲里面的比如父容器交互的问题吧
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以尝试使用vue-virtual-scroll-list和element-ui的el-table组件配合使用实现循环滚动列表。在el-table上使用sticky属性可以实现固定表头,具体实现可以参考以下代码: ``` <template> <div class="scroll-list"> <el-table :data="items" style="width: 100%" :height="tableHeight" :sticky-header="true"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </div> </template> <script> import VirtualList from 'vue-virtual-scroll-list'; export default { name: "ScrollList", components: { VirtualList, }, props: ['items', 'itemHeight'], computed: { // 根据数据长度和每个元素的高度计算列表高度 tableHeight() { return this.items.length * this.itemHeight; } }, methods: { // 渲染虚拟列表元素 itemRenderer(item, index) { return ( <div class="virtual-item"> <span>{item.name}</span> <span>{item.age}</span> <span>{item.address}</span> </div> ) }, // 获取虚拟列表元素高度 itemSize() { return this.itemHeight; }, }, } </script> <style scoped> .scroll-list { height: 400px; // 列表高度 overflow-y: scroll; } .virtual-item { height: 40px; // 每个元素的高度 line-height: 40px; } </style> ``` 其中,VirtualList组件用于渲染虚拟列表元素,计算显示区域内需要显示的元素,可以有效提升大数据量列表的性能。el-table的sticky属性用于实现表头固定,设置为true即可。在组件中计算列表高度和元素高度,将其传递给VirtualList组件即可实现循环滚动列表。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值