Results 1 to 3 of 3

Thread: Extending Ext.Panel

  1. #1
    Sencha User DrunkenBeard's Avatar
    Join Date
    May 2011
    Posts
    55
    Answers
    2

    Default Answered: Extending Ext.Panel

    Hi,

    Our current application (ST1) uses this architecture : each view is defined as a class extending Ext.Panel, so everytime we need to show a view we just make an instance of it and show it. As an example : we have a Viewport.js files where we define the app.views.Viewport class extending Ext.Panel, so in the launch event of our application we only have to do a "new app.views.Viewport();" to show the viewport.

    Now, I'm trying to migrate the application to ST2 and replicating the new class architecture into our existing one : I've changed the Viewport.js file to read :

    Code:
    Ext.define('app.views.Viewport', {
        extend: 'Ext.Panel',
    
    
        style: 'background-color: #f00',
        fullscreen: true
    }
    and in app.js, I've made the following change :

    Code:
    new Ext.application({
        name: 'app',
    
    
        launch: function() {
            // NOT WORKING !
            Ext.create('app.views.Viewport');
        }
    });
    Viewport.js is included before app.js in index.html (just in case).

    I can't seem to identify the problem but the code doesn't work at all. No errors or anything, just a blank page. If I hardcode the panel directly into app.js, it actually works so the problem is somewhere in the call to Ext.create() :

    Code:
    new Ext.application({
        name: 'app',
    
    
        launch: function() {
            // WORKING !
            Ext.create('Ext.Panel', {
                 style: 'background-color: #f00',
                 fullscreen: true
            });
        }
    });
    Ideas ?

  2. Check out our guides about the new config system. Its available in the docs. Basically you have to move any configuration into a config object when you define a class. Like this:

    PHP Code:
    Ext.define('app.views.Viewport', {
        
    extend'Ext.Panel',

        
    config: {
            
    style'background-color: #f00',
            
    fullscreentrue
        
    }
    }); 

    When you instantiate a class like in your second example, you basically are passing a config object that gets deeply merged with the one in the Panel class definition.

    Also, you should be able to make use of the autoCreateViewport option.

    PHP Code:
    new Ext.application({
        
    name'app',
        
    autoCreateViewporttrue
    }); 
    Let me know if this works.

  3. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Answers
    28

    Default

    Check out our guides about the new config system. Its available in the docs. Basically you have to move any configuration into a config object when you define a class. Like this:

    PHP Code:
    Ext.define('app.views.Viewport', {
        
    extend'Ext.Panel',

        
    config: {
            
    style'background-color: #f00',
            
    fullscreentrue
        
    }
    }); 

    When you instantiate a class like in your second example, you basically are passing a config object that gets deeply merged with the one in the Panel class definition.

    Also, you should be able to make use of the autoCreateViewport option.

    PHP Code:
    new Ext.application({
        
    name'app',
        
    autoCreateViewporttrue
    }); 
    Let me know if this works.

  4. #3
    Sencha User DrunkenBeard's Avatar
    Join Date
    May 2011
    Posts
    55
    Answers
    2

    Default

    Yep, works fine Thanks !

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •