1. #1
    Sencha User
    Join Date
    Nov 2012
    Location
    India
    Posts
    25
    Vote Rating
    0
    shri_iitk is on a distinguished road

      0  

    Default Unanswered: How to create complex dataitem in Sencha touch 2.1?

    Unanswered: How to create complex dataitem in Sencha touch 2.1?


    I want to create dataitem in a list which looks like this:
    fbQNB.png


    but I am unable to render middle `vbox` section with 3 components.
    I am following this example : http://www.sencha.com/blog/dive-into...ouch-2-beta-2/


    This is how I am defining my data item:
    Code:
        Ext.define('MyTabApp.view.CartListItem', {
            extend    : 'Ext.dataview.component.DataItem',
            alias     : 'widget.cartlistitem',
            requires: [
                       'Ext.Img'
            ],
            config    : {
                cls: 'cart-list-item',
                layout: {
                    type: 'hbox',
                    align: 'center'
                },
                image: true,
                details: {
                    cls: 'x-details',
                    flex: 3,
                },
                pricing: {
                    cls: 'x-pricing',
                    flex: 1
                },
                removeButton: {
                    iconCls     : 'delete',
                    iconMask    : true,
                    ui          : 'astonvilla',
                    style       : 'margin-left: 5px; margin-top:10px; padding:5px;'
                },
                moveButton: {
                    iconCls     : 'reply',
                    iconMask    : true,
                    ui          : 'astonvilla',
                    style       : 'margin-left: 5px; margin-top:10px; padding:5px;'
                },
                editButton: {
                    iconCls     : 'compose',
                    iconMask    : true,
                    ui          : 'astonvilla',
                    style       : 'margin-left: 5px; margin-top:10px; padding:5px;'
                },
                dataMap: {
                    getImage: {
                        setSrc            : 'itemImage'
                    },
        
                    getDetails: {
                        setItemTitle    : 'title',
                        setQuantity        : 'quantity'
                    },
                    
                    getPricing: {
                        setHtml            : 'totalPrice'
                    },
                },
            },
            applyImage: function(config) {
                return Ext.factory(config, Ext.Img, this.getImage());
            },
        
            updateImage: function(newImage, oldImage) {
                if (newImage) {
                    this.add(newImage);
                }
        
                if (oldImage) {
                    this.remove(oldImage);
                }
            },
            
            applyDetails: function(config) {
                console.log("applyDetails");
                var details = Ext.factory(config, MyTabApp.view.CartListItemDetails, this.getDetails());
                console.log("applyDetails done");
                console.log(details);
                return details;
            },
        
            updateDetails: function(newDetails, oldDetails) {
                console.log("updateDetails");
                if (newDetails) {
                    this.add(newDetails);
                }
        
                if (oldDetails) {
                    this.remove(oldDetails);
                }
            },
            
            applyPricing: function(config) {
                return Ext.factory(config, Ext.Component, this.getPricing());
            },
        
            updatePricing: function(newPricing, oldPricing) {
                if (newPricing) {
                    this.add(newPricing);
                }
        
                if (oldPricing) {
                    this.remove(oldPricing);
                }
            },
        
            applyRemoveButton: function(config) {
                return Ext.factory(config, Ext.Button, this.getRemoveButton());
            },
        
            updateRemoveButton: function(newRemoveButton, oldRemoveButton) {
                if (oldRemoveButton) {
                    this.remove(oldRemoveButton);
                }
        
                if (newRemoveButton) {
                    // add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method
                    // when it happens
                    newRemoveButton.on('tap', this.onRemoveButtonTap, this);
        
                    this.add(newRemoveButton);
                }
            },
        
            onRemoveButtonTap: function(button, e) {
                var record = this.getRecord();
        
                Ext.Msg.alert(
                    record.get('title'), // the title of the alert
                    "Id of this item is: " + record.get('itemId') // the message of the alert
                );
            },
    
    
            applyEditButton: function(config) {
                return Ext.factory(config, Ext.Button, this.getEditButton());
            },
        
            updateEditButton: function(newEditButton, oldEditButton) {
                if (oldEditButton) {
                    this.remove(oldEditButton);
                }
        
                if (newEditButton) {
                    // add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method
                    // when it happens
                    newEditButton.on('tap', this.onEditButtonTap, this);
        
                    this.add(newEditButton);
                }
            },
        
            onEditButtonTap: function(button, e) {
                var record = this.getRecord();
        
                Ext.Msg.alert(
                    record.get('title'), // the title of the alert
                    "Id of this item is: " + record.get('itemId') // the message of the alert
                );
            },
        
            applyMoveButton: function(config) {
                return Ext.factory(config, Ext.Button, this.getMoveButton());
            },
        
            updateMoveButton: function(newMoveButton, oldMoveButton) {
                if (oldMoveButton) {
                    this.remove(oldMoveButton);
                }
        
                if (newMoveButton) {
                    // add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method
                    // when it happens
                    newMoveButton.on('tap', this.onMoveButtonTap, this);
        
                    this.add(newMoveButton);
                }
            },
        
            onMoveButtonTap: function(button, e) {
                var record = this.getRecord();
        
                Ext.Msg.alert(
                    record.get('title'), // the title of the alert
                    "Id of this item is: " + record.get('itemId') // the message of the alert
                );
            }
        });
    And the middle section which I am calling `details` is defined as custom view with `vbox` layout is defined like this:
    Code:
        Ext.define('MyTabApp.view.CartListItemDetails', {
            extend    : 'Ext.Component',
            alias     : 'widget.cartlistitemdetails',
            config    : {
                cls        : 'x-details',
                flex    : 3,
                layout    : 'vbox',
                titleCell: null,
                qtyCell: null,
                items     : [{
                    xtype    : 'panel',
                    flex    : 1,
                    itemId    : 'titleCell',
                    html    : 'blahblah'
                },
                {
                    xtype    : 'component',
                    flex    : 1,
                    itemId    : 'qtyCell',
                    html    : 'blahblah'
                }],
            },
            setItemTitle    : function(title){
        //        this.down('#titleCell').setHtml(title);
                console.log(this.getItems());
                this.getItems()[0].html = title;
            },
            setQuantity    : function(qty){
        //        this.down('#qtyCell').setHtml(qty);
                console.log(this.getItems());
                this.getItems()[0].html = qty;
            }
        });
    This is rendering list items with image, pricing & horizontally aligned buttons. Middle section which is custom component is not rendered. If I inspect element it is how html is generated:
    Code:
        <div class="x-details x-layout-box-item x-flexed x-stretched" id="ext-cartlistitemdetails-1" style="-webkit-box-flex: 3;"></div>
    as you can see there is nothing inside this div and this is how it is rendered:


    ukMfq.png


    It seems I am close because `setItemTitle` method is getting called but still `this.down('#titleCell').setHtml(title)` or `this.getItems()[0].html = title;` is not working.

  2. #2
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Answers
    1
    Vote Rating
    16
    tomalex0 will become famous soon enough

      1  

    Default


    I have implemented what you were trying.

    I also came across your stackoverflow post
    http://stackoverflow.com/questions/1...ncha-touch-2-1. Please mark it as answered if it works for you.


    https://github.com/tomalex0/senchatouch-complex-dataitem
    Sencha Touch Demos

    IosToggleField Forum - Github
    Form Validation
    Forum - Github
    Iphone Settings Menu
    Forum
    Sqlite Storage & Login Manifest
    Forum
    KitchenSink MVC
    Forum - Github
    SqliteProxy-v1 Forum - Github
    SqliteProxy-v2
    Forum - Github
    Arshaw Fullcalendar Forum - Github






Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi