PDA

View Full Version : How to make generated code work



benArrayx
20 Apr 2010, 5:53 AM
Hi there, I'm a relative newbie to ExtJS (have fiddled around before), and have just today downloaded the designer. I attempted to copy a layout example, but I can't get the resulting file to work properly.

Here's my generated js code:



/*
* File: MyViewport.ui.js
* Date: Tue Apr 20 2010 12:10:46 GMT+0100 (GMT Daylight Time)
*
* This file was generated by Ext Designer version xds-1.0.0.8.
* http://www.extjs.com/products/designer/
*
* This file was manually exported.
*/

MyViewportUi = Ext.extend(Ext.Viewport, {
layout: 'border',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'My Panel',
region: 'center',
items: [
{
xtype: 'grid',
title: 'My Grid',
height: 224,
columns: [
{
xtype: 'gridcolumn',
header: 'Column',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'string'
},
{
xtype: 'gridcolumn',
header: 'Column',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'string'
},
{
xtype: 'gridcolumn',
header: 'Column',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'string'
}
]
}
]
},
{
xtype: 'panel',
title: 'My Panel',
region: 'west',
width: 100,
split: true,
items: [
{
xtype: 'treepanel',
title: 'My Tree',
root: {
text: 'Root Node'
},
loader: {

}
}
]
},
{
xtype: 'panel',
title: 'My Panel',
region: 'east',
width: 100,
split: true
},
{
xtype: 'panel',
title: 'My Panel',
region: 'south',
height: 50,
split: true,
margins: '0 0 0 0'
}
];
MyViewportUi.superclass.initComponent.call(this);
}
});


Here's my HTML:



<html>
<head>
<title>ExtJS test</title>
<link rel="stylesheet" type="text/css" href="/css/ext/ext-all.css" />

<script type="text/javascript" src="/js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext/ext-all.js"></script>
<script type="text/javascript" src="MyViewport.ui.js"></script><!-- the code pasted above -->
<body>
</body>
</html>


All the paths are correct and are being loaded (verified in Firebug). But, it simply displays a blank page. Even if I put some really simple code in the MyViewport.ui.js file, I get nothing, such as:



MyButtonUi = Ext.extend(Ext.Button, {
text: 'MyButton',
initComponent: function() {
MyButtonUi.superclass.initComponent.call(this);
}
});


Can anyone shed any light on this for me? AHA :)

Thanks, Ben

aconran
20 Apr 2010, 11:29 AM
After including the class, you will need to create an instance of it so that it will render to the page.

Just to test it out in a separate script block after loading MyViewport.ui.js try the following:


Ext.onReady(function() {
var vp = new MyViewportUi();
});


Typically you would want to subclass the ui class to add behavior so that you could ensure your .ui.js file can continually be overwritten.

jrobin
17 May 2010, 6:02 AM
I have the same problem but even with your solution acoran it doesn't work :(
Have you got other solutions please?

adhoul
17 May 2010, 10:57 PM
I wanted to ask the same thing, as the generated code (when I exported the Project) does not work, I get an error message that "viewport is not a constructor". I read somewhere it has to do with the fact that class names cannot begin with small letters, so I changed all js class first letters with capital letters, but still it wouldn't work, saying "MyViewport is not a constructor"..

So I would like to know the answer to that question too! thank you

jarrednicholls
18 May 2010, 5:29 AM
Can you paste your code? Here is a working example of the code shared by benArrayx:



<html>
<head>
<title>project.xds</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/ext-all-debug.js"></script>
<script type="text/javascript">
MyViewportUi = Ext.extend(Ext.Viewport, {
layout: 'border',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'My Panel',
region: 'center',
items: [
{
xtype: 'grid',
title: 'My Grid',
height: 224,
columns: [
{
xtype: 'gridcolumn',
header: 'Column',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'string'
},
{
xtype: 'gridcolumn',
header: 'Column',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'string'
},
{
xtype: 'gridcolumn',
header: 'Column',
sortable: true,
resizable: true,
width: 100,
dataIndex: 'string'
}
]
}
]
},
{
xtype: 'panel',
title: 'My Panel',
region: 'west',
width: 100,
split: true,
items: [
{
xtype: 'treepanel',
title: 'My Tree',
root: {
text: 'Root Node'
},
loader: {

}
}
]
},
{
xtype: 'panel',
title: 'My Panel',
region: 'east',
width: 100,
split: true
},
{
xtype: 'panel',
title: 'My Panel',
region: 'south',
height: 50,
split: true,
margins: '0 0 0 0'
}
];
MyViewportUi.superclass.initComponent.call(this);
}
});

Ext.onReady(function() {
var viewport = new MyViewportUi();
});
</script>
</head>
<body></body>
</html>


Again though, as Aaron mentioned above, it is recommended to subclass the "ui" generated class so you can continually make changes to it in the Designer and export it without overwriting your implementation. The .ui.js and the .js files are both generated by the Designer when exported.

adhoul
18 May 2010, 5:36 AM
Heres the thing: Ext Designer generates (when a project is exported) a .ui.js file, a .js file, an .html file (let's say xds_index.html) and another .js file (xds_index.js) that has something like



Ext.onReady(function() {
var viewport = new viewport({
renderTo: Ext.getBody()
});
viewport.show();
});



The problem was that the name given to the var was the same as the constructor name (as you can see in the 2nd line of the code), thus it cannot be referenced because there is a conflict.

I think this is a bug, which can be "skipped" if one renames the var and gives it a different name let's say Myviewport or sth...

I hope I made myself clear, thank you

jarrednicholls
18 May 2010, 7:30 AM
Yes you sure have. Thanks for reporting this. I would suggest a better name than "viewport" for now :-)