Datagrid - Остановить событие HEADER_RELEASE при установке флажка push headerRenderer.

Question

У меня есть этот код в flex:

<mx:Application ... >
....
<mx:DataGrid id="filtros" styleName="grid" rowCount="10" dataProvider="{_larcFiltros}" allowMultipleSelection="true" >
            <mx:columns>
            <mx:DataGridColumn dataField="titulo" textAlign="left">
              <mx:headerRenderer>
                <mx:Component>              
                  <mx:HBox width="100%" horizontalAlign="left" >                       
                    <mx:CheckBox click="outerDocument._mCheckAll(0)" />
                    <mx:Label text="Título" />
                  </mx:HBox>              
                </mx:Component> 
              </mx:headerRenderer>          
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Descripción" dataField="resumen"/>
...
</mx:Application>

Когда я нажимаю на флажок, я не хочу, чтобы столбец сортировался, но когда я нажимаю за пределами флажка, в заголовке я хочу отсортировать. Как узнать, щелкнул ли я по флажку или за пределами флажка при нажатии на заголовок?

Есть идеи?

Большое спасибо!

Answer 1

Improvement to the earlier answer

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" mouseDown="{handleClick(event)}">
    <mx:Script>
       <![CDATA[
        import mx.core.Button;
        import mx.controls.dataGridClasses.DataGridColumn;

        private var column : DataGridColumn;

        private function handleClick(e:MouseEvent) : void {

            if(e.target is Button){
                e.stopPropagation();
            }            
        }


        override public function set data(value:Object):void {
            column = value as DataGridColumn
            headerBtn.label = (value as DataGridColumn).headerText;
        }

        private function btnClick(event:MouseEvent):void{
                //do something
        }

    ]]>
   </mx:Script>
   <mx:Button id="headerBtn" click="{btnClick(event)}" />
</mx:Canvas>

Answer 2

Я столкнулся с аналогичной проблемой при помещении кнопок внутри заголовка объекта DataGridColumn. Если была нажата кнопка, я хотел запретить сортировку столбца, в противном случае, если щелкнуть где-либо еще внутри заголовка, я бы хотел, чтобы столбец сортировался нормально.

Мое решение было достигнуто путем добавления открытого свойства к обработчику заголовков, которое указывало, была ли мышь на кнопке или на остальной части заголовка:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
mouseDown="{handleMouseClick(event);}"
width="100%" height="100%">
<mx:Script>
    <![CDATA[
        import mx.controls.Button;
        import mx.controls.dataGridClasses.DataGridColumn;

        [Embed(source="assets/images/search-icon-small.png")]
        [Bindable] private var searchIcon:Class;

        [Bindable] private var _headerText:String;
        [Bindable] public var searchClicked:Boolean = false;

        override public function set data(value:Object):void {
            if (value)
                this._headerText = (value as DataGridColumn).headerText;    
        }   

        private function handleMouseClick(e:MouseEvent):void {
            searchClicked = e.target is Button;
        }           
    ]]>
</mx:Script>
<mx:Label id="lbl_header" text="{_headerText}"/>
<mx:Button icon="{searchIcon}" height="20" width="20" right="20" mouseDownOutside="{searchClicked = false}" mouseDown="{searchClicked = true}"/>

В родительском приложении прослушайте событие headerRelease таблицы данных (сокращенный код):

    <mx:DataGrid id="dg_members" headerRelease="{handleSort(event);}"/>

    private function handleSort(e:DataGridEvent):void {
     if ((e.itemRenderer as SearchHeader).searchClicked)
         e.preventDefault();
 }

Возможно, есть более элегантные решения, но они быстрые и грязные.

Answer 3

Это гораздо более чистая версия решения zhaupin, которая не требует каких-либо изменений за пределами headerRender. Когда данные заданы в рендере, сохраните столбец, для которого этот рендерер используется, а затем переключите сортировку столбца на основе цели клика.

в заголовке рендерера:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" mouseDown="{handleClick(event)}">
    <mx:Script>
       <![CDATA[
        import mx.core.Button;
        import mx.controls.dataGridClasses.DataGridColumn;

        private var column : DataGridColumn;

        private function handleClick(e:MouseEvent) : void {

            if(e.target is Button){
                column.sortable = false;
            }
            else{
                column.sortable = true;
            }
        }


        override public function set data(value:Object):void {
            column = value as DataGridColumn
            headerBtn.label = (value as DataGridColumn).headerText;
        }

        private function btnClick(event:MouseEvent):void{
                //do something
        }

    ]]>
   </mx:Script>
   <mx:Button id="headerBtn" click="{btnClick(event)}" />
</mx:Canvas>

Если вы используете это для любого другого компонента, кроме кнопки, просто замените кнопку с компонентом, который вы используете.

Любые прослушиватели щелчков на других объектах в заголовке будут по-прежнему срабатывать (например, здесь btnClick), а также эта функция handleClick, поэтому эти функции будут работать нормально.

Answer 4

Добавьте прослушиватель событий для щелчка и проверьте, имеет ли тип event.target CheckBox:

Заменить это:

<mx:CheckBox click="outerDocument._mCheckAll(0)" />

с

<mx:CheckBox click="onHeaderClick(event)" />

и реализовать метод onHeaderClick

private function onHeaderClick(event:MouseEvent):void
{
    if(event.target is CheckBox) {
        trace("Checkbox was clicked");
    } else {
        trace("Column was clicked");
    }
}