Thanks for your help Manish.  We decided on going after the first
approach and making the data grid disabled when the search window is
visible.

Now, another issue I'm having is that when a preview panel is
displayed, the search window gets cut off, even though it's width is a
percentage.  You'll see what I mean if you run the following app,
select the first row to cause the preview panel to show, then click
"Search Options".  Any idea on why the search box is taking up more
than 100% of the Box width and how to confine it to the width of the
box?

Here's the updated Application:
<?xml version="1.0" encoding="UTF-8"?>
<mx:Application pageTitle="Canvas Test" width="100%" height="100%"
creationComplete="initObj();"
                                xmlns:mx="http://www.macromedia.com/2003/mxml";>
        <mx:Script>
                <![CDATA[
                        var testData:Array;
                        
                        function initObj() {
                                testData = new Array();
                                testData.push({NAME: "testObj", TIER:"testTier",
PARENTNAME:"parentObj", PARENTTIER:"parentTier"});
                                pnlProductDetail.width = 0;
                        }
                
                        function toggleSearch() {
                                filterSearch.visible = !filterSearch.visible;
                        }
                        
                        function restoreMyWidth(event) {
                                event.target.width="100%";
                        }

                        function restoreMyHeight(event) {
                                event.target.height="100%";
                        }
                        
                        function toggleEnabled() {
                                dgProducts.enabled = !dgProducts.enabled;
                        }
        ]]>
        </mx:Script>
        
        <mx:Style>
                filter  {background-color: #f0f0f0;
                                                        margin-left: 8;
                                                        margin-right: 8;
                                                        margin-top: 4;
                                                        margin-bottom: 4;
                                                        border-style: solid;
                                                        border-thickness: 1;
                                                        border-color: #b8bfbe;
                                                        border-sides: bottom;
                                                        vertical-align: bottom;}
        </mx:Style>                     
                                
        <!-- Resize effect for search box -->
        <mx:Effect>
                <mx:Resize name="prvwOpenSize" widthFrom="0" widthTo="575"/>
                <mx:Resize name="prvwCloseSize" widthFrom="575" widthTo="0"/>
                <mx:Resize name="srchOpenSize" heightFrom="0" heightTo="220"/>
                <mx:Resize name="srchCloseSize" heightFrom="220" heightTo="0"/>
        </mx:Effect>

 <mx:HBox width="100%" height="100%">
  <mx:Box width="100%" height="100%">
        <mx:HBox id="filterTitle" styleName="filter" width="100%" height="30"
verticalAlign="middle" horizontalGap="0">
                <mx:Label text="Data List" width="100%"/>
    <mx:Link id="lnkSearchOptions" label="Search Options"
click="toggleSearch();"/>
        </mx:HBox>
        <mx:Canvas width="100%" height="100%">
                <mx:Label id="lblSearchHeader" width="100%" textAlign="center"/>
                <mx:DataGrid id="dgProducts" dataProvider="{testData}" 
width="100%"
change="pnlProductDetail.visible=true;" height="100%"
y="{lblSearchHeader.y + lblSearchHeader.layoutHeight}">
                  <mx:columns>
                                <mx:Array>
                                  <mx:DataGridColumn columnName="NAME" 
headerText="Col 1"/>
                                  <mx:DataGridColumn columnName="TIER" 
headerText="Col 2"/>  
                                  <mx:DataGridColumn columnName="PARENTNAME" 
headerText="Col 3"/>
                                  <mx:DataGridColumn columnName="PARENTTIER" 
headerText="Col 4"/>  
                                </mx:Array>
                  </mx:columns>
                </mx:DataGrid>
                <mx:Box id="filterSearch" styleName="filter" visible="false"
horizontalAlign="right" width="100%" height="0"
y="{lblSearchHeader.y}" showEffect="srchOpenSize"
hideEffect="srchCloseSize" effectEnd="toggleEnabled(event);">
                        <mx:HBox>
                                <mx:Label text="Col 1"/>
                                <mx:TextInput/>
                        </mx:HBox>
                        <mx:HBox>
                                <mx:Label text="Col 2"/>
                                <mx:ComboBox width="150"/>
                        </mx:HBox>
                        <mx:HBox>
                                <mx:Label text="Col 3"/>
                                <mx:TextInput/>
                        </mx:HBox>
                        <mx:HBox>
                                <mx:Label text="Col 4"/>
                                <mx:ComboBox width="150"/>
                        </mx:HBox>
                        <mx:HBox>
                                <mx:Label text="First Sort By"/>
                                <mx:ComboBox id="cmbFirstSortBy" width="150"/>
                                <mx:RadioButtonGroup id="firstSortGroupRadio"/>
                                <mx:RadioButton id="radioFirstSortAsc" 
label="ascending"
selected="true" groupName="firstSortGroupRadio"/>
                                <mx:RadioButton id="radioFirstSortDesc" 
label="descending"
groupName="firstSortGroupRadio"/>
                        </mx:HBox>
                        <mx:HBox>
                                <mx:Label text="Second Sort By"/>
                                <mx:ComboBox id="cmbSecondSortBy" width="150"/>
                                <mx:RadioButtonGroup id="secondSortGroupRadio"/>
                                <mx:RadioButton id="radioSecondSortAsc" 
label="ascending"
selected="true" groupName="secondSortGroupRadio"/>
                                <mx:RadioButton id="radioSecondSortDesc" 
label="descending"
groupName="secondSortGroupRadio"/>
                        </mx:HBox>
                        <mx:HBox marginTop="6">
                                <mx:Button id="btnHide"  label="Hide" 
click="toggleSearch();"/>
                        </mx:HBox>
                </mx:Box>                                       
        </mx:Canvas>
        </mx:Box>
        <mx:Panel id="pnlProductDetail" title="Product Detail"
visible="false" width="0" height="100%" showEffect="prvwOpenSize"
hideEffect="prvwCloseSize" effectEnd="restoreMyHeight(event)">
                <mx:Label text="testing"/>
        </mx:Panel>
 </mx:HBox>             
</mx:Application>


On 8/29/05, Manish Jethani <[EMAIL PROTECTED]> wrote:
> On 8/29/05, Jaime Bermudez <[EMAIL PROTECTED]> wrote:
> > That's cool.  The reason why I made the grid disabled is that the grid
> > is clickable through the search box, even though the box is above the
> > grid.  In other words, I can select a row in the grid that is covered
> > by the search box.  Is there a way to prevent that from happening?
> 
> You can create a mouse shield to prevent clicks from going through.
> It's essentially a movie clip with the enabled property set to false.
> 
> The simple MXML way to do this:
> 
>  <Canvas>
>   <Canvas backgroundColor="white" alpha="0" enabled="false"
> width="..." height="..." />
>   <Box width="..." height="...">
>     <!-- put your stuff here -->
>   </Box>
>  </Canvas>
> 
> Basically you wrap it into a Canvas with anothe disabled Canvas behind
> it.  The Container does this for popup windows: see Container.as in
> flexforflash.zip (search for "mouseShield").
> 
> Manish
> 
> 
> 
> --
> Flexcoders Mailing List
> FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
> Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
> Yahoo! Groups Links
> 
> 
> 
> 
> 
> 
>


------------------------ Yahoo! Groups Sponsor --------------------~--> 
Fair play? Video games influencing politics. Click and talk back!
http://us.click.yahoo.com/T8sf5C/tzNLAA/TtwFAA/nhFolB/TM
--------------------------------------------------------------------~-> 

--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com 
Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/flexcoders/

<*> To unsubscribe from this group, send an email to:
    [EMAIL PROTECTED]

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/
 


Reply via email to