2013-07-22 67 views
-1

我是新的使用extjs,但我一直在使用sencha extjs 4.2.1庫的mvc應用程序工作。所以我在控制器的組織方面遇到了麻煩,因爲我不知道我必須在哪裏做店面加載。我有一個簡單的Web應用程序,有2個主視圖。 1是用於登錄,而主視圖是帶有網格的標籤面板。所以這是我的代碼:Extjs MVC應用程序 - 更多信息

我登錄:

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

回答

相關問題