Adobe Flex data width issues - apache-flex

Question

I have a .mxml file which has following Panel
<s:Panel width="130%" height="100%" title="Results {noOfRowsText}">
<s:layout>
<s:VerticalLayout paddingTop="5" paddingLeft="5" paddingBottom="5" paddingRight="5"/>
</s:layout>
<mx:DataGrid id="desResults" width="100%" height="100%" dataProvider="{response.sList}"
visible="{response != null && response.sList != null && response.sList.length != 0}"
itemClick="datagrid_itemClickHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="Start Date" dataField="sVaRWindowStartDate"
itemRenderer="com.vanilla.package.class"/>
<mx:DataGridColumn headerText="End Date" dataField="sVaRWindowEndDate"
itemRenderer="com.vanilla.package.class"/>
<mx:DataGridColumn headerText="Value" dataField="Value" textAlign="left"
itemRenderer="com.vanilla.package.classOne"/>
<mx:DataGridColumn headerText="Description" dataField="description" textAlign="right"
itemRenderer="com.vanilla.package.classOne"/>
</mx:columns>
</mx:DataGrid>
</s:Panel>
<s:Panel id="panelLsR" width="60%" height="100%" includeIn="lsr" title="LsR Details">
<s:layout>
<s:VerticalLayout horizontalAlign="left"
verticalAlign="top" paddingTop="5"
paddingLeft="5" paddingRight="5" paddingBottom="5"/>
</s:layout>
<s:HGroup width="100%" verticalAlign="middle" horizontalAlign="left" gap="10">
<mx:Text text="{lsrPanelTitle}"/>
<mx:Spacer width="100%"/>
<s:Button label="Close" click="lsrPanel_closeHandler(event)"/>
</s:HGroup>
<mx:DataGrid id="lsrResults" width="100%" height="100%"dataProvider="{lsrSeriesList}"
visible="{lsrSeriesList != null && lsrSeriesList.length != 0}"
itemClick="datagrid_itemClickHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="Date" dataField="date"/>
<mx:DataGridColumn headerText="Value" dataField="value" textAlign="right" itemRenderer="com.vanilla.package.class"/>
</mx:columns>
</mx:DataGrid>
</s:Panel>
When I click on the end Date column, the screen gets divided into two parts, one for Results (noOfRows) and other for lsrDetails. I want to decrease the width for lsrDetails part and want to increase the width for Results (noOfRows). How can I achieve this? datagrid_itemClickHandler function as follow. I tried to change the width percentages in the panelLsR but no luck. Can somebody please help me achieve this? I am working on flex for the first time.
protected function datagrid_itemClickHandler(event:ListEvent):void
{
getsLsR(request);
}

Answer 1

To resize the panel using percentage width, use 'percentWidth'. For example:
panelsLsr.percentWidth = 80;
Also, fix the other panel width so that it adds up to 100%.