htvu
13 Aug 2010, 10:13 AM
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
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