I am creating a reusable generic view, which is a container with border layout and empty north, west, and center containers.
I want to use this generic view, and dynamically define items for the north, west, and center containers.
As seen below, I am trying to do this via a custom config, and auto-generated "apply" functions.
But nothing is displaying in the UI.
What might I be doing wrong here?
Thanks in advance.
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>APP</title>
<link rel="stylesheet" type="text/css" href="../../ext-4.2.1.883/resources/css/ext-all.css">
<script type="text/javascript" src="../../ext-4.2.1.883/ext-all-debug.js"></script>
<script src="app.js"></script>
</head>
<body></body>
</html>
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'APP',
appFolder: '../simplemvcBorderLayout',
autoCreateViewport: true
});
Ext.define('APP.view.Viewport', {
extend: 'Ext.container.Viewport',
alias: 'widget.appviewport',
autoScroll: true,
layout: 'fit',
requires: [
'view.Main'
],
items: [{
xtype: 'mainAppView',
northItems: [{
xtype: 'label',
text: 'here'
}],
westItems: [{
xtype: 'label',
text: 'here'
}],
centerItems: [{
xtype: 'label',
text: 'here'
}]
}]
});
Ext.define('APP.view.Main', {
extend: 'Ext.container.Container',
alias: 'widget.mainAppView',
autoScroll: true,
layout: 'border',
config: {
northItems: null,
westItems: null,
centerItems: null
},
constructor: function(config) {
this.initConfig(config);
this.callParent(arguments);
},
applyNorthItems: function(northItems) {
this.northItems = northItems;
this.doLayout();
},
applyWestItems: function(westItems) {
this.westItems = westItems;
this.doLayout();
},
applyCenterItems: function(centerItems) {
this.centerItems = centerItems;
this.doLayout();
},
items: [
{
xtype: 'container',
itemId: 'appHeaderContainer',
region: 'north',
height: 60,
items: this.northItems
},
{
xtype: 'container',
itemId: 'appNavigationContainer',
region: 'west',
width: 85,
items: this.westItems
},
{
xtype: 'container',
itemId: 'appContentContainer',
region: 'center',
items: this.centerItems
}
]
});
Aucun commentaire:
Enregistrer un commentaire