javascript - 即使我添加了布局和弹性属性，列表在 Ext.Container 中也不可见

Question

在使用 Sencha Touch 2.0 时偶然发现了一个问题。我想要在我的 Ext.Container 中显示一个列表，但什么也没发生。

我的类(class) (LoggedInView.js)

Ext.define("GS.view.LoggedInView", {
extend: "Ext.Container",
config: {
    layout: 'vbox',
    items: [{
        xtype: "toolbar",
        docked: "top",
        title: "Pågående anbud"
    },{ 
        xtype: 'list',
        itemTpl: '{name}',
        flex: 1,
        store : 'Auction'
    }]
}

});

我的商店 (Auction.js)

Ext.define('GS.store.Auction', {
extend: 'Ext.data.Store',

config: {
    autoLoad: true,
    fields: ['name'],
    data: [
        {name: 'test1'},
        {name: 'test2'},
        {name: 'test3'},
        {name: 'test4'},
    ]
},

});

我的应用程序 (app.js)

Ext.application({
name: 'GS',

requires: [
    'Ext.MessageBox'
],

views: ['Main', 'LoggedInView'],

stores: ['Auction'],
....etc...

我在这里做错了什么？我正确呈现了工具栏，但列表未显示。

编辑

Alos 附上了我的 (main.js)

// The login button
var button = Ext.create('Ext.Button', {
    text: 'Logga in',
    minHeight: '45px',
    handler: function (b, e) {
        var form = Ext.getCmp('register');
        form.submit({
            url: 'URL HERE',
            method: 'POST', 
            success: function (frm, res)  {
                 var paneltab = Ext.create('GS.view.LoggedInView');
                 Ext.getCmp('register').destroy();
                 Ext.Viewport.add(paneltab);
            },
            failure: function (frm, res) {
                alert('Form no submit!');
            }
        });
    }
});

var loginForm = Ext.create('Ext.form.Panel', {
    fullscreen: true,
    id: 'register',
    frame:true, 
    items: [
        {
            xtype: 'fieldset',
            items: [
                {
                    xtype: 'textfield',
                    name : 'userName',
                    placeHolder : 'Användarnamn'
                },
                {   
                    xtype: 'passwordfield',
                    name : 'password',
                    placeHolder : 'Lösenord'
                }
            ]
        },
        {   
            xtype: 'container',      
            items: [button]
        },
    ]
});

Answer 1

将 fullscreen: true 添加到您的 View 配置

我的类(class) (LoggedInView.js)

Ext.define("GS.view.LoggedInView", {
extend: "Ext.Container",
config: {
    layout: 'vbox',
    fullscreen: true,
    items: [{
        xtype: "toolbar",
        docked: "top",
        title: "Pågående anbud"
    },{ 
        xtype: 'list',
        itemTpl: '{name}',
        flex: 1,
        store : 'Auction'
    }]
}
});

您在senchafiddle中的代码:http://www.senchafiddle.com/#HcaOD

编辑:

在 Main.js 中，您没有定义主视图，因此无法在 app.js 中创建它

重新设计的 Main.js

Ext.define('GS.view.Main', {
    extend : 'Ext.form.Panel',
    config : {
        fullscreen : true,
        id : 'register',
        frame : true,
        items : [{
            xtype : 'fieldset',
            items : [{
                xtype : 'textfield',
                name : 'userName',
                placeHolder : 'Användarnamn'
            }, {
                xtype : 'passwordfield',
                name : 'password',
                placeHolder : 'Lösenord'
            }]
        }, {

            xtype : 'button',
            text : 'Logga in',
            minHeight : '45px',
            handler : function(b, e) {
                var form = Ext.getCmp('register');
                form.submit({
                    url : 'http://testurl.com',
                    method : 'POST',
                    success : function(frm, res) {
                        var paneltab = Ext
                                .create('GS.view.LoggedInView');
                        Ext.getCmp('register').destroy();
                        Ext.Viewport.add(paneltab);
                    },
                    failure : function(frm, res) {
                        alert('Form no submit!');
                    }
                });
            }

        }]
    }
});

另外一个问题是，post方法不起作用，因为它没有提交，所以它会警告“表单没有提交!”。但是，当您将成功代码放入失败函数中时，就会显示该列表。

但是我建议您将按钮处理程序放入 Controller 中。

按钮代码如下所示:

{
    xtype : 'button',
    text : 'Logga in',
    minHeight : '45px',
    action: 'submitFormAction'
}

Controller.js

Ext.define('GS.controller.Controller', {
    extend : 'Ext.app.Controller',    
    config : {   
        control : {
            'button[action="submitFormAction"]' : {
                tap : 'submitForm'
            },
        }
    },
    submitForm : function() {
        var form = Ext.getCmp('register');
        form.submit({
            url : 'http://testurl.com',
            method : 'POST',
            success : function(frm, res) {
                 var paneltab = Ext.create('GS.view.LoggedInView');
                Ext.getCmp('register').destroy();
                Ext.Viewport.add(paneltab);                
            },
            failure : function(frm, res) {
                alert('Form no submit!'); 
            }
        });
    }

});

然后，您必须使用 controllers:['Controller'], 在 app.js 中添加 Controller 。

工作中的senchafiddle:http://www.senchafiddle.com/#HcaOD#pArtn