[FIXED-231] NestedList add items problem

[htvu]

Hi all,
I used Nestedlist sample with extended of Xaab (http://myxaab.wordpress.com/2010/07/27/dynamically-loading-ext-nestedlist/). But there is a problem that I can't solve. NestedList added items with strange order, it is not same with ordering of my array. It add first 9 items ok but do wrong with 10th (it insert at the top of list instead at the end). I insert an alert command when list item rendered for easy to see the problem.

here is the index.js code


Ext.ns('Ext.ws');
Ext.ws.NestedList = Ext.extend(Ext.NestedList, {
resetList : function(list, init) {
var items = init ? list : list.items;
if (!list.isList) {
list = new Ext.Container({
isList: true,
baseCls: 'x-list',
cls: 'x-list-flat',
defaults: {
xtype: 'button',
baseCls: 'x-list-item',
pressedCls: 'x-item-pressed',
ui: null,
pressedDelay: true,
tpl: new Ext.XTemplate('<img class="cat-icon" src="bong-icon.png" style="background: url(http://caubevang.com/assets/images/products/{image}) center center no-repeat;" />','<div class="cat-info"><span class="cat-name">{text}</span><span class="cat-description">Dien giai</span></div>'),
listeners:{
render: function(t) {
alert(t.data.text + t.id);
}
}
},
listeners: {
afterrender: function() {
this.getContentTarget().addClass('x-list-parent');
}
},
scroll: 'vertical',
items: items,
text: list.text
});
}

this.lists = this.lists || [];
if (!this.lists.contains(list)) {
this.lists[0] = this.add(list);
}

var isBack = (this.lists.indexOf(list) < this.lists.indexOf(this.activeItem));
if (this.rendered) {
this.setCard(list, init ? false : {
type: this.animation,
reverse: isBack
});
}
this.activeItem = list;
},

onItemTap : function(item) {
item.el.radioClass('x-item-selected');
if (item.items) {
this.backButton.show();
this.setList(item);
this.listIndex++;
}
this.fireEvent('listchange', this, item);
}
});

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var nestedList = new Ext.ws.NestedList({
fullscreen: true,
items: [],
toolbar:{
title:'Danh m?c s?n ph?m',
items:[]
}
});

var loadCategories = function() {

listdata = [{"id":"9","text":"","baseCls":"x-list-item odd","data":{"text":"Bao cao su 12 Con Gi\u00e1p"}},{"id":"17","text":"","baseCls":"x-list-item even","data":{"text":"Bao cao su c\u00f3 Bi"}},{"id":"19","text":"","baseCls":"x-list-item odd","data":{"text":"Bao cao su c\u00f3 Gai"}},{"id":"21","text":"","baseCls":"x-list-item even","data":{"text":"Bao cao su c\u00f3 Gai & G\u00e2n"}},{"id":"23","text":"","baseCls":"x-list-item odd","data":{"text":"Bao cao su c\u00f3 G\u00e2n"}},{"id":"61","text":"","baseCls":"x-list-item even","data":{"text":"Bao Cao Su c\u00f3 R\u00e2u & Gai"}},{"id":"77","text":"","baseCls":"x-list-item odd","data":{"text":"Bao Cao Su C\u1ef1c Si\u00eau M\u1ecfng"}},{"id":"27","text":"","baseCls":"x-list-item even","data":{"text":"Bao cao su Di\u1ec7t Tinh Tr\u00f9ng"}},{"id":"29","text":"","baseCls":"x-list-item odd","data":{"text":"Bao cao su Durex"}},{"id":"31","text":"","baseCls":"x-list-item even","data":{"text":"Bao cao su gi\u00e1 r\u1ebb"}},{"id":"33","text":"","baseCls":"x-list-item odd","data":{"text":"Bao cao su H\u01b0\u01a1ng Tr\u00e1i C\u00e2y"}},{"id":"37","text":"","baseCls":"x-list-item even","data":{"text":"Bao Cao Su L\u00e0m To & D\u00e0i D\u01b0\u01a1ng V\u1eadt"}},{"id":"74","text":"","baseCls":"x-list-item odd","data":{"text":"Bao Cao Su N\u1eef"}},{"id":"35","text":"","baseCls":"x-list-item even","data":{"text":"Bao Cao Su Si\u00eau M\u1ecfng"}},{"id":"70","text":"","baseCls":"x-list-item odd","data":{"text":"Bao Cao Su Size L\u1edbn"}},{"id":"65","text":"","baseCls":"x-list-item even","data":{"text":"Bao Cao Su Size Nh\u1ecf"}},{"id":"55","text":"","baseCls":"x-list-item odd","data":{"text":"BCS k\u00e9o d\u00e0i th\u1eddi gian QHTD"}},{"id":"71","text":"","baseCls":"x-list-item even","data":{"text":"D\u1ee5ng C\u1ee5 Y Khoa"}},{"id":"75","text":"","baseCls":"x-list-item odd","data":{"text":"\u0110\u1ed3 Ch\u01a1i Sex"}},{"id":"53","text":"","baseCls":"x-list-item even","data":{"text":"Gel B\u00f4i Tr\u01a1n \u00c2m \u0110\u1ea1o"}},{"id":"76","text":"","baseCls":"x-list-item odd","data":{"text":"Gel B\u00f4i Tr\u01a1n T\u0103ng Kho\u00e1i C\u1ea3m"}},{"id":"69","text":"","baseCls":"x-list-item even","data":{"text":"H\u00e0ng \u0110\u1ed9c"}},{"id":"68","text":"","baseCls":"x-list-item odd","data":{"text":"Kh\u1ea9u Trang"}},{"id":"43","text":"","baseCls":"x-list-item even","data":{"text":"M\u00e0ng Film Tr\u00e1nh Thai"}},{"id":"67","text":"","baseCls":"x-list-item odd","data":{"text":"M\u00e1y matxa mini b\u1ecf t\u00fai"}},{"id":"45","text":"","baseCls":"x-list-item even","data":{"text":"Que Th\u1eed Thai"}},{"id":"57","text":"","baseCls":"x-list-item odd","data":{"text":"Th\u1ef1c Ph\u1ea9m T\u0103ng C\u01b0\u1eddng Sinh L\u00fd"}},{"id":"47","text":"","baseCls":"x-list-item even","data":{"text":"Thu\u1ed1c k\u00e9o d\u00e0i th\u1eddi gian QHTD"}},{"id":"49","text":"","baseCls":"x-list-item odd","data":{"text":"Thu\u1ed1c Ng\u1eeba Thai"}},{"id":"51","text":"","baseCls":"x-list-item even","data":{"text":"V\u00f2ng Rung"}}];
nestedList.resetList(listdata,true);
};

loadCategories();
nestedList.on('listchange', function(list, item) {
list.toolbar.doLayout();
});
}
});

and here is index.html


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nested List</title>
<link rel="stylesheet" href="st/resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="st/ext-touch.js"></script>
<script type="text/javascript" src="index.js"></script>
<style>
.demos-loading {
background: rgba(0,0,0,.3) url(loading.gif) center center no-repeat;
display: block;
width: 10em;
height: 10em;
position: absolute;
top: 50%;
left: 50%;
margin-left: -5em;
margin-top: -5em;
-webkit-border-radius: .5em;
color: #fff;
text-shadow: #000 0 1px 1px;
text-align: center;
padding-top: 8em;
font-weight: bold;
}
.cat-icon {
background-color: #fff;
margin: 0 auto;
width: 57px;
height: 57px;
padding: 0px;
text-align: center;
/* border-radius */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* box-shadow */
-webkit-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
box-shadow: rgba(0,0,0,0.2) 0px 1px 3px;
}

.x-list-item {
display:-webkit-box;
padding:5px 10px 5px 10px !important;
height:21px !important;
background: url(cat-next-arrow.png) right center no-repeat;
}

.x-list-item.odd {
background-color:#98989c;
border-top: 1px solid #a7a8ab !important;
border-bottom: 1px solid #898a8d !important;
}
.x-list-item.even {
background-color:#adadb0;
border-top: 1px solid #bbbbbd !important;
border-bottom: 1px solid #8a8a8d !important;
}
.x-list-item .cat-info {
padding:0px 10px 0px 15px;

display:block;

-webkit-box-flex:1;
}

.x-list-item .cat-info .cat-name {
font-weight:bold;
text-shadow:rgba(255,255,255,0.3) 0px 1px 0px;
font-size:0.9em;
display:block;
}

.x-list-item .cat-info .cat-description {
text-shadow:rgba(255,255,255,0.3) 0px 1px 0px;
font-size:0.7em;
display:block;
}

.x-toolbar {
-webkit-box-pack:justify;
height:40px;
padding:0;
font-size:14px;
line-height:14px;
}
</style>
</head>
<body></body>
</html>
Please help me !

Thanks

[htvu]

I can make it displays right ordering but it's just css tricks. Still wrong ordering in DOM tree.

[meyerovb]

NestedList is currently being re-factored to work off a data store to enable easy list manipulation. It shouldn't be long before it's released, I recommend you wait for it before implementing this functionality, as what you are trying to do will probably be possible in just a few lines of code.

As a note, it's not a great idea to utilize internals of components. Try to stick to only the public properties. The documentation may not be perfect yet (some properties which should be public may not be shown in the documentation), but we are working hard to get it normalized. If you stick to public-only interfaces you'll have much less problems upgrading to newer versions of the platform that contain features you may be trying to implement by accessing private members.

[htvu]

Thanks for your reply. I waiting for next release. Hoping it come soon.

[blessan]

meyerovb can u give an appox date on which the next release will come?

[Jamie Avins]

We should have a release out by early next week. Not sure if this component rewrite will be in it though.

[aconran]

NestedList has been refactored to bind to a TreeStore in the 0.94 build.

It is an Ext.Panel with a layout of card that holds Ext.List's for each level of the Tree. You can optionally implement a getDetailCard which will show a card after tapping on a leaf node in the TreeStore.