Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: ExtJS Desktop grid won't render again

  1. #1

    Default ExtJS Desktop grid won't render again

    Hi guru's,

    i am writing my second ExtJS application and using the desktop example for that. I've managed to add a grid module with server-side data store and placed it on the desktop. the grid works and store loads picobello. My problem is when i close the windows and try to re-open it, the grid doesn't show up. I've compared my window with other example windows but couldn't see any difference. This is the example code:

    Code:
    MyDesktop = new Ext.app.App({
    //exactly same configuration as the example
    )};
    var pagesGrid = new Ext.grid.GridPanel({
    //bla bla
    });
    MyDesktop.PageManager = Ext.extend(Ext.app.Module, {
    //this is my window
    items: pagesGrid 
    });
    do i have to define the grid in the MyDesktop.PageManager, or whatelse could be the problem? Thanks in advance.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    By default, clicking the "X" button destroys the Window which destroys all its child Components.

    You should use closeAction: 'hide', and that will just hide the Windw, and it can be just shown next time.

  3. #3
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    another use of the desktop. wow.

  4. #4

    Default

    thanks for the fast response animal. yes it indeed seems to be the problem but if i add this, the window doesn't close just minimizes in the taskbar. other windows closes multiple times without problem but they define the components in MyDesktop.PageManager. shall i put another container in the window, define the closeaction property and place grid in this child panel? Does apply closeaction just for the main window? thanks.

  5. #5

    Default

    ok i change my question,
    Code:
    MyDesktop = new Ext.app.App({
        init :function(){
            Ext.QuickTips.init();
        },
    
        getModules : function(){
            return [
                new MyDesktop.GridWindow(),
                new MyDesktop.TabWindow(),
                new MyDesktop.AccordionWindow(),
                new MyDesktop.BogusMenuModule(),
                new MyDesktop.BogusModule(),
                new MyDesktop.PageManager()
            ];
        },
        // config for the start menu
        getStartConfig : function(){
            return {
                title: 'Jack Slocum',
                iconCls: 'user',
                toolItems: [{
                    text:'Settings',
                    iconCls:'settings',
                    scope:this,
                    handler: function(){
                        alert('yes');
                    }
                },'-',{
                    text:'Logout',
                    iconCls:'logout',
                    scope:this
                }]
            };
        }
    });
    i assume this is a class that extends Ext.app.App and all components are defined as new MyDesktop.AccordionWindow(). defining components with var bla = and addding closeAction hide is a nice option so you can reset variables and hide the window for next use but it overwrites the desktop application's close function which is also interacted with the taskbar. So what is the proper way of adding some sub components to MyDesktop class that don't get destroyed and recallable. sorry for being such a newbie.

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    I'm not that familiar wit the Desktop extension.

    If you want the close action to close the Window, but not destroy its contents, then add a beforedestroy listener which removes (without destroying - see docs) the child item(s)

  7. #7
    Ext User
    Join Date
    Jun 2009
    Location
    Brazil (GMT -3)
    Posts
    18

    Default

    I did this and it worked for me, i don't know if it is the best way but it worked.

    I created a new type of window inside the Desktop.js. This window, when closed, doesn't distroys its elements becouse it hides. Ok, if the window is set to hide it seems to be minimized, but i coul avoi this by doing some modifications to the close and show methods.

    Code:
    this.createHidableWindow = function(config, cls){
            var win = new (cls||Ext.Window)(
                Ext.applyIf(config||{}, {
                    manager: windows,
                    minimizable: true,
                    maximizable: true
                })
            );
            win.render(desktopEl);
    
            win.cmenu = new Ext.menu.Menu({
                items: [
    
                ]
            });
    
            win.on({
                'activate': {
                    fn: markActive
                },
                'beforeshow': {
                    fn: function(win){
                        win.taskButton = taskbar.addTaskButton(win);
                        win.animateTarget = win.taskButton.el;
                        markActive(win);
                    }
                },
                'deactivate': {
                    fn: markInactive
                },
                'minimize': {
                    fn: minimizeWin
                },
                'close': {
                    fn: removeWin
                },
                'beforeClose': {
                    fn: function(win){
                        win.hide();
                        removeWin(win);
                        return false;
                    }
                }
            });
            
            layout();
            return win;
        }
    Cristiano L. Mazzotti

  8. #8
    Ext User
    Join Date
    Jun 2009
    Location
    Brazil (GMT -3)
    Posts
    18

    Default

    Updated code.

    There was a bug when window was minimized an then maximized. It would create a new taskbarItem. Now itsfixed.

    Code:
    this.createHidableWindow = function(config, cls){
            var win = new (cls||Ext.Window)(
                Ext.applyIf(config||{}, {
                    manager: windows,
                    minimizable: true,
                    maximizable: true
                })
            );
            win.render(desktopEl);
    
            win.hasTaskBarBtn = false;
    
            win.cmenu = new Ext.menu.Menu({
                items: [
    
                ]
            });
    
            win.on({
                'activate': {
                    fn: markActive
                },
                'beforeshow': {
                    fn: function(win){
                        if(!win.hasTaskBarBtn){
                            win.taskButton = taskbar.addTaskButton(win);
                            win.animateTarget = win.taskButton.el;
                            win.hasTaskBarBtn = true;
                        }
                        markActive(win);
                    }
                },
                'deactivate': {
                    fn: markInactive
                },
                'minimize': {
                    fn: minimizeWin
                },
                'close': {
                    fn: removeWin
                },
                'beforeClose': {
                    fn: function(win){
                        win.hide();
                        if(win.hasTaskBarBtn){
                            removeWin(win);
                            win.hasTaskBarBtn = false;
                        }
                        return false;
                    }
                }
            });
            
            layout();
            return win;
        }
    Cristiano L. Mazzotti

  9. #9
    Ext User Lukman's Avatar
    Join Date
    Jun 2009
    Location
    Malaysia
    Posts
    138

    Default

    Err ... all this trouble can be avoided if you use lazy instantiation of your pagesGrid (i.e. using xtype).

    Code:
    MyDesktop = new Ext.app.App({
    //exactly same configuration as the example
    )};
    var pagesGrid = {
    xtype: 'grid',
    //bla bla
    };
    MyDesktop.PageManager = Ext.extend(Ext.app.Module, {
    //this is my window
    items: pagesGrid 
    });
    OR by setting autoDestroy: false in your Ext.Window config:

    Code:
    MyDesktop = new Ext.app.App({
    //exactly same configuration as the example
    )};
    var pagesGrid = new Ext.grid.GridPanel({
    //bla bla
    });
    MyDesktop.PageManager = Ext.extend(Ext.app.Module, {
    //this is my window
    items: pagesGrid,
    autoDestroy: false
    });

  10. #10
    Ext User
    Join Date
    Jun 2009
    Location
    Brazil (GMT -3)
    Posts
    18

    Default

    NIce, I'll try in this way. Its a lot better.
    Cristiano L. Mazzotti

Page 1 of 2 12 LastLast

Posting Permissions

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