Question

我有以下自定义组件构建

Ext.define('TRA.view.MainMenuItemView', {
    xtype: 'mainmenuitem',
    extend: 'Ext.Container',

    text: 'Menu text',
    icon: './resources/icons/Icon.png',

    tap: function(){

    },

    config: {
        layout: {
            type: 'vbox',
            pack: 'center',
            align: 'center'
        },
        items: [
            {
                width: '115px',
                height: '115px',
                style: 'border-radius: 50%; background-color: #e4e4e6',
                items: [
                    {
                        xtype: 'image',
                        src: '',
                        width: '65px',
                        height: '65px',
                        centered: true
                    }
                ]
            },
            {
                xtype: 'label',
                html: '',
                margin: '5px 0',
                style: 'color: #455560; text-align: center; text-transform: uppercase; font-weight: bold;'
            }
        ]
    },

    initialize: function() {
        var me = this;

        me.callParent(arguments);





        //set icon
        me.getAt(0).getAt(0).setSrc(me.icon);

        //set text
        me.getAt(1).setHtml(me.text);



        //setup componet event
        me.element.onAfter('tap', me.tap);


    }
})

我正在其他容器上使用它

{

                        xtype: 'mainmenuitem',
                        text: 'Signal Coverage',
                        icon: './resources/images/icon-signal-coverage.png',

                        tap: function() {
                            var nav = Ext.ComponentQuery.query('#mainnavigationview')[0];


                            nav.push({
                                title: 'Signal Coverage',
                                html: 'test Signal Coverage'
                            });

                        }
                    }

非常奇怪的是，除非我使用sencha cmd构建本机或用于Web构建的sencha应用程序，否则它通常都能正常工作

sencha app build production

生产版本不会覆盖我的自定义组件的icon和text属性。虽然它在普通版本上运行良好。什么可能是问题？

Answer 1

首先，一些想法可以让您的代码更易于阅读：

1）第一项既没有xtype也没有defaultType定义它

2）宽度：＆＃39; 115px＆＃39;，高度：＆＃39; 115px＆＃39;，可能是宽度：115，高度115

3）而不是me.getAt（）。getAt（）为这些定义一个itemId并使用me.down（＆＃39;＃theItemId＆＃39;）

3a）或使用Ext.Component扩展并添加带引用的模板。这就是me.referenceElement

4）me.onAfter（＆＃39;点击＆＃39;，...不确定这是否适用于不支持点击事件的项目。您可能需要为me.element设置点击事件从那里你可以使用beforetap

5）而不是添加me.getAt（）。getAt（）。setText（me.text）使用updateText：function（newValue）{this.getAt（）。getAt（）。setText（newValue）}
图标相同

然后我的个人选择

就我个人而言，我从没想过这个代码会继续运行。但修复可能是写me.config.icon和me.config.text

<强>解决方案

这是一个时间问题。构造函数运行时，配置中没有定义图标或文本。

这仅在初始化时发生。在配置中你有它们。

去添加图标：null，text：＆＃39;＆＃39;到组件的配置，它将使用getter和setter进行单词。

Sencha Touch - 自定义组件在＆＃39;生产＆＃39;建立

1 个答案: