Question

在主视图中向容器添加基本Picker在桌面上的chrome浏览器中正常工作。（也没有JS错误）。但同样在模拟器（Android和iOS）中失败。拾取器最初隐藏并在按钮上呈现。在模拟器上，虽然我在组件中配置了数据，但Picker表没有数据呈现。此外，当我点击Cancel/Done按钮时，选择器不会消失。 adb logcat对此行为没有任何有用的消息。我使用的是Sencha Cmd v4.0.4.84。什么可能导致这种行为以及如何解决这个问题？ MainView.js

var chooseStreamPicker = Ext.create('Ext.Picker', {
    itemid: 'chooseStream',
    hidden: true,
    useTitles: true,
    slots: [
        {
            name: 'stream',
            title: 'Choose your stream',
            data: [
                { text: 'Text1', value: 1 },
                { text: 'Text2', value: 2 }
            ]
        }
    ]
});

var mainViewButtonsContainer = {
    xtype: 'container',
    defaults: {
        width: 200,
        xtype: 'button',
        margin: 10
    },
    items: [
        {
            text: 'Choose your stream',
            ui: 'action',
            handler: function () {
                Ext.Viewport.add(chooseStreamPicker).show();
            }
        },
        {
            text: 'My Foo Section',
            itemId: "FooButton",
            ui: 'round',
            handler: function () {
                this.parent.onMainViewButtonTap(this);
            }
        },
        {
            text: 'My Bar section',
            itemId: "BarButton",
            iconAlign: 'right',
            ui: 'action',
            iconCls: 'compose',
            handler: function () {
                this.parent.onMainViewButtonTap(this);
            }
        },
    ],
    onMainViewButtonTap: function (btn) {
        var me = this,
            activeItem = me.getActiveItem();
        var pickerValue = chooseStreamPicker.getValue();
        if ( pickerValue ) {
            var stream = pickerValue.stream;
            me.parent.fireEvent('main', me, activeItem, btn);
        } else {
            Ext.Viewport.add(chooseStreamPicker).show();
        }
    }
}
//MainView
Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    xtype: 'main',
    requires: [
        'Ext.TitleBar'
    ],
    controller: 'MainController',
    config: {
        layout: {
            type: 'hbox'
        },
        scrollable: true,
        styleHtmlContent: true,
        items: [
            {
                docked: 'top',
                xtype: 'toolbar',
                title: 'MyApp Title'
            },

            {
                docked: 'bottom',
                xtype: 'toolbar',
                layout: {
                    pack: 'center'
                },
                items: [
                    {
                        title: 'Home',
                        iconCls: 'home'
                    },
                    {
                        title: 'ContactUs',
                        iconCls: 'user'
                    }
                ]
            },
            { xtype: 'spacer' },
            mainViewButtonsContainer,
            { xtype: 'spacer' }
        ]
    }
});

enter image description here

Answer 1

似乎挑选者需要在线创建。我用以下代码完成了这个工作：

var pickerConfig = {
    xtype: 'picker',
    itemId: 'chooseStream',
    useTitles: true,
    slots: [
        {
            name: 'stream',
            title: 'Choose your stream',
            data: [
                { text: 'Text1', value: 1 },
                { text: 'Text2', value: 2 }
            ]
        }
    ]
};

在处理程序内部，检查组件是否已存在于DOM中。如果不是第一次创建它。

items: [
        {
            text: 'Choose your stream',
            ui: 'action',
            handler: function () {
                var streamPicker = Ext.ComponentQuery.query('#chooseStream')[0];
                if (! streamPicker ) { 
                   streamPicker = Ext.create('Ext.Picker', pickerConfig);
                }
                Ext.Viewport.add(streamPicker).show();
            }
        },
        {
            text: 'My Foo Section',
            itemId: "FooButton",
            ui: 'round',
            handler: function () {
                var streamPicker = Ext.ComponentQuery.query('#chooseStream')[0];
                if (! streamPicker ) { 
                   streamPicker = Ext.create('Ext.Picker', pickerConfig);
                }
                if (streamPicker.getValue() && streamPicker.getValue().stream ) {
                    container.parent.fireEvent('main', container, activeItem, btn);
                } else {
                     Ext.Viewport.add(streamPicker).show();
                }
            }
        },

Sencha触摸模拟器中的基本选择器问题

1 个答案: