Поигрался с 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]
        },
    ]
});
0
Ismailp 31 Янв 2013 в 15:04

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 не работает, потому что он не отправлен, поэтому он предупреждает «Форма не отправлена!». Но когда вы помещаете свой код успеха в функцию сбоя, отображается список.

Однако я рекомендую вам поместить обработчик кнопки в контроллер.

Код кнопки тогда выглядит так:

{
    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

2
Lukas K. 31 Янв 2013 в 12:24

Хорошо, нашел решение этой проблемы. Это был мой класс 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!');
                    }
                });
            }
        }]
    }
});
2
Ismailp 31 Янв 2013 в 12:29