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:

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 Code:

<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:

Code:

			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:

Code:

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:

Code:

<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

Code:

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 :-)

How to make generated code work

Thread Tools

Search Thread

Display

How to make generated code work

How to make generated code work