PDA

View Full Version : resize window doesn't resize button panlel



kanil01
20 Jun 2013, 6:47 AM
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);}
}

]
}
});
} );

friend
20 Jun 2013, 11:19 AM
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.

kanil01
20 Jun 2013, 1:11 PM
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/5603924/extjs-panel-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:

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

friend
21 Jun 2013, 3:58 AM
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() (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-method-add) method. Otherwise, configure the desired child components in the items collection of a parent container.

kanil01
24 Jun 2013, 10:49 AM
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 (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]

friend
24 Jun 2013, 11:50 AM
Read the docs for Panel.contentEl (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-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 (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-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.