Results 1 to 4 of 4

Thread: bottom toolbar fit to parent after window resize.

  1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    6
    Vote Rating
    0
      0  

    Default 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 Attached Images

  2. #2
    Sencha - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Vote Rating
    257
      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 human resources manager: fabienne.bell@sencha.com

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    6
    Vote Rating
    0
      0  

    Default 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 - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Vote Rating
    257
      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 human resources manager: fabienne.bell@sencha.com

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •