1. #1
    Sencha User wiseguy12851's Avatar
    Join Date
    May 2012
    Posts
    23
    Vote Rating
    2
    wiseguy12851 is on a distinguished road

      0  

    Default Need help extending Panel

    Need help extending Panel


    I'm trying to create a simple View class that extends Panel and has 1 custom configuration option. After hours of trying, scouring documentation, forum posts, Search Engines, API Docs, etc... I've given up and any help would be really appreciated.

    This is the class as I've made so far,

    Code:
    Ext.define("Sandbox06102012a.view.Player",
    {
        extend: "Ext.panel.Panel",
        alias: "Sandbox06102012a.player",
        
        config:
        {
            playerId: "", //<-- Custom configuration option
            layout: 'fit',
            html: '<div id="' + this.playerId + '"></div>'
        },
        
        constructor: function(config)
        {
            this.initConfig(config);
        }
        
        initComponent: function()
        {
            this.callParent();
        }
    });

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Try:

    Code:
    Ext.define('Sandbox06102012a.view.Player', {
        alias: 'widget.player', // alias must start 'widget.'
        extend: 'Ext.panel.Panel',
    
        layout: 'fit', // this won't do anything if you specify HTML, only applies to items
        
        initComponent: function() {
            this.html = '<div id="' + this.playerId + '"></div>';
    
            this.callParent();
        }
    });
    Not sure why you're trying to extend Panel though. Wouldn't Ext.Component be a better choice? I assume you're using some sort of third-party player that requires a fixed player id, so what about:

    Code:
    Ext.create('Ext.Component', {
        id: playerId
    });
    Or if you can use an arbitrary id it might be safer to go for:

    Code:
    var comp = Ext.create('Ext.Component');
    
    var playerId = comp.getId();

  3. #3
    Sencha User wiseguy12851's Avatar
    Join Date
    May 2012
    Posts
    23
    Vote Rating
    2
    wiseguy12851 is on a distinguished road

      0  

    Default


    Thanks for the helpful reply, I'm getting more familiar with ExtJS but there still quite a bit I don't know yet and haven't considered Ext.Component as an option.

    I assume you're using some sort of third-party player that requires a fixed player id
    Yes I'm using a 3rd party interactive animation player that embeds itself onto an id tag

    Code:
    Ext.create('Ext.Component', {     id: playerId });
    I'm interested in designing a full-fledged Ext JS Application so I thought I would make that a view and add an interface for the controller to work with.

    My main question is that I'm running into many unexplainable errors in creating/defining my own classes
    1. I can't figure out how and when to use the constructor function, and it seems to be the legacy version of the newer initComponent.
    2. I also can't figure out how to implement my own config options, Are the get and set functions created automatically or is initConfig required and if so where and how do I use it
    3. Any configs I set in a class always superceed the config options passed to Ext.create, is there a way to allow some/all of them to be overrideable
    4. I'm confused over the alias, is "widget" required as a prefix (widget.MyClass) or can I use another prefix maybe even on multiple levels (widget.someGroup.MyClass)
    5. I'm also quite confused on all the different variable types (static, mixin, public, protected, private, etc...) and really trying to get a grasp on that
    6. Are there different kinds of methods as well (public, private, static, etc...)
    I appreciate anyone who can answer these questions. Please also let me know if there's an ExtJS IRC Channel since I might can also go there for help.

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    For lots of little questions like this I highly recommend posting individual questions in the the Q&A forum.

    Quote Originally Posted by wiseguy12851 View Post
    I'm interested in designing a full-fledged Ext JS Application so I thought I would make that a view and add an interface for the controller to work with.
    ExtJS takes a bit of learning, if you try to write a full-fledged application without making an attempt to learn the basics first you'll just end up with a train wreck. Make sure you're comfortable with the components and layouts before you start trying to write a whole application.

    I'd strongly advise learning JavaScript thoroughly before you embark on your ExtJS adventure. The code you posted originally could never have worked because the value of this in this.playerId referred to the global window object and not the class instance. ExtJS is not magic, the basic language rules of JavaScript still apply. ExtJS class definitions are artificial and should not be confused with the language constructs used elsewhere (e.g. Java).

    The MVC, depsite being given centre-stage in all the documentation, is actually quite an advanced topic and personally I wouldn't go near it until you're comfortable with the basics. That said, the MVC is certainly something I would advise considering in a real application.

    A note on terminology. The three terms component, widget and view are often used interchangeably. This can cause some confusion as some of those terms can also refer to other things. The term component is most often used in the context given here but can also be used to mean Ext.Component. The term view can also be ambiguous as people can use it to mean dataview (a dataview being Ext.view.View). DataView was renamed to View in ExtJS 4 and it has caused all sorts of confusion.

    Quote Originally Posted by wiseguy12851 View Post
    I can't figure out how and when to use the constructor function, and it seems to be the legacy version of the newer initComponent.
    All classes have a constructor, only components have an initComponent. This isn't a legacy thing, it's been that way for a long time. The method initComponent is generally preferred for constructor-like behaviour when extending a component. You can think of it as a protected template method: there are dozens of others, such as beforeRender and afterRender. If you're extending something that isn't a component then you can't use initComponent so you'd have to use either the constructor or some other suitable override (don't be afraid to read the source code to establish whether a suitable method exists).

    Quote Originally Posted by wiseguy12851 View Post
    I also can't figure out how to implement my own config options, Are the get and set functions created automatically or is initConfig required and if so where and how do I use it
    I wouldn't use all the config stuff if I were you. In Touch 2 it's fundamental but in ExtJS 4 it still feels like a bodge to me.

    Note by 'config stuff' I mean the config property in a class definition and the initConfig method. These should not be confused with the config object passed when instantiating an object, which is something you have to use.

    Quote Originally Posted by wiseguy12851 View Post
    Any configs I set in a class always superceed the config options passed to Ext.create, is there a way to allow some/all of them to be overrideable
    The more fundamental question here is 'what is a config?'

    When you specify a property on a class definition it gets added to the class's prototype, so it will exist on all instances of that class. The config object passed to the constructor function is copied to the instance so it will mask the values on the prototype (this is done via Ext.apply(this, config) if you're curious to dig into the details). The copying process occurs in the constructor before the call to initComponent. The intention is that by the time initComponent is called the original config object will no longer be relevant, instead all important properties can be read off this.

    So, as an example...

    Code:
    Ext.define('MyClass', {
        extend: 'Ext.Component',
    
        // These two properties are on the prototype of the class
        age: 74,
        value: 12,
    
        initComponent: function() {
            console.log('Age: ' + this.age);
            console.log('Value: ' + this.value);
            this.callParent();
        }
    });
    
    Ext.create('MyClass', {value: 25});
    Inside the inherited constructor is the line:

    Code:
    Ext.apply(this, config);
    This will copy the value of 25 onto the instance. The code above will log the age to be 74 and the value will be 25.

    If you aren't comfortable with the concept of a prototype chain then you need to be. It's core JavaScript, not ExtJS-specific.

    If you want to forcibly override an config option in your class (rarely a good idea, you should trust the config) you can just set it in initComponent, after the config copying has occurred.

    Quote Originally Posted by wiseguy12851 View Post
    I'm confused over the alias, is "widget" required as a prefix (widget.MyClass) or can I use another prefix maybe even on multiple levels (widget.someGroup.MyClass)
    For components you need to use the prefix 'widget.'. Avoid having dots in aliases (apart from the one after the prefix), they'll trip you up later as they clash with component query syntax. Other types of class (e.g. stores, readers, ...) use alternative prefixes. Take a look at the code for the library to see examples of other alias types.

    There's nothing to force you to use the 'widget.' prefix but you won't be able to use the alias as an xtype or in a component query if you don't, which makes it pretty useless.

    For namespacing of aliases I tend to use hyphens instead of dots. e.g. 'widget.header-logout-button'.

    Quote Originally Posted by wiseguy12851 View Post
    I'm also quite confused on all the different variable types (static, mixin, public, protected, private, etc...) and really trying to get a grasp on that
    Standard programming terminology, Google is your friend on this one.

  5. #5
    Sencha User wiseguy12851's Avatar
    Join Date
    May 2012
    Posts
    23
    Vote Rating
    2
    wiseguy12851 is on a distinguished road

      0  

    Default


    Thanks for the great reply, it thoroughly answered many long-time questions I've had.

    I'll look further into the details described in your post as well as the Q/A section of the forum.

Thread Participants: 1

Tags for this Thread