PDA

View Full Version : How do I dynamically add items to border layout region containers?



xjscrafter
19 May 2014, 6:18 PM
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?

I'm getting this error:

TypeError: items is undefined





len = items.length,




Thanks in advance.


<!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
}
]
});

jsakalos
19 May 2014, 10:07 PM
Containers have add (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.container.Container-method-add) and insert (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.container.Container-method-insert) methods to do that.

xjscrafter
20 May 2014, 8:23 AM
Stackoverflow provided the answer:

http://stackoverflow.com/questions/23750013/how-do-i-dynamically-add-items-to-extjs-4-2-1-border-layout-region-containers


Ext.define('APP.view.Main', {
extend: 'Ext.container.Container',
alias: 'widget.mainAppView',


layout: 'border',


northItems: null,


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'container',
itemId: 'appHeaderContainer',
region: 'north',
height: 60,
items: me.northItems
}
]
});


me.callParent(arguments);
},


applyNorthItems: function(northItems) {
this.down('#appHeaderContainer').add(northItems);
}
});