Question

我是使用extjs的新手，但我一直在使用sencha extjs 4.2.1库在mvc应用程序中工作。所以我对控制器的组织有麻烦，因为我不知道我必须在哪里做商店负载。我有一个简单的Web应用程序，有2个主要视图。 1用于登录，主视图带有带网格的标签面板。所以这是我的代码：

我的登录信息：

Ext.define('MyApp.view.frmLogin', {
extend: 'Ext.form.Panel',
alias: 'widget.frmLogin',

height: 150,
id: 'frmLogin',
style: 'margin: 0px auto 0px auto;\r\nvertical-align: middle;',
width: 340,
layout: {
    type: 'auto'
},
anchorSize: 100,
bodyPadding: 5,
url: 'index/login',

initComponent: function() {
    var me = this;

    me.initialConfig = Ext.apply({
        url: 'index/login'
    }, me.initialConfig);

    Ext.applyIf(me, {
        items: [
                ...
                items: [
                    {
                        xtype: 'button',
                        id: 'btnFrmLoginIniciar',
                        style: 'text-align:right;',
                        text: 'Iniciar'
                    }
                ]
            }
        ]
    });

    me.callParent(arguments);
}

});

我的主要观点：

Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Viewport',

requires: [
    'MyApp.view.frmLogin',
    'MyApp.view.frmMain'
],

id: 'MainViewPort',
layout: {
    type: 'card'
},

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        items: [
            {
                xtype: 'frmLogin',
                maxHeight: 150
            },
            {
                xtype: 'frmMain',
                layout: {
                    type: 'vbox'
                }
            }
        ]
    });

    me.callParent(arguments);
}

});

我的主要观点：

Ext.define('MyApp.view.frmMain', {
extend: 'Ext.panel.Panel',
alias: 'widget.frmMain',

initComponent: function() {
    var me = this;

    Ext.applyIf(me, {
        dockedItems: [
            {
                xtype: 'toolbar',
                dock: 'top',
                id: 'tlbMain',
            },
            {
                xtype: 'toolbar',
                dock: 'bottom',
                id: 'tlbStatus',
                items: [
                    {
                        xtype: 'textfield',
                        id: 'txtTlbStatusGrupo',
                        fieldLabel: 'Grupo/Rol:',
                        value: 'Grupo o Rol',
                        readOnly: true
                    }
                ]
            }
        ],
        items: [
            {
                xtype: 'tabpanel',
                id: 'pnlMainTab',
                activeTab: 0,
                items: [
                    {
                        xtype: 'gridpanel',
                        id: 'grdTransportes',
                        title: 'Listado de Transportes',
                        store: 'ListaFichasTransporte',
                        columns: [
                        ]
                    },
                    {
                        xtype: 'gridpanel',
                        id: 'grdEmbarques',
                        title: 'Lista de Embarques',
                        store: 'ListaEmbarques',
                        columns: [
                        ]
                    },
                    {
                        xtype: 'gridpanel',
                        id: 'grdCostosEmbarque',
                        title: 'Costos por Embarque',
                        store: 'ListaCostosXEmbarque',
                        columns: [
                        ]
                    },
                    {
                        xtype: 'gridpanel',
                        id: 'grdEmpresas',
                        title: 'Empresas',
                        store: 'ListaEmpresas',
                        columns: [
                        ]
                    },
                    {
                        xtype: 'gridpanel',
                        id: 'grdCamiones',
                        title: 'Camiones',
                        store: 'ListaCamiones',
                        columns: [
                        ]
                    }
                ]
            }
        ]
    });

    me.callParent(arguments);
}

});

我的登录控制器：

Ext.define('MyApp.controller.Login', {
extend: 'Ext.app.Controller',

models: [
    'Sucursal'
],
stores: [
    'ListaSucursales'
],
views: [
    'frmLogin'
],

refs: [
    {
        ref: 'Usuario',
        selector: 'textfield[id=txtFrmLoginUsuario]',
        xtype: 'Ext.form.field.Text'
    },
    {
        ref: 'Clave',
        selector: 'textfield[id=txtFrmLoginClave]',
        xtype: 'Ext.form.field.Text'
    },
    {
        ref: 'Sucursal',
        selector: 'textfield[id=cmbFrmLoginSucursal]',
        xtype: 'Ext.form.field.ComboBox'
    }
],

onFrmLoginSucursalComboboxRender: function(component, eOpts) {
    component.getStore().load();

},

onFrmLoginIniciarButtonClick: function(button, e, eOpts) {
    var jsonToPost = {};
    jsonToPost.usuario = this.getUsuario().getValue();
    jsonToPost.clave = this.getClave().getValue();
    jsonToPost.sucursal = this.getSucursal().getValue();
    maincontroller = this.getController("Main");
    mifuncion = this.ChangeMainLayout;
    console.log(jsonToPost);
    oMaincontroller = this.getController('Main');

    Ext.data.JsonP.request({
        url: 'http://fplweb2.localhost/index/login',
        callbackKey: 'callback',
        params: jsonToPost,
        success: function(result, request) {
            var rsLogin = result.success;
            if (rsLogin === "true") {
                mifuncion(maincontroller, jsonToPost.usuario, result.group);
                oMaincontroller.LoadGrids();
            }
            else
            {
                Ext.MessageBox.alert('Inicio de Sesión', result.message);
            }
        }
    });
},

ChangeMainLayout: function(maincontroller, user, group) {
    var panel = Ext.getCmp('MainViewPort');
    panel.getLayout().setActiveItem(1);
    console.log(panel);

    maincontroller.getUsuario().setValue(user);
    maincontroller.getGrupo().setValue(group);

},

init: function(application) {
    this.control({
        "combobox[id=cmbFrmLoginSucursal]": {
            render: this.onFrmLoginSucursalComboboxRender
        },
        "button[id=btnFrmLoginIniciar]": {
            click: this.onFrmLoginIniciarButtonClick
        }
    });
}

});

我的问题很简单：虽然我的登录工作正常，但为什么我看不到我的tabpanel和我的网格呢？我必须实例化我的观点吗？......我必须这样做？我的网格有列，但由于此问题的大小，我已从代码中删除。

提前谢谢你：D

Answer 1

是。您需要在app.js文件中创建具有所需配置的“Ext.application”实例。是的。请参阅sencha doc http://docs.sencha.com/extjs/4.2.0/#!/guide/getting_started

Extjs MVC应用程序 - 更多信息

1 个答案: