PDA

View Full Version : Error when trying to use Ext.ux.layout.Center



mx_starter
6 Jun 2014, 8:57 AM
Hi guys, anyone able to help with this code:


var adWindow = Ext.create('Ext.window.Window',
{
maximized: true,closable: false, resizable: false, draggable: false,
layout: 'border'
,items:
[
{
xtype: 'container', region: 'center',
layout: 'ux.center',
items:
[
{xtype: 'panel', width: 800, height: '90%'}
]
}
]
,defaults: {split: true, useSplitTips: true}
}


);


In short - it creates a simple maximized Window with a container within the center region.
This container is configured with a layout: 'ux.center' and contains a 800px panel.

However, when i open the page, the Firebug shows the "TypeError: name is undefined" error in the file
"ext-all-debug-w-comments.js", line 8234, which contains:


if (name === from || name.substring(0, from.length) === from) {

ExtJS is 4.2.1

Any ideas how to solve this out, please?

scottmartin
7 Jun 2014, 7:58 AM
Do you have your requires:
requires: ['Ext.ux.layout.Center'],

Scott.

mx_starter
8 Jun 2014, 11:16 PM
Do you have your requires:
requires: ['Ext.ux.layout.Center'],

Scott.

Of course, Scott.
The /examples/ux/layout/Center.js is loaded normally (before it is used) and in fact, the error goes away when i comment the line


layout: 'ux.center'

Another point that is unclear to me:
The Center.js file sets the

itemCls: 'ux-layout-center-item'

config option and this class is not found in any of the framework CSS files?


Am i missing something???

mx_starter
8 Jun 2014, 11:22 PM
Ouch - the same error appears when i tried to put this code in a fiddle:

6fu

launch it and see the console.

It works with 5.0.0, but not with any of the 4.x branch

I'm really unable to see whether it is my fault or something different...

Phil Guerrant
10 Jun 2014, 8:16 AM
Your problem is that you are trying to Ext.require() center layout inside of your launch function, so it won't be loaded when you try to instantiate it.

Just move the require to the top of the file and it should work

mx_starter
12 Jun 2014, 6:44 AM
Your problem is that you are trying to Ext.require() center layout inside of your launch function, so it won't be loaded when you try to instantiate it.

Just move the require to the top of the file and it should work


Well that's correct and worked in the fiddle.

In my real app, however, i have an index.html start page, which contains scripts in the following order:

<link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/js/ext/ext-all.js"></script>

<script type="text/javascript" src="/js/common/Components.js"></script>
<script type="text/javascript" src="/scripts/Main.js"></script>


the Components.js begins with:


Ext.require([
'Ext.ux.form.MultiSelect'
,'Ext.ux.form.ItemSelector'
,'Ext.ux.layout.Center'
]);


and finally, the center layout is called within the Main.js file - so it must be available, i think (at least, i can see the Center.js loaded)...

similarly, i use ItemSelector without any problems....

Phil Guerrant
12 Jun 2014, 6:51 AM
In your Main.js are you instantiating the center layout inside an Ext.onReady (or application launch) function?

mx_starter
12 Jun 2014, 6:56 AM
In your Main.js are you instantiating the center layout inside an Ext.onReady (or application launch) function?

Yes Phil,
both .js files's code is wrapped within Ext.onReady().

I'm starting to think that a little Ext.defer is needed when opening the window....
Will try these days...