0

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...

ここで何が間違っていますか？ツールバーは正しく表示されますが、リストが表示されません。

編集

アロスは私の（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]
        },
    ]
});
4

2 に答える 2

2

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 nosubmit！」というアラートが表示されます。ただし、成功コードを失敗関数に入れると、リストが表示されます。

ただし、ボタンハンドラーをコントローラーに配置することをお勧めします。

ボタンコードは次のようになります。

{
    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!'); 
            }
        });
    }

});

次に、 app.jsに 。を使用してコントローラーを追加する必要がありますcontrollers:['Controller'],。

作業中のsenchafiddle：http ://www.senchafiddle.com/#HcaOD#pArtn

于 2013-01-31T11:31:31.847 に答える
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!');
                    }
                });
            }
        }]
    }
});
于 2013-01-31T12:29:47.347 に答える