1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Russia
    Posts
    34
    Vote Rating
    1
    icemanovich is on a distinguished road

      0  

    Default Unanswered: MDI windows layout

    Unanswered: 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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,604
    Answers
    3449
    Vote Rating
    818
    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


    So you don't want the inner window to be draggable?
    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. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,795
    Answers
    358
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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
    34
    Vote Rating
    1
    icemanovich is on a distinguished road

      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
    34
    Vote Rating
    1
    icemanovich is on a distinguished road

      0  

    Default


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


Thread Participants: 2

Tags for this Thread