Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  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