Results 1 to 7 of 7

Thread: [FIXED-231] NestedList add items problem

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default [FIXED-231] NestedList add items problem

    Hi all,
    I used Nestedlist sample with extended of Xaab (http://myxaab.wordpress.com/2010/07/...xt-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
    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
    Code:
    <!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

  2. #2

    Default

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

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    220

    Default

    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.

  4. #4

    Default

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

  5. #5
    Sencha User blessan's Avatar
    Join Date
    May 2010
    Posts
    316

    Default

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

  6. #6
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661

    Default

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

  7. #7
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    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.
    Aaron Conran
    @aconran

Similar Threads

  1. add new items to nestedlist
    By Alexander.K in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 7 Sep 2010, 6:17 PM
  2. how can i add NestedList to a html Page
    By mal2000b in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 31 Aug 2010, 1:39 AM
  3. NestedList back button only remembers text and items?
    By jsm174 in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 6 Aug 2010, 11:13 AM
  4. Toggle.setValue() and NestedList.Add() Problems
    By SuperTron in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 30 Jul 2010, 9:51 PM
  5. Replies: 5
    Last Post: 30 Sep 2009, 7:20 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •