1. #1
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    Answers
    1
    brijmtiwari is on a distinguished road

      0  

    Default Answered: ExtJs component inside sliding div

    Answered: ExtJs component inside sliding div


    Hi,

    The ExtJs example code contain a way to display a message which slides in from top and hides away after some seconds. It does this by appending a div to the parent container and using the slideIn api on dom element.
    Code:
    var msgCt = Ext.DomHelper.insertFirst(document.getElementById('bodypanel'), {id:'msg-div'}, true);
    var m = Ext.DomHelper.append(msgCt, createBox(title, s), true);
    m.hide();
    m.slideIn('t').ghost("t", { delay: 4000, remove: true});
    I want the same notification behavior but want to add a ExtJS 4 window component to the sliding div instead of just a message string. So, the ExtJS window component will have some components inside it which will provide details of the message to be shown to user and the whole message window component will appear as sliding in from top. The window container will have a close button on top right as well, so that user can close it.

    Please guide me as to how can i achieve this sliding behavior on my ExtJS 4 window component.
    -->

  2. I am able to resolve both the issues now.

    The issue related to tooltip and menu item behaving weird once the ghost api is called is only happening if i have the "remove: true" property inside the ghost API call.
    Code:
    w.el.ghost('t', {
    remove: true,
    delay: 4000
    });
    So, instead of using ghost API i am using slideOut API now. The "remove:true" does not cause any issue in case of slideOut API.

    Other issue of getting rectangular area once the slideIn API is called was because of shadow of the window. So, i set the "shadow" as false for the window.

    Below is the working code:
    Code:
    var w = Ext.create('Ext.window.Window', {
        title: 'Hello',
        shadow: false,
        height: 200,
        width: 400,
        layout: 'fit',
        items: {  // Let's put an empty grid in just to illustrate fit layout
            xtype: 'grid',
            border: false,
            columns: [{header: 'World'}],                 // One header just for show. There's no data,
            store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
        }
        , listeners: {
            show: function (w) {
                  // Apply slide in effect on the dialog
                 w.el.slideIn();
                 w.el.slideOut('t', {
                 delay: 3000, // slide out after 3seconds
                 remove: true
                });
            }
        }
    });
    
    var toXY = Ext.get('parentID').getAnchorXY('t');
    w.setPosition(toXY[0], toXY[1]);

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,034
    Vote Rating
    213
    Answers
    481
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Is this kind of what you're looking for with the window? (*uses 4.2 methods)

    Code:
    var w = Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 400,
        layout: 'fit',
        items: {  // Let's put an empty grid in just to illustrate fit layout
            xtype: 'grid',
            border: false,
            columns: [{header: 'World'}],                 // One header just for show. There's no data,
            store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
        }
        , listeners: {
            show: function (w) {
                var toXY = w.getAlignToXY(vp, 'c-c');
                
                w.animate({
                    to: {
                        x: toXY[0]
                        , y: toXY[1]
                    }
                    , callback: function () {
                        w.el.ghost('t', {
                            remove: true
                            , delay: 4000
                        });
                    }
                });
            }
        }
    });
    
    
    var vp = Ext.widget('viewport', {
        layout: 'fit'
        , items: [{
            xtype: 'panel'
            , dockedItems: [{
                xtype: 'toolbar'
                , items: [{
                    text: 'show'
                    , handler: function () {
                        w.showBy(vp, 'b-t', [0, -10]);
                    }
                }]
            }]
        }]
    });
    -->

  4. #3
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    Answers
    1
    brijmtiwari is on a distinguished road

      0  

    Default


    Hi slemmon,

    Thanks for the example. It is very helpful.

    However, since i am using ExtJS 4.1.3, the w.showBy(vp, 'b-t', [0, -10]) is not available for window component. So, I used
    Code:
    var toXY = Ext.get('bodyPanelId').getAnchorXY('t');
    w.showAt(toXY[0], toXY[1]);
    I am seeing two issues:
    1) Once the w.el.ghost API is executed, the menuitems and tooltip functionality inside the main application seems to be breaking down. I am seeing "dom is undefined" error whenever i hover any element having a tooltip or whenever i click on any button having menuitems. This problem starts appearing only after the ghost API is executed on the window component.

    2) The "w.animate" API is not giving the same feel as w.el.slideIn API is giving. I tried using the slideIn API like following:
    Code:
    listeners: {
            show: function (w) {
                        w.el.slideIn('t');
                        w.el.ghost('t', {
                            remove: true
                            , delay: 4000
                        });
            }
        }
    The issue with this is that, i am seeing a rectangular area where window component slides in after the sliding effect. It looks like window component is sliding and falling over the rectangular area.

    I also tried removing the ghost API and replacing it with slideOut API, but that also seems to display a rectangular area from where window component starts sliding out. Once the sliding effect is over, the rectangular area also clears off.

    Please let me know your thoughts on this.
    -->

  5. #4
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    Answers
    1
    brijmtiwari is on a distinguished road

      0  

    Default


    I am able to resolve both the issues now.

    The issue related to tooltip and menu item behaving weird once the ghost api is called is only happening if i have the "remove: true" property inside the ghost API call.
    Code:
    w.el.ghost('t', {
    remove: true,
    delay: 4000
    });
    So, instead of using ghost API i am using slideOut API now. The "remove:true" does not cause any issue in case of slideOut API.

    Other issue of getting rectangular area once the slideIn API is called was because of shadow of the window. So, i set the "shadow" as false for the window.

    Below is the working code:
    Code:
    var w = Ext.create('Ext.window.Window', {
        title: 'Hello',
        shadow: false,
        height: 200,
        width: 400,
        layout: 'fit',
        items: {  // Let's put an empty grid in just to illustrate fit layout
            xtype: 'grid',
            border: false,
            columns: [{header: 'World'}],                 // One header just for show. There's no data,
            store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
        }
        , listeners: {
            show: function (w) {
                  // Apply slide in effect on the dialog
                 w.el.slideIn();
                 w.el.slideOut('t', {
                 delay: 3000, // slide out after 3seconds
                 remove: true
                });
            }
        }
    });
    
    var toXY = Ext.get('parentID').getAnchorXY('t');
    w.setPosition(toXY[0], toXY[1]);
    -->

Thread Participants: 1

Tags for this Thread