Question

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

我的班级（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添加到您的视图配置

我的班级（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方法不起作用，因为它没有提交，所以它会提示“Form no submit！”。但是当您将成功代码放入失败函数时，将显示列表。

但是我建议您将按钮处理程序放在控制器中。

按钮代码如下所示：

{
    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 中添加控制器。

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

Answer 2

好的，找到了解决这个问题的方法。这是我的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: 'MY 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!');
                    }
                });
            }
        }]
    }
});

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

2 个答案: