1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    33
    Vote Rating
    0
    santosr666 is on a distinguished road

      0  

    Default How To Render a Ext.FormPanel inside a Ext.Window when All belongs to Ext.ViewPort

    How To Render a Ext.FormPanel inside a Ext.Window when All belongs to Ext.ViewPort


    Hi Everyone,

    I have a extended Ext.Panel, with layout='card'. Inside this panel I have two inner Ext.FormPanels: one to diplay data (vPanel) and one for edit data (ePanel). It works just fine, vPanel has a "Edit" button which shows ePanel when clicked and hide vPanel. Everything is inside a Ext.ViewPort element and works.

    My question is: I would like to disable the whole background when ePanel is active, so pretty much a popup window with a dimmed background, but I don't want window's elements on it, like close button, floating/movable whatever ... just a panel with dimmed/disable background.

    Once I'm quite new to javascript and ExtJS I need advice here.

    I have already seen that a window with modal=true might work. But will it accomplish all my requirements? when adding it as an item inside the Ext.ViewPort how should I trigger the show method? (some code sketch might be helpfull as well).

    Thanks in advance and kind regards.

    Reginaldo.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    to make sure I understand your request ... you have a viewport that has an edit button that loads a window that contains a form.. and you want to mask the background behind the window.

    Does modal not work as needed?

    Scott.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    33
    Vote Rating
    0
    santosr666 is on a distinguished road

      0  

    Default


    No, this is not the case. I have a framework based on ExtJS which makes the browser looks like a web IDE. So the final user can add and change GUI elements and the result is stored in a xml file. When loading the screen the system builds the html page. So besides some basic html standarts it also includes the JS scripts and so on.

    All my GUI elements are some extended ExtJS element and the system builds everything as items inside a:

    new Viewport({...}).

    So, one of my items inside this main Viewport is an Ext.Extend(Ext.Panel ...). This panel has layout='card', so I can switch between two inner Ext.FormPanels (viewPanel and editPanel). All logic is already working, but I need a kinda of disabled/dimmed background when button edit is hit in the viewPanel (setActiveItem changes from 0 to 1).

    In the end, I don't need and don't want any window functionality, but modal's.

    Any ideas?

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Perhaps you are looking for something like the spotlight feature?
    http://dev.sencha.com/deploy/ext-4.1...spotlight.html

    Scott.

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    33
    Vote Rating
    0
    santosr666 is on a distinguished road

      0  

    Default


    Great! That is that!

    Do you have any hints how could I apply this feature to ExtJS 3.4 implementation?

    And thank you for your support! It already helped me a lot!

    Cheers,

    Reginaldo.

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    It is available for 3.4:
    http://dev.sencha.com/deploy/ext-3.4...spotlight.html

    I gave you the wrong link.

    Scott.

  7. #7
    Sencha User
    Join Date
    Jul 2012
    Posts
    33
    Vote Rating
    0
    santosr666 is on a distinguished road

      0  

    Default


    Hum ... cool!

    It is really a nice feature and it is almost working now

    I still have problem: when the target panel (spotlight panel) is not fully displayed in the window, the spotlight borders are set with the size of the visible part of the panel. Thus, when rolling down the screen the panel is not fully taken by the spotlight.

    Any clue how can I handle this situation?

    Thanks again!

  8. #8
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,927
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Can you send a screen?

  9. #9
    Sencha User
    Join Date
    Jul 2012
    Posts
    33
    Vote Rating
    0
    santosr666 is on a distinguished road

      0  

    Default


    Well ... I just enforce it on the example and it is woking fine.

    It might be something wrong in my implementation.

    :-(

  10. #10
    Sencha User
    Join Date
    Jul 2012
    Posts
    33
    Vote Rating
    0
    santosr666 is on a distinguished road

      0  

    Default


    I still have no clue what is going wrong.

    My basic code is just like the sample:

    ==================
    var spot = new Ext.ux.Spotlight({easing:'easeOut', duration: .3});

    var updateSpot = function(id){
    if(typeof id == 'string'){
    spot.show(id);
    }else if (!id && spot.active){
    spot.hide();
    }
    };
    ===================

    And inside my Panel, when setting the active item (editor FormPanel) I just directly call the function:

    ===================
    updateSpot(this.id);
    ===================

    The only thing different is that I'm not using delegation. Could that be the problem?
    Attached Images

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