1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Brasil
    Posts
    10
    Vote Rating
    0
    neoswf is on a distinguished road

      0  

    Default Answered: Newbie question: What is the best architecture approach for tabbed interface?

    Answered: Newbie question: What is the best architecture approach for tabbed interface?


    Hi
    I have watched the "Using Tabs & Toolbars" tutorial and I was wondering if it is the best approach.
    I saw that someone asked if this tutorial is still updated, and I saw one method there, that I couldn't find too much documentation about: "Ext.reg".

    That made me wonder if this tutorial is updated, and if choosing this structure is the best way.

    Will appreciate any directions. I`m a total newbie and wants a lot to learn.

    Thank you!

    Edit: - I wana clarify my question.
    All I need is a layout with a TabBar. The same bar from the tutorial, at the bottom.
    I don't need the panel above, and I am facing difficulties removing it once I add Carousel or any other item into the panels.
    Really, I need a good base to start from. There are some tutorials and its hard to choose from. Will appreciate guiding to the right direction.
    Shlomi.

    >>Update2
    I solved the TabPanel problem and changed the extending to Ext.extend(Ext.Panel)
    Last edited by neoswf; 21 Nov 2011 at 9:41 AM. Reason: Clarifyng the question

  2. Ext.reg, Ext.regModel, initComponent and dockedItems are deprecated.

    Code:
    ToolbarDemo.views.Locais = Ext.extend(Ext.Panel, {    title: "Locais",
        iconCls: "locate",
        styleHtmlContent: true,
        html: "Minha Cidade...........",
        initComponent: function() {
            Ext.apply(this, {
                dockedItems: [{
                    xtype: "toolbar",
                    title: "Locais"
                }]
            });
            ToolbarDemo.views.Locais.superclass.initComponent.apply(this, arguments);
        }
    });
    
    Ext.reg('locais', ToolbarDemo.views.Locais);
    now becomes:

    Code:
    Ext.define('ToolbarDemo.views.Locais', {
        extend : 'Ext.Panel',
        xtype  : 'locals',
    
        config : {
            iconCls          : 'locate',
            styleHtmlContent : true,
            html             : 'Some html stuff here'
        },
    
        constructor: function(config) {
            config.items = [
                {
                    xtype  : 'toolbar',
                    docked : 'top', //docked will become dock in a future release
                    title  : 'Locals'
                }
            ];
    
            this.callParent([config]);
        }
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3357
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you see Ext.reg... that is legacy ST1 code. This is now done within Ext.define with the xtype property.

    Concepts from the tutorial can still be used, just a different syntax.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    Brasil
    Posts
    10
    Vote Rating
    0
    neoswf is on a distinguished road

      0  

    Default Thanks Mitchell

    Thanks Mitchell


    1. is it a good idea to keep Ext.reg, or better to update it to the new method?
    2. Is the arquitecture demonstrated in the tutorial is the best for my app?
      i.e. - seperating all the files into xtypes, instead of placing everything in one file?
    I believe that that architecture is the MVC inspired one, but still I have watched several tutorials, and each show different approach, so i`m little confused.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3357
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    1. Ext.reg is deprecated so don't use it.
    2. Yes. Try to get into a mindset that everything you do is going to be reused so if you can strip it out to it's own class, do it. Now things like textfields don't need to be unless you need to have changes that are going to be used often.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Nov 2011
    Location
    Brasil
    Posts
    10
    Vote Rating
    0
    neoswf is on a distinguished road

      0  

    Default Thank you Mitchell. Regarding Ext.Reg

    Thank you Mitchell. Regarding Ext.Reg


    Are you sure u meant Reg and not RegModal? (http://docs.sencha.com/touch/2-0/#!/...ethod-regModel)
    As I see, RegModal been replaced with Define. Is it still correct that Reg replaced with Define?

    If so, I haven't mannaged to adjust the tutorial syntax to the syntax of Define.
    How for example this block of code will get the new syntax?
    Code:
    ToolbarDemo.views.Locais = Ext.extend(Ext.Panel, {    title: "Locais",
        iconCls: "locate",
        styleHtmlContent: true,
        html: "Minha Cidade...........",
        initComponent: function() {
            Ext.apply(this, {
                dockedItems: [{
                    xtype: "toolbar",
                    title: "Locais"
                }]
            });
            ToolbarDemo.views.Locais.superclass.initComponent.apply(this, arguments);
        }
    });
    
    
    Ext.reg('locais', ToolbarDemo.views.Locais);
    I have tried like that. Didn`t work.....
    Code:
    Ext.define("ToolbarDemo.views.Locais", {    
        extend: "Ext.Panel",
        title: "Locais",
        iconCls: "locate",
        styleHtmlContent: true,
        html: "Minha Cidade...........",
        initComponent: function () {
            Ext.apply(this, {
                dockedItems: [{
                    xtype: "toolbar",
                    title: "Locais"
                }]
            });
            ToolbarDemo.views.Locais.superclass.initComponent.apply(this, arguments);
        }
    });
    Thank you.

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3357
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Ext.reg, Ext.regModel, initComponent and dockedItems are deprecated.

    Code:
    ToolbarDemo.views.Locais = Ext.extend(Ext.Panel, {    title: "Locais",
        iconCls: "locate",
        styleHtmlContent: true,
        html: "Minha Cidade...........",
        initComponent: function() {
            Ext.apply(this, {
                dockedItems: [{
                    xtype: "toolbar",
                    title: "Locais"
                }]
            });
            ToolbarDemo.views.Locais.superclass.initComponent.apply(this, arguments);
        }
    });
    
    Ext.reg('locais', ToolbarDemo.views.Locais);
    now becomes:

    Code:
    Ext.define('ToolbarDemo.views.Locais', {
        extend : 'Ext.Panel',
        xtype  : 'locals',
    
        config : {
            iconCls          : 'locate',
            styleHtmlContent : true,
            html             : 'Some html stuff here'
        },
    
        constructor: function(config) {
            config.items = [
                {
                    xtype  : 'toolbar',
                    docked : 'top', //docked will become dock in a future release
                    title  : 'Locals'
                }
            ];
    
            this.callParent([config]);
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #7
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    And just to follow up on @mitchellsimoens post.

    `items` is also a configuration, so you don't need to override the constructor at all:

    Code:
    Ext.define('ToolbarDemo.views.Locais', {
        extend : 'Ext.Panel',
        xtype  : 'locals',
    
        config : {
            iconCls: 'locate',
            html   : 'Some html stuff here',
            styleHtmlContent: true,
    
            items: [
                {
                    xtype  : 'toolbar',
                    docked : 'top', //docked will become dock in a future release
                    title  : 'Locals'
                }
            ]
        }
    });
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Thread Participants: 2

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