Adobe Flex data width issues

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 &amp;&amp; response.sList != null &amp;&amp; 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 &amp;&amp; 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%.