在家庭列表视图上重叠的sencha导航视图

时间:2015-07-25 05:45:57

标签: javascript sencha-touch navigationview

我在sencha应用程序中使用sencha导航视图。 我的错误场景 我有主屏幕上的图像列表视图第一次它加载20记录然后滚动到下来记录将在每次滚动时增加20当我点击任何图像并重定向到另一个视图,如图像详细视图或配置文件视图然后按下后退按钮返回所有图像重叠。

请帮助我尝试在10天之前解决此错误但未获得成功: - 重叠之前

1)我正在使用导航视图,它使用" Ext.dataview.DataView"并且有使用 useComponents:true, defaultType:' productlistitem'

2)产品列表项目'用'Ext.dataview.component.DataItem'扩展在这个视图中我使用更新方法设置图像和其他组件数据,并使用动态方法图像宽度,高度。

您可以在下面查看我的所有观看代码

A)Home.js

var selectedDate = $('#reportrange span')[0].innerHTML.split('-');
alert(selectedDate[0]); //Start date
alert(selectedDate[1]); //End date

B)ListItem.js

Ext.define('demo.view.home.Home', {

    extend: 'Ext.dataview.DataView',

    requires: [
        'demo.view.product.ListItem',
        'demo.view.layout.ColumnLayout'
    ],

    xtype: 'home',

    config: {

        scrollable: true,
        plugins: {
            xclass: 'demo.plugin.DataViewPaging', // Reference plugin by class
            autoPaging: true
        },

        autoDestroy: true,

        store: 'LookStore',

        margin:'2 0',

        useComponents: true,

        defaultType: 'productlistitem',

        cls: 'wow-home',

        layout: {
            type: 'column',
            columnCount: 2,
            columnWidth: 160
        }
    }
});

c)Item.js

var listItemData=[];
Ext.define('demo.view.product.ListItem', {

    extend: 'Ext.dataview.component.DataItem',

    requires: ['demo.view.product.Item'],

    xtype: 'productlistitem',

    config: {
        padding: 2,
        zIndex:999,
        items: [{
            xtype: 'item'
        }]
    },

    initialize: function() {
        console.log('initing the list item  ');
        var me = this;
        me.callParent(arguments);
        this.on('heightchange', 'recalculateHeight', me, {
            delegate: '> item'
        });
    },

    recalculateHeight: function() {
        var me = this;
        me.setHeight(me.innerElement.getHeight());
    },

    updateRecord: function(record) {
        if (!record) {
            return;
        }
        var me = this,
            item = me.down('item');
        me.callParent(arguments);
        if (item) {
            item.updateRecord(record, me.getDataview());
        }
        listItemData.push(item.id);
    }
});

D)ItemImage.js

Ext.define('demo.view.product.Item', {

    extend: 'Ext.Container',

    xtype: 'item',

    requires: [
        'Ext.Carousel',
        'demo.view.product.ItemImage',
        'demo.view.product.UserInfo',
        'demo.view.product.InfoLabel'
    ],

    config: {
        record: null,

        baseCls: 'wow-item',
        showDescription: false,
        items: [{
                xtype: 'itemimage',
                width: '100%'
            }, {
                xtype: 'userinfo',
                height: 40,
                listeners: {
                    painted: function() {
                        if (!this.element.hasListener('tap')) {
                            this.element.on('tap', function(e) {
                                e.stopPropagation();
                                var record = this.scope.up('item').getRecord();
                                if (!this.scope.getHandleListeners()) {
                                    if(Ext.ComponentQuery.query('main')[0].getActiveItem().xtype === "wardrobedrawer")
                                        demo.app.getController('ProductController').openProductDetail('', '', '', record);
                                    return;
                                }
                                if (record && !Ext.isEmpty(record.raw.product_id) && !Ext.isEmpty(record.raw.importer)) {
                                    var brandMerchantProducts = this.scope.up('brandmerchantproducts');
                                    if (brandMerchantProducts) {
                                        var currentTitle = demo.app.getController('HomeController').getMain().getActiveItem().config.title;
                                        var currentItem = this.scope.element.dom.textContent;
                                        if (currentTitle.toUpperCase() !== currentItem.toUpperCase()) {
                                            demo.app.getController('ProductController').showMerchantProducts(record);
                                        }
                                        return;
                                    }
                                    demo.app.getController('ProductController').showMerchantProducts(record);
                                } else {

                                    var list = this.scope.up('list');

                                    demo.app.getController('ProfileController').goToOtherUserProfile(list, null, null, record.get('merchantId'), e);
                                }
                            }, {
                                scope: this
                            });
                        }
                    }
                }
            },

            {
                xtype: 'container',
                height: 40,
                margin:'1 0 0 0',
                name: 'infoContainer',
                layout:'hbox',
                defaults: {
                    xtype: 'infolabel',
                    flex: 1
                },
                items: [{
                    iconCls: 'icon-diamond',
                    text: '09',
                    itemId: 'wows',
                    listeners: {
                        painted: function() {
                            if (!this.element.hasListener('tap')) {
                                this.element.on('tap', function(e) {
                                    e.stopPropagation();
                                    var record = this.scope.up('item').getRecord();
                                    if (record.get('type') == 'product') {
                                        demo.app.getController('ProductController').wowOrUnwowHomeProduct(record, this.scope.up('item'));
                                    }
                                    if (record.get('type') === 'look') {
                                        demo.app.getController('ProductController').wowOrUnwowHomeLook(record, this.scope.up('item'));
                                    }

                                }, {
                                    scope: this
                                });
                            }
                        }
                    }
                }, {
                    iconCls: 'icon-drawer',
                    text: '11',
                    itemId: 'lookOrAdd',
                    listeners: {
                        painted: function() {
                            if (!this.element.hasListener('tap')) {
                                this.element.on('tap', function(e) {
                                    e.stopPropagation();
                                    var record = this.scope.up('item').getRecord();
                                    if (record.get('type') == 'product') {
                                        demo.addedProductItem = this.scope.up('item');
                                        demo.app.getController('ProductController').addProduct(record);
                                    }
                                    if (record.get('type') === 'look') {
                                        demo.app.getController('ProductController').addHomeLook(record, this.scope.up('item'));
                                    }

                                }, {
                                    scope: this
                                });
                            }
                        }
                    }
                }]
            }
        ]

    },

    initialize: function() {
        var me = this;
        me.callParent(arguments);
        me.on('load', 'imageLoaded', me, {
            delegate: 'itemimage'
        });
    },

    imageLoaded: function() {
        var me = this;
        me.setHeight(me.element.getHeight());
    },

    updateRecord: function(item, dataview) {
        if (!item) {
            return;
        }
        if (dataview && dataview.config.showDescription) {

            this.setShowDescription(true);

        }
        var me = this;

        me.setRecord(item); 
        if (item) {

            var itemImage = this.down('itemimage'),
                images = item.get('images'),
                wows = item.get('wows') + '',
                adds = item.get('adds') + '',
                userInfo = this.down('userinfo');
            if (images && images.length) {
                itemImage.setSrc(images[0].original);
            }

            var type = item.get('type');
            var lookOrProduct = me.down('#lookOrAdd');
            var added = item.get('added');
            var icon;

            if (type === 'product') { 
                icon = 'icon-add-drawer';
                lookOrProduct.setIconCls(icon);
            } else {
                icon = added ? 'icon-counterlook' : 'icon-addlookbook';
                lookOrProduct.setIconCls(icon);
            } 
            if (!Ext.isEmpty(item.raw.product_id)) {
                userInfo.setAvatar('');
            } else { // USER

                var importer = item.get('importer');
                if (importer) {

                    var avatar = importer.avatar;
                    if (avatar) {
                        userInfo.setAvatar(avatar);
                    } else {
                        userInfo.setAvatar('resources/images/default/default_avatar.jpg');
                    }
                }
            } 
            me.down('#wows').setText(wows);

            if (!item.get('wowed')) {
                me.down('#wows').addCls('grayedout-cls');
            } else {
                me.down('#wows').removeCls('grayedout-cls');
            } 
            lookOrProduct.setText(adds);
            if (!item.get('added')) {
                lookOrProduct.addCls('grayedout-cls');
            } else {
                lookOrProduct.removeCls('grayedout-cls');
            }
            var infoContainer = this.down('container[name=infoContainer]');
            if (infoContainer && infoContainer.isHidden()) {
                infoContainer.show();
            } 
            var title = Ext.ComponentQuery.query('main')[0].getActiveItem().title;
            var storeId = this._record.stores[0].getStoreId();
            if (type === 'product' && !Ext.isDefined(title) && storeId !== 'WowedStore' && storeId !== 'SearchStore' && storeId !== 'BrandMerchatProducts') {
                var homeUrl = this._record.stores[0].getProxy().getUrl();
                if ((homeUrl === demo.model.Config.apiServerPath('home')) || (homeUrl === demo.model.Config.apiServerPath('home'))) {
                    var noOfProducts = Ext.ComponentQuery.query('#productsInTheListId').length;
                    if (noOfProducts === 1) {
                        userInfo.setUsername(item);

                        if (me.getShowDescription()) {
                            infoContainer.hide();
                            userInfo.setAvatar('');
                            userInfo.setUsername(item);
                            userInfo.setHandleListeners(false);
                        }
                    } else {
                        userInfo.setUsername(item.get('author'));

                        if (me.getShowDescription()) {
                            infoContainer.hide();
                            userInfo.setAvatar('');
                            userInfo.setUsername(item.get('description'));
                            userInfo.setHandleListeners(false);
                        }
                    }
                } else {
                    userInfo.setUsername(item);

                    if (me.getShowDescription()) {
                        infoContainer.hide();
                        userInfo.setAvatar('');
                        userInfo.setUsername(item);
                        userInfo.setHandleListeners(false);
                    }
                }
            } else {
                userInfo.setUsername(item.get('author'));
                if (me.getShowDescription()) {
                    infoContainer.hide();
                    userInfo.setAvatar('');
                    userInfo.setUsername(item.get('description'));
                    userInfo.setHandleListeners(false);
                }
            }
        }
    },

    updateColorOfItem: function(item) {

        var me = this,
            lookOrProduct = me.down('#lookOrAdd');
        if (!item.get('wowed')) {
            me.down('#wows').addCls('grayedout-cls');
        } else {
            me.down('#wows').removeCls('grayedout-cls');
        }

        if (!item.get('added')) {
            lookOrProduct.addCls('grayedout-cls');
        } else {
            lookOrProduct.removeCls('grayedout-cls');
        }
    }
}); 

E)UserInfo.js

Ext.define('demo.view.product.ItemImage', {

    extend: 'Ext.Img',

    xtype: 'itemimage',

    config: {

    },

    onLoad: function(event) { 
        var me = this,
            width = me.getParent().element.getWidth(), // me.element.getWidth() should work but I have found that sometimes it gives a width of 0. Now I go with a width of the parent.
            imageObject = me.imageObject,
            naturalWidth = imageObject.width,
            naturalHeight = imageObject.height,
            naturalRatio = naturalHeight / naturalWidth,
            newHeight = naturalRatio * width;
        me.setHeight(newHeight);
        //Ext.ComponentQuery.query('productlistitem')[0].setHeight(newHeight+84);
        me.callParent(event);
    }

});

F)InfoLabel.js

Ext.define('demo.view.product.UserInfo', {

    extend: 'Ext.Container',

    requires: ['Ext.Img'],

    xtype: 'userinfo',

    config: {
        avatar: null,
        username: null,
        baseCls: 'wow-user-info',
        handleListeners: true

    },

    applyAvatar: function(avatar) {

        if (Ext.isEmpty(avatar)) {
            return null;
        }
        return Ext.factory({
            src: avatar,
            cls: 'wow-avatar',
            docked: 'left'
        }, 'Ext.Img');
    },

    updateAvatar: function(newAvatar, oldAvatar) {

        if (newAvatar) {
            this.add(newAvatar);
        }
        if (oldAvatar) {
            oldAvatar.destroy();
        }
    },

    applyUsername: function(item) {
        if (Ext.isObject(item)) {
            var price_value = "",
                price_currency = "",
                itemName = "";

            if (Ext.isDefined(item.raw.price)) {
                if (Ext.isDefined(item.raw.price.value)) {
                    price_value = item.raw.price.value.toString();
                }
            }
            if (Ext.isDefined(item.raw.price)) {
                if (Ext.isDefined(item.raw.price.currency)) {
                    price_currency = item.raw.price.symbol;
                }
            }
            if (item.raw.description === null) {
                var item = item.data.author;
            } else {
                var item = item.raw.description;
            }
            item = item.toLowerCase();
            itemName = item.charAt(0).toUpperCase() + item.slice(1);
            if (Ext.isDefined(price_currency) && Ext.isDefined(price_value) && (price_currency !== "") && (price_value !== "")) {
                itemName = '<div class="itemNames"><span style="font-size:0.9em" >' + price_currency.bold() + ' ' + price_value.bold() + '</span>' + " " + '<span style=" font-size:0.8em" class="itemName">' + itemName + '</span>' + '</div>';

            } else {
                itemName = '<div class="itemNames"><span style=" font-size:0.8em" class="itemName">' + itemName + '</span></div>';
            }
            return Ext.factory({
                html: itemName,
                xtype: 'component',
                cls: 'wow-username-product'
            });
        } else {
            return Ext.factory({
                html: item,
                xtype: 'component',
                cls: 'wow-username'
            });
        }
    },

    updateUsername: function(newUsername, oldUsername) {
        if (newUsername) {
            this.add(newUsername);
        }
        if (oldUsername) {
            oldUsername.destroy();
        }
    }

});

0 个答案:

没有答案