1. #1
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    855
    Vote Rating
    38
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default xtypes, layouts and classes...

    xtypes, layouts and classes...


    Hi,

    Before I get to my proper question perhaps a bit of overview of what I'm trying to achieve...

    Ideally I want to try and get to a position where I can provide a framework for our web UI's where a lot of the complexity of the Ext stuff is hidden from those at the coal face.

    The general thinking is to provide generic view classes that provide common page layouts that we use.
    For example, all of our pages have a header, then a main content panel, so this indicates to me a common viewport that sorts out the header, and a takes a panel as the main content.

    This content panel may then be a two pane layout, with a grid on top and a details pane below.
    It could be a tree on the left, then a grid and detail pane on the right, again with a horizontal split. Sure you get the idea...

    A developer then only has to say what page style then need, and provide the top & bottom panel implementation, say.
    Obviously there's some thought still needed for handling events between panes, but sure that's solvable by making the content styles more focused...

    Anyway, the question I have stems from the fact I'm not exactly sure how layouts work I think... I've always found the process of laying out components, and panels especially, to be a little hit and miss, a try it and see what happens type approach.

    From what I can see from playing about with some ideas, if a panel class is actually created using Ext.create before it is displayed (i.e. for putting into a config object), then a fit layout essentially does nothing.
    I'd want fit layout for the panel below the header you see.

    This is before we even get to the real content...

    Does this mean I cannot actually create panels at construction or initComponent time?
    Do I have to define my panels as JSON with xtypes so they're created later (I think that's what that does at leaset)?
    If supposed to use xtypes, where has Ext.register gone? Has it been replaced with something else, or is that no longer the approach to take?
    Do I have to kick panels after creation somehow so that the layout works (have tried doLayout, but probably in the wrong place)? Perhap in a render event or something?

    Sorry for the barrage of questions, I'd just like to understand how it works, and what the approach to take should be.

    Apologies if I've not explained myself very well either. Feel free to ask questions if needed.

    I look forward to any insights you may have.

    Cheers,
    Westy

  2. #2
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    855
    Vote Rating
    38
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Ah, I see part of the answer wrt xtypes here:
    Code:
    {
        alias : 'widget.myclass'
    }
    {
        xtype : 'myclass'
    }

  3. #3
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    855
    Vote Rating
    38
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Ok, can now use xtypes to define my own classes, so that's good.

    Layouts still not applying though, hmm... will keep tinkering...

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,098
    Vote Rating
    113
    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 aconran is a splendid one to behold

      0  

    Default


    xtypes are all under 'widget.'

    layouts are all under 'layout.'

    plugins are all under 'plugin.'

    stores are all under 'store.'


    I'm uncertain as to what your question is with regard to layout
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha User
    Join Date
    Oct 2010
    Posts
    159
    Vote Rating
    0
    mdavis6890 is on a distinguished road

      0  

    Default


    Make sure that you've got a valid layout specified at each layer. If you're missing one somewhere you'll get into trouble. Also, some layouts require configuration options and some require specific item configurations too.

    I rarely pay for software, but Illuminations was well worth the $30(?) as it makes stepping through the hierarchy much less painful.

    Michael

  6. #6
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    855
    Vote Rating
    38
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Good tip Michael, thanks!

    I didn't realise you needed a 'fit' even when doing something like this in the panel class:
    Code:
            Ext.apply(this, {
                layout: 'fit',
                items: this.createView()
            });
    
    //...
    
    createView: function() {
            this.view = //Ext.create('Ext.grid.GridPanel', {
            {
                xtype: 'gridpanel',
                frame: true,
                title: 'Title',
                store: 'myStoreId',
                layout: 'fit',
                items: [{
                    headers: [
                        {
    // ...
    And this in the viewport class:
    Code:
            Ext.apply(this, {
                items: [{
                    region: 'north',
                    items: this.createHeader()
                },{
                    region: 'center',
                    layout: 'fit',
                    items: [this.getContentPanel()]
                }]
            });
    Cheers, hopefully my woes with fit layouts should be a thing of the past now

    And agree on Illuminations, must get a license sorted. Still running a trial here, but have approval to buy...

    Cheers,
    Westy

Similar Threads

  1. [CLOSED]xtypes
    By tobiu in forum Ext:Bugs
    Replies: 10
    Last Post: 18 Feb 2011, 5:47 AM
  2. Help with Layouts, Part 2 - how "height in ems" fits into layouts in extjs?
    By Eric.Sencha in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 17 Sep 2010, 9:38 AM
  3. [FIXED][3.x/2.x] xtypes undefined for Tip classes
    By mjlecomte in forum Ext 3.x: Bugs
    Replies: 1
    Last Post: 30 Jul 2009, 9:47 PM
  4. Replies: 11
    Last Post: 20 May 2009, 11:46 PM
  5. Builder classes/Preconfigured Classes
    By zhiliang in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 7 May 2008, 1:33 AM

Thread Participants: 2