我尝试了解extjs MVC的基础知识。
我使用Sencha CMD创建了示例应用程序。这附带一些基本的东西。我尝试做的是一个带工具栏的面板，我有一个菜单。当我点击菜单中的某个项目时，我想将一个网格加载到面板中。
我需要做什么功能？
这是我的主要模特
Ext.define('JustRent.view.main.Main', {
extend: 'Ext.container.Container',
requires: [
'JustRent.view.main.MainController',
'JustRent.view.main.MainModel',
'JustRent.view.main.ProductenType'
],
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [{
region: 'center',
id: 'contentBlock',
xtype: 'panel',
layout: 'fit',
title: 'JustRental',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Menu',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'verhuur',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Offertes',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Overzicht'
},{
xtype: 'menuitem',
text: 'Nieuwe offerte'
},{
xtype: 'menuitem',
text: 'Openstaande offertes'
},{
xtype: 'menuitem',
text: 'Geannuleerde offertes'
}]
}
}, {
xtype: 'menuitem',
text: 'Projecten',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Overzicht'
}]
}
}, {
xtype: 'menuitem',
text: 'Producten',
menu: {
xtype: 'menu',
items: [{
xtype: 'menuitem',
text: 'Overzicht'
},{
xtype: 'menuitem',
text: 'Artikelen'
},{
xtype: 'menuitem',
text: 'Groepen'
},{
xtype: 'menuitem',
text: 'Type',
handler: 'onClickButton',
},{
xtype: 'menuitem',
text: 'Soort'
},{
xtype: 'menuitem',
text: 'Merk'
}]
}
}, {
xtype: 'menuitem',
text: 'Klanten'
}]
}
},
{
xtype: 'menuitem',
text: 'verkoop'
}
]
}
}]
}]
}
]
});
当我点击一个项目时，我使用一个基本的处理程序。它位于我的mainController文件中：
Ext.define('JustRent.view.main.MainController', {
extend: 'Ext.app.ViewController',
requires: [
],
alias: 'controller.main',
onClickButton: function () {
console.log('click works');
}
});
这是我的ProductenType
Ext.define('JustRent.view.main.ProductenType', {
extend: 'Ext.grid.Panel',
alias: 'widget.ProductenType',
requires: [
// alerts
],
xtype: 'gridpanel',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
]
});
但现在我的问题是如何将JustRent.view.main.ProductenType加载到ID为'contenBlock'的面板中。
答案 0 :(得分：2)
我会使用视口作为我的主要容器
http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport
带有边框布局 http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.layout.container.Border
然后使用添加 http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport-method-add
和删除方法http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.container.Viewport-method-remove
用于视口中的组件操作
专业提示：避免不必要的嵌套组件，在每种情况下都可以使用更轻的组件。例如，与面板相比，DOM中的容器更轻，因此如果您只需要一个容器，请不要使用面板（不是说这种情况）。
我也推荐使用Extjs in Action，这本书很棒，可以帮助你真正理解这个框架。