Results 1 to 5 of 5

Thread: MDI windows layout

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Russia
    Posts
    39
    Vote Rating
    1
      0  

    Default MDI windows layout

    Hi!
    I'm build an MDI window application that contains multiple windows (Ext.window.Window) inside parend window component. I use Ext 4.0.7.
    My question is, how to make windows (children inside) to stick to each other like a corner of parent window?

    Can anyone help with this issue?

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,857
    Answers
    3968
    Vote Rating
    1323
      0  

    Default

    So you don't want the inner window to be draggable?
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505
    Vote Rating
    253
      0  

    Default

    Something like this?

    Code:
    Ext.define('MyWindow', {
        extend: 'Ext.window.Window'
        
        , initComponent: function () {
            var me = this;
            
            me.callParent(arguments);
            
            me.on({
                afterrender: function () {
                    var c = Ext.widget('window', {
                        title: 'child'
                        , draggable: false
                        , resizable: false
                        , height: 100
                        , width: 100
                    });
                    me.add(c);
                    c.showAt(0, 0);
                }
            });
        }
    });
    
    
    Ext.create('MyWindow', {
        autoShow: true
        , title: 'Parent'
        , width: 200
        , height: 200
    });

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Location
    Russia
    Posts
    39
    Vote Rating
    1
      0  

    Default

    Let me clarify requirements. All child windows are draggable. I need to limit this grag. When windows grad very close to each oher they should not overlay. They should stick to each other at one side.

    Here is my code.
    Parent window:
    Code:
    Ext.define('NetworkAnalytics.view.mainField',{
    
        extend: 'Ext.panel.Panel',
        alias: 'widget.mainField',
        id: 'app-mainField',
    
        requires:['NetworkAnalytics.model.HorizontalLine',
            'NetworkAnalytics.view.chartPreviewWindow',
            'NetworkAnalytics.view.dialogs.dialog',      
        ],
        layout: 'fit',
        maximizable: true,
        maximized: true,
        bodyStyle: {position: 'relative'},
    
        currentItems: [],
        ...
    });
    Child window:
    Code:
    Ext.define('NetworkAnalytics.view.chartPreviewWindow',{
    
        extend: 'Ext.window.Window',
        alias: 'widget.chartPreviewWindow',
    
        cls: 'my-chartWindow',
        iconCls: 'icon-chart-window',
    
        height: 200,
        width: 250,
        layout: 'fit',
        constrain: true,
        floating: true,
    
        minimizable: true,
    });
    Init child window (add to parent):
    Code:
    var cmp = Ext.getCmp('app-mainField'),
          child = Ext.create('NetworkAnalytics.view.chartPreviewWindow', {
                title: title,
                id: 'chart-window-' + number,
                renderTo: cmp.body,
                internalNumber: number
    });
    cmp.add(child);

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Location
    Russia
    Posts
    39
    Vote Rating
    1
      0  

    Default

    May be this video will help to understand what i'm want to do...


Tags for this Thread

Posting Permissions

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