1. #1
    Ext User
    Join Date
    Nov 2007
    Posts
    12
    Vote Rating
    0
    benArrayx is on a distinguished road

      0  

    Default How to make generated code work

    How to make generated code work


    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

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    8,892
    Vote Rating
    102
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Ext User
    Join Date
    Apr 2010
    Posts
    1
    Vote Rating
    0
    jrobin is on a distinguished road

      0  

    Default


    I have the same problem but even with your solution acoran it doesn't work
    Have you got other solutions please?

  4. #4
    Ext User
    Join Date
    May 2010
    Posts
    17
    Vote Rating
    0
    adhoul is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    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.

  6. #6
    Ext User
    Join Date
    May 2010
    Posts
    17
    Vote Rating
    0
    adhoul is on a distinguished road

      0  

    Default


    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

  7. #7
    Sencha - Desktop Packager Dev Team jarrednicholls's Avatar
    Join Date
    Mar 2007
    Location
    Frederick, MD
    Posts
    1,747
    Vote Rating
    7
    jarrednicholls will become famous soon enough jarrednicholls will become famous soon enough

      0  

    Default


    Yes you sure have. Thanks for reporting this. I would suggest a better name than "viewport" for now :-)

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar