bottom toolbar fit to parent after window resize.

[kanil01]

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.

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);}
 }

 ]
 }
 });
 } );

[slemmon]

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.

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()
});

[kanil01]

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.

 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 */
   } 
  }]
 });

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.

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

[slemmon]

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:

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.