1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    6
    Vote Rating
    0
    kanil01 is on a distinguished road

      0  

    Default Unanswered: resize window doesn't resize button panlel

    Unanswered: resize window doesn't resize button panlel


    I have button panel with two buttons aligned to right. On resize window or on collapse the west panel the buttons stays where they are and not reLayout to the window size. The screenshots are attached before resize and after.

    Code:
    Ext.onReady(function(){
     var buttonPanel = new Ext.Panel({
     renderTo: 'imbuttonpanel_0',
     border: false,
     buttonAlign: 'right',
     unstyled: true,
     fbar: {
     xtype: 'toolbar',
     hideBorders: true,
     items: [
     {
     id: 'action.submit',
     text: 'Submit',
     handler: function(){return imSubmitAction('action.submit', '0', true);}
     }
     ,
     {
     id: 'action.cancel',
     text: 'Cancel',
     cls: 'ca-gray',
     handler: function(){imSubmitAction('action.cancel', '1', false);}
     }
    
     ]
     }
     });
     } );
    Attached Images

  2. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    Since you're rendering this panel to a <div>, it's up to you to manage the panel's size. If possible, I'd recommend using a Viewport to manage the overall layout, where all of your child components/panels would then inherit the benefits of auto-magic resize event handling.

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    6
    Vote Rating
    0
    kanil01 is on a distinguished road

      0  

    Default resize window doesn't resize button panlel

    resize window doesn't resize button panlel


    Thank you for the reply and help.
    I am not sure what you mean to do the layout though the viewport. I have viewport defined with layout "border" where I have three panels added with region: south, west, center.
    The code you see it's dynamically created and adds to the central panel. How can I manage layout through the viewport in such case?
    Also I found this topic:
    http://stackoverflow.com/questions/5...nel-fit-layout
    I modified my code by adding layout: 'fit' for the button panel; fbar has autoHeight and autoWidth 'false' and width styles added to my div:
    <DIV id="imbuttonpanel_0" style="width: 100%">
    What esle can be done here to fix my problem?
    this is the changed code:
    Code:
    Ext.onReady(function(){
     var buttonPanel = new Ext.Panel({
      renderTo: 'imbuttonpanel_0',
      border: false,
      buttonAlign: 'right',
      layout: 'fit',
      unstyled: true,
      fbar: {
       xtype: 'toolbar',
       autoHeight: false,
       autoWidth: false,
       hideBorders: true,
       items: [
     {
      id: 'action.submit',
      text: 'Submit',
      handler: function(){return imSubmitAction('action.submit', '0', true);}
     }
    ,
     {
      id: 'action.cancel',
      text: 'Cancel',
      cls: 'ca-gray',  handler: function(){imSubmitAction('action.cancel', '1', false);}
     }
       ]
      }
     });
     } );

  4. #4
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    If you're using a Viewport for your page layout, then you shouldn't be using renderTo. renderTo is typically used to insert ExtJs components into an existing HTML page.

    If you're wanting to dynamically add components to an ExtJs container, consider using the add() method. Otherwise, configure the desired child components in the items collection of a parent container.

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    6
    Vote Rating
    0
    kanil01 is on a distinguished road

      0  

    Default ContentEl not shown after buttonpanel added to vieport layout.

    ContentEl not shown after buttonpanel added to vieport layout.


    Thank you very much for reply.
    I've added this component to the center panel and buttons seems are working now on resize, but contrentEL which added to the central panel not displayed at all. Please help.

    Code:
    var viewport = new Ext.Viewport({
      layout: 'border',
      items: [
      {
       region: 'center', 
       id: 'taskarea',
       layout: 'fit',
       contentEl: 'center1',
       autoScroll: true,
       layout: {
        type: 'fit',
        manageOverflow: 1 /*,
        reserveScrollbar: true */
       } 
      }]
     });
    Code:
    Ext.onReady(function(){
     var buttonPanel = new Ext.Panel({
      renderTo: 'imbuttonpanel_0',
      border: false,
      buttonAlign: 'right',
      unstyled: true,
      fbar: {
       xtype: 'toolbar',
       hideBorders: true,
       items: [
     {
      id: 'action.submit',
      text: 'Submit',
      handler: function(){return imSubmitAction('action.submit', '0', true);}
     }
    ,
     {
      id: 'action.cancel',
      text: 'Cancel',
      cls: 'ca-gray',  handler: function(){imSubmitAction('action.cancel', '1', false);}
     }
       ]
      }
     });
    var taskarea = Ext.getCmp("taskarea");
     taskarea.add(buttonPanel);
     } );
    this is the contentEL which added to the textarea panel. The button panel (marked in red) is displayed but the rest not shown at all (no tabs, no content). It looks like I am missing something very important.

    [HTML][<DIV style="margin: 0px; padding: 0px; border: currentColor;" id="center1">
    <DIV style="border: currentColor;" id="content">
    <FORM id="main" onkeypress="return imOnKeyPress(event)" method="post" name="main"
    action="?facesViewId=/app/page/profile/profile.jsp">
    <INPUT name="OWASP_CSRFTOKEN"
    value="BT8V-T730-ASI5-TI5T-5TK7-HBUY-BGEO-UVGF" type="hidden">
    <INPUT id="ScrollPosX"
    name="ScrollPosX" value="" type="hidden">
    <INPUT id="ScrollPosY" name="ScrollPosY"
    value="" type="hidden">
    <INPUT id="ClientTimezone" name="ClientTimezone" value="-4"
    type="hidden">

    <DIV id="im-task-body" class="im-task-body">
    <DIV class="im-tabs-header"></DIV>
    <DIV class="tabs">
    <UL>
    <LI class="tab-open"><SPAN><SPAN><INPUT id="imh_1" class="im-button-link" onmouseover="this.className='im-button-link-hover'" title="Change My Account: Request (open)" onmouseout="this.className='im-button-link'" name="tabchange.0" alt="Change My Account: Request (open)" value="Request" type="submit"></SPAN></SPAN></LI>
    <LI class="tab-closed"><SPAN><SPAN><INPUT id="imh_2" class="im-button-link" onmouseover="this.className='im-button-link-hover'" title="Change My Account: My Profile (closed)" onmouseout="this.className='im-button-link'" name="tabchange.1" alt="Change My Account: My Profile (closed)" value="My Profile" type="submit"></SPAN></SPAN></LI>
    </UL>
    </DIV>
    <DIV class="im-tabs-footer"></DIV>
    <H2 class="nocss">Request</H2>
    <INPUT name="activetab.index" value="0" type="hidden">
    <DIV>Please describe the change you want to make to this user. This description
    will be passed to an IT expert for approval and implementation.
    <TABLE class="im-formRowSet">
    <TBODY>
    <TR class="wsui-table-row-odd">
    <TH style="text-align: left;" align="left"><LABEL for="imstasklabelscreenfieldHistoryRequestname">Request</LABEL></TH></TR>
    <TR class="wsui-table-row-odd">
    <TD>
    <TABLE>
    <TBODY>
    <TR>
    <TD><TEXTAREA id="imstasklabelscreenfieldHistoryRequestname" class="im-bigFormField" cols="80" rows="20" name="imstasklabelscreenfieldHistoryRequestname"></TEXTAREA>
    </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>
    <DIV class="im-copy"></DIV>
    <DIV id="imbuttonpanel_0"> <!-- this is shown in center panle and resize works very well but other components are not displaying any more -->
    </DIV><INPUT name="main_SUBMIT" value="1" type="hidden"></FORM>
    </DIV></DIV></DIV></DIV>/HTML]

  6. #6
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    Read the docs for Panel.contentEl carefully, especially the 'Notes' section.

    The content you're attempting to shove into the center panel looks like it has a lot of external dependencies and isn't going to jibe well with the rest of the ExtJs components in your page. Why not just re-implement the tabs/form as ExtJs components?

    If for some reason that's not an option, then you could try loading the content as an external HTML page by using the center Panel's loader configuration. Regardless, mixing and matching relatively complex HTML and ExtJs components can be problematic, based on the CSS and other Javascript used by your HTML content.

    Were it me, I'd implement a 100% ExtJs solution. It will save a lot of headaches in the long run.

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..."