1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    2
    Vote Rating
    0
    kirsten.powers is on a distinguished road

      0  

    Post Dockable/floatable panels in ExtJS?

    Dockable/floatable panels in ExtJS?


    We are currently using ExtJS beta 2.0 and are supremely impressed! I have a question about docking/undocking panels. We have a single web application using ExtJS. This application has a number of panels, the pimary panel being a document viewer where most of the interaction and interesting behaviors take place. We also have a use case to support multiple monitors. Is it possible with the current release of ExtJS to undock a panel from the application and drag it outside the parent browser window? We would love to be able to do this with the document viewer panel. Of course if we can do that, we will need to re-dock the panel.

    Is this possible? Is this too much for the web right now?

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    22
    Vote Rating
    0
    jakeonthenet is on a distinguished road

      0  

    Default


    Kirsten,

    I don't think you can do what you're attempting with any framework. An EXT panel is nothing more than html and doesn't exist outside its parent frame (be that a frame, iframe or the browser proper.)

    Jake

  3. #3
    Sencha User catacaustic's Avatar
    Join Date
    Jul 2007
    Location
    "A Land Down Under"
    Posts
    618
    Vote Rating
    1
    catacaustic is on a distinguished road

      0  

    Default


    Jake is right. With frameworks like Ext and all the rest, you're not creating an actual window as far as the OS is concerned. All you're doing is creating a HTML snippet that's styled to look like a window, and has some actions that may (or may not) be like a window. Because of this, you can't move this outside it's display area.

    Thats the same for pretty much every application though. Using Photoshop as an example, there's a set area for the program, and no panels or windows from that program can exist outside that area. It's exactly the same principle here.

    So, you can float and dock panels, but only in the area of the browser window, not outside of it.
    'Once again, fortune vomits on my eiderdown'
    - Edmund Blackadder

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    If you just want top see a bit more info within your page, you can easily "undock" Panels from TabPanels (or any Container if you just write the code to remove the Panel, and add it to something else).

    This bit makes a child Panel of a TabPanel undockable into a Window by double clicking on its selector:

    Code:
    Ext.override(Ext.Panel, {
    	makeDockable: function() {
    		var o = this.ownerCt;
    		if (!o || !(o instanceof Ext.TabPanel)) {
    			return;
    		}
    		Ext.fly(o.getTabEl(this)).on("dblclick", this.undock, this);
    	},
    	
    	undock: function() {
    		var h = this.getEl().getHeight();
    		var w = this.getEl().getWidth();
    		var o = this.ownerCt;
    		o.remove(this);
    		var win;
    		win = new Ext.Window({
    			renderTo: Ext.getBody(),
    			title: this.title,
    			constrain: true,
    			items: this,
    			tools: [{
    				id: 'pin',
    				qtip: 'Redock to original parent',
    				handler: function() {
    					win.remove(this);
    					o.add(this);
    					o.setActiveTab(this);
    					o.doLayout();
    					win.destroy();
    					this.makeDockable(); // The tab selector is new.
    				},
    				scope: this
    			}]
    		});
    		win.setHeight(h);
    		win.setWidth(w);
    		o.doLayout();
    		win.show();
    	}
    });

  5. #5
    Ext User DigitalSkyline's Avatar
    Join Date
    Apr 2007
    Location
    Rochester, MI
    Posts
    461
    Vote Rating
    1
    DigitalSkyline is on a distinguished road

      0  

    Default


    sick!

  6. #6
    Sencha Premium Member joseadriano's Avatar
    Join Date
    Aug 2008
    Location
    Douradina, Brazil
    Posts
    15
    Vote Rating
    0
    joseadriano is on a distinguished road

      0  

    Default Great!

    Great!


    Great!
    Perfect!

    I think you may do much more at web, than in desktop applications.

    We must to see web Browser as a VM, a place where , using JS ( as language and accessing DOM ), CSS (styling perfectlly the apps.), all is possible.
    I´ve seen here, at forum, a lot of extensions, witch in a desktop environment it would be hard to implement.
    Thanks Jack!

    Congrats Animal.


    tks.


    Att.

    J.Adriano - PR - Brazil.

  7. #7
    Sencha User michaelc's Avatar
    Join Date
    Dec 2007
    Location
    Bay Area - CA
    Posts
    507
    Vote Rating
    0
    michaelc is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    If you just want top see a bit more info within your page, you can easily "undock" Panels from TabPanels (or any Container if you just write the code to remove the Panel, and add it to something else).

    This bit makes a child Panel of a TabPanel undockable into a Window by double clicking on its selector:
    Just a thought, could you not then do window.open with no border and such and then put this object into that window ?

    Then I think you may have the complete result she is thinking of.

    The URL associated with the new window would need to contain the reference to the required libraries but otherwise . . .

    Now to bring it back in, the window would have reference to the parent . . . hummm

  8. #8
    Sencha User
    Join Date
    Feb 2008
    Location
    Illinois
    Posts
    142
    Vote Rating
    0
    carl23934 is on a distinguished road

      0  

    Default


    Animals solution puts the contents in a new Ext.Window, but I think the OP is looking for an entirely new browser window. That would be interesting. It sounds like it's possible, just requires some ninja skill.

  9. #9

    Default I must be missing something...

    I must be missing something...


    Great idea, however I couldn't get it to work. When double-click the tab's Selector nothing happens. Here's my tabPanel. What am I missing?

    PHP Code:
           var  itTabPanel = new Ext.TabPanel({
                    
    id'itTabPanel',
                    
    activeTab0,
                    
    border     false,
                    
    layoutOnTabChangetrue,
                    
    enableTabScrolltrue,
                    
    defaults   :  { 
                        
    workspace this,
                        
    autoScrolltrue,
                        
    splittrue,
                        
    enableTabScrolltrue,
                        
    border:false
                                
    },
                    
    items:  [
                        {
                            
    title'Tab 1',
                        
    id'panel1',
                        
    html'This is the first panel'
                        
    }                ]
                }); 

  10. #10
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    441
    Vote Rating
    7
    wemerson.januario will become famous soon enough

      0  

    Default


    how about this override for extjs 4? can make it work
    Wemerson Januario
    Twitter:
    @wemersonjanuar
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 9106-6689
    From: Goiânia, Brazil
    Desenvolvedor ExtJS/ ExtJS Developer