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

      0  

    Default bottom toolbar fit to parent after window resize.

    bottom toolbar fit to parent after window resize.


    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 - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,343
    Vote Rating
    198
    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


    I put your panel code in a west region in the code below and it seemed to work ok for me in 4.2.1.

    Code:
    Ext.create('Ext.panel.Panel', {
        width: 500,
        height: 300,
        title: 'Border Layout',
        layout: 'border',
        items: [{
            title: 'South Region is resizable',
            region: 'south',     // position for region
            xtype: 'panel',
            height: 100,
            split: true,         // enable resizing
            margins: '0 5 5 5'
        },{
            title: 'West',
            border: false,
            region: 'west',
            split: true,
            width: 250,
            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);
                        }
                    }
            
                ]
            }
        },{
            title: 'Center Region',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'panel',
            layout: 'fit',
            margins: '5 5 0 0'
        }],
        renderTo: Ext.getBody()
    });
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  3. #3
    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.

    HTML Code:
    <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><!-- end tab page display --><!-- end tab_controller.jsp -->
    <DIV id="imbuttonpanel_0">
    </DIV><INPUT name="main_SUBMIT" value="1" type="hidden"></FORM>
    </DIV></DIV></DIV></DIV>

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,343
    Vote Rating
    198
    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


    I would recommend rethinking how you're laying out your components / HTML. I wouldn't recommend loading contentEl HTML into the center and then rendering components into elements inside of that HTML. Before long you'll be at odds with the layout managers of the containing components I'm afraid.

    It looks like you're wanting the page to be a form with a couple of buttons at the bottom.

    Why not something like:
    Code:
    var viewport = new Ext.Viewport({
        layout: 'anchor',
        items: [{
            xtype: 'form',
            items: [{
                xtype: 'button',
                text: 'Request'
            }, {
                xtype: 'component'
            }, {
                xtype: 'button',
                text: 'My Profile'
            }, {
                xtype: 'component',
                html: '<span style="font-size:1.5em;">Request</span>'
            }, {
                xtype: 'component',
                html: 'Please describe the change you want to make to this user. This description will be passed to an IT expert for approval and implementation.'
            }, {
                xtype: 'textarea',
                fieldLabel: 'Request',
                labelAlign: 'top',
                width: 800,
                height: 350
            }],
            buttonAlign: 'right',
            buttons: [{
                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);
                }
            }]
        }]
    });
    I'm over-simplifying a little there just to show a possible layout so that you're putting pieces where you want to see them just like with the static HTML, but this sort of setup will cooperate with layouts as well as do form submissions, etc that an HTML form would need to do.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com