1. #1
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    4
    Answers
    1
    Vote Rating
    0
    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
    4,913
    Answers
    371
    Vote Rating
    179
    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 slemmon is a splendid one to behold

      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
    Answers
    1
    Vote Rating
    0
    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
    Answers
    1
    Vote Rating
    0
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi