1. #11
    Sencha User gcallaghan's Avatar
    Join Date
    Apr 2010
    Location
    Cupertino, Ca
    Posts
    247
    Vote Rating
    0
    gcallaghan is on a distinguished road

      0  

    Default


    I am curious about your technique for destroying and creating cards. Could you give a simple example of how you accomplish that?

  2. #12
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Vote Rating
    836
    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


    Quote Originally Posted by gcallaghan View Post
    I am curious about your technique for destroying and creating cards. Could you give a simple example of how you accomplish that?
    My trade secret? haha let me put together something and I will
    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.

  3. #13
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Keeping it light, Sencha will automatically set a unique ID. But when you try to refer to it, how can you get this unique ID.
    You are right Sencha assign unique id to components so what is wrong if I want assign my custom id? I make the same question to you, if you let Sencha assign auto id for all the components how do you refer to them? My reply is simple, assign your custom id.
    In the example I post you, if you have to create and insert a button in a dynamic way, how can you access the components by index? All the functions that refer to a button at index 0, after that, should use index 1, an all the other buttons inside the same toolbar shift by 1, so the same for all other buttons. It depends by the situation! As already said, in normal condition, I prefer to don't use getCmp() but sometime this could be a good solution. I think you look too much at ComponentMgr as an evil object .
    So for you, even the ComponentQuery should not be use at all?

    Quote Originally Posted by mitchellsimoens View Post
    When I create an App, I don't just add some Panels. Each "screen" is actually just an extension of another component. Then I instantiate that extension when needed. This is reusable.
    If you add a panel, you are just adding a new istance of Panel object with different configurations, you are not extending that object.
    To extend an object you use Ext.Extend. Then you can add istances of the new type to your application. This is OOP.
    (Maybe I misunterstood and this is what you do? Do you create every panel from a different abstracted class?)

    Quote Originally Posted by mitchellsimoens View Post
    If a function is used more than once, it is abstracted out and that creates a base for what to extend upon.
    I don't doubt about it, that's what I do too

    However the way you use your card layout is interesenting, but I don't doubt neither to the fact that you should destroy items you don't use anymore.

    I don't know if you saw some video on the project I 'm working on:
    http://www.sencha.com/forum/showthre...%28Aral-CMS%29

    This project is composed by around 250 different javascript.
    Every one of each include a custom class, the inherith from another class and so on.
    The modules are extension of my custom base classes that contains shared functions / components, so, in this way, I can use them even with Ext interface.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #14
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Vote Rating
    836
    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


    Quote Originally Posted by gcallaghan View Post
    I am curious about your technique for destroying and creating cards. Could you give a simple example of how you accomplish that?
    I was going to write a blog about it but decided it was just too much. I have attached source code to back this up.

    So what is going on... I have a Panel that will hold everything. I have a top dock and bottom dock. Top dock holds a title and buttons only related to individual screens. The bottom dock is for the application as a whole like a Menu button or a Home button.

    The default screen is just a Component with some static HTML. I tend to just show simple stuff on the default screen like static HTML or an image.

    I have 3 Panels called Card1, Card2, and Card3. Card1 holds a List, Card2 gets updated with HTML from a Template, and Card3 is a FormPanel.

    So click on the Start button on the bottom dock. This will switch to Card1 and show a List. Nothing is destroyed but the List and Store is NOT added to Card1 until the 'activate' event is fired. This allows the animation to be smooth. So click/tap on an item in the List, this now adds Card2 to the App Panel with the record you tapped on and then sets that new component as the active item. Card1 then fires the 'deactivate' event and destroys itself and it's children. It will also delete any references I have made.

    Card2's 'activate' event fires and like Card1 it will then execute it's buildItems function which just updates itself with some HTML fed by the Template which was fed by a record. So right now, you have the default screen and Card2 rendered as Card1 has been destroyed. This also shows two buttons on the top dock: Back and Edit. If you click Back, it will add Card1 back to the App Panel and set it as the active item. If you click Edit, it will add Card3 (a FormPanel) with the record and set it as the active item. Either button you press, it will fire it's 'deactivate' event which I have setup to destroy itself and the record reference.

    Say you clicked on Edit, it added Card3 with the record. Once Card3 fires it's 'activate' event and will build it's children, in this case a single Text field. You will also notice that I add a listener for the 'afterlayout' event. I do this because I do not want to execute Card3's loadRecord function before the fields have been laid out or else it won't load the data from the record correctly. You can click Cancel and it will take you back to Card2 with the record.

    As a summary, I listen for the 'activate' and 'deactivate' events. The 'activate' listener will build all the items after the animation. The 'deactivate' will destroy everything after the animation. REMEMBER TO DELETE ANY REFERENCES LIKE I DO WITH this.rec! If you do not, you have just created a memory leak. For FormPanels, I listen for the 'afterlayout' event to load the Record I pass through.

    So it adds things when needed and removes when not needed. The trick is to make it work with each other like Card3 cannot work properly without getting the Record from Card2 and going from Card3 back to Card2 will not work without repassing the Record to Card2.

    Usually I am not the best at describing step-by-step what is going on which is why I have provided the source. I learn best by just reading source. Let me know if you do not understand something.
    Attached Files
    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.

  5. #15
    Sencha User gcallaghan's Avatar
    Join Date
    Apr 2010
    Location
    Cupertino, Ca
    Posts
    247
    Vote Rating
    0
    gcallaghan is on a distinguished road

      0  

    Default


    Thanks Mitchell!

  6. #16
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Vote Rating
    836
    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


    Quote Originally Posted by gcallaghan View Post
    Thanks Mitchell!
    No problem! I don't want people to keep making apps that are slow and choppy. Everything I do, I think of the impact it will have on performance and then I find out the best way to do it. I want to see some really cool stuff so I will always help peoplenfine tune things. If that means giving away my secrets, as long as I get some credit it is ok.

    Post back some stuff that you do if you can!
    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.

  7. #17
    Sencha User
    Join Date
    Nov 2010
    Posts
    73
    Vote Rating
    0
    irfaniqbal is on a distinguished road

      0  

    Default


    Quote Originally Posted by andreacammarata View Post
    Hi infaniqbal.
    Let's start to set an id to your toolbars:

    PHP Code:
    var dockedItems = [
        {
            
    xtype'toolbar',
            
    id'toolbar1',
            
    ui'light',
            
    dock'bottom',
            
    itemsbuttonsSpecBottom,
            
    hiddentrue
        
    },
        {
            
    xtype'toolbar',
            
    id'toolbar2',
            
    ui'light',
            
    dock'top',
            
    items: [buttonsSpecTop,{xtype'spacer'}, buttonsSpecHome],
            
    hiddentrue
        
    }
    ]; 
    Then when you have to show them simply write

    PHP Code:
    Ext.getCmp('toolbar1').setVisible(true);
    Ext.getCmp('toolbar2').setVisible(true); 
    Hope this helps.
    Thanks all for contributing your thoughts in this thread.

    @Andrea: I have used your code snippet in my app but did not get required result. In my case, i have a login page and Other pages which were included in a Main Panel. and I did not want to show toolbars at Login page that is why i set toolbar's "hidden: true" initially. and as the user authenticate from server i call following function:
    Code:
    var isLoginItem = function(){
    
        Ext.getCmp('toolbar1').setVisible(true);
        Ext.getCmp('toolbar2').setVisible(true);
    
        app.doLayout();
        app.doComponentLayout();
    }
    which does not show toolbars properly. i have also attached screen shot that page. Please tell me where i m wrong. thanks in advance.
    Attachment 24414

  8. #18
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    No problem! I don't want people to keep making apps that are slow and choppy. Everything I do, I think of the impact it will have on performance and then I find out the best way to do it. I want to see some really cool stuff so I will always help peoplenfine tune things. If that means giving away my secrets, as long as I get some credit it is ok.

    Post back some stuff that you do if you can!
    You still have not reply to my post .
    Do you have a solution for my example using your by Index technique?

    Quote Originally Posted by mitchellsimoens View Post
    Post back some stuff that you do if you can!
    http://www.sencha.com/forum/showthre...%28Aral-CMS%29
    I don't think my app is slow at all

    Cheers
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  9. #19
    Sencha User
    Join Date
    Nov 2010
    Posts
    73
    Vote Rating
    0
    irfaniqbal is on a distinguished road

      0  

    Question Show and Hide Docked Items.

    Show and Hide Docked Items.


    Its been good to see a cold war between two experts.

    @andrea: i would like you to respond to my query. thanks

  10. #20
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by irfaniqbal View Post
    Its been good to see a cold war between two experts.

    @andrea: i would like you to respond to my query. thanks
    Hi infaniqbal.
    I post you a simple exampe to show you how to show or hide docked items.
    The first thing you have do do is create a new javascript named "loginPanel.js" an put this code inside.

    Code:
           Ext.ns('ux');
            
            ux.loginPanel = Ext.extend(Ext.Panel, {
                
                initComponent : function(){
    
                    //Creation of the top docked toolbar
                    this.toolbar1 = new Ext.Toolbar({
                        dock: 'top',
                        items: [{
                            xtype: 'button',
                            text: 'Show Toobar 2',
                            listeners: {
                                tap: function(){
                                    this.toolbar2.setVisible(true);
                                },
                                scope: this
                            }
                        }]
                    });
                    
                    //Creation of the bottom docked toolbar
                    this.toolbar2 = new Ext.Toolbar({
                        dock: 'bottom',
                        items: [{
                            xtype: 'button',
                            text: 'Hide Toobar 1',
                            listeners: {
                                tap: function(){
                                    this.toolbar1.setVisible(false);
                                },
                                scope: this
                            }
                        }]
                    });
                    
                    //Configuration of the panel dockedItems
                    this.dockedItems = [this.toolbar1, this.toolbar2];
                    
                    //Call the superclass initComponent event
                    ux.loginPanel.superclass.initComponent.call(this);
                    
                },
                
                afterRender: function(cmp) {
                    
                    //Call the superclass afteRender event
                    ux.loginPanel.superclass.afterRender.call(this, cmp);
                    
                    //Set toolbar2 invisible
                    this.toolbar2.setVisible(false);
                    
                }
                
            });
    Then in your main "index.js" put this code:

    Code:
    Ext.setup({
    
        onReady: function() {
          
            var panel = new ux.loginPanel({
                fullscreen: true,
                styleHtmlContent: true,
                html: 'This is just a simple example'
            });
    
        }
    });
    I will provide some additional information later about this code, someone is waiting for me at launch
    (I'm from Italy )

    PS: This is not a war but just a way to learn something new
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


Similar Threads

  1. difference between items and docked items
    By thomas12 in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 6 Dec 2010, 7:45 AM
  2. How to hide/show items.
    By TheBigOnion in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 2 Jun 2010, 4:10 AM
  3. dynamically add/remove/show/hide items from toolbar
    By aj3423 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 27 Mar 2010, 4:30 AM
  4. EditorGrid - show/hide items
    By soma13 in forum Ext GWT: Help & Discussion (1.x)
    Replies: 2
    Last Post: 26 Mar 2009, 4:39 AM

Thread Participants: 9

Tags for this Thread