[CLOSED] RowExpander Component with ChecboxSelectionModel

[amitpareek]

Hi,
In the code bellow, after adding the checboxselectionmodel, The component in the row expander starts from the checkboxcolumn and if I remove it will start from the ProfileID column of the grid.

<ext:GridPanel StoreID="Store1" ID="grid" Width="220" Height="200" runat="server">
       <ColumnModel>
       <Columns>
       <ext:Column DataIndex="ProfileID" Header="ProfileID"></ext:Column>
       <ext:Column DataIndex="FullName" Header="FullName"></ext:Column>
       </Columns>
       </ColumnModel>
       <SelectionModel>
       <ext:CheckboxSelectionModel  runat="server" ID="chk" CheckOnly="true">
       <Listeners>
       <RowSelect handler="alert(rowIndex);" />
       
       </Listeners>
       </ext:CheckboxSelectionModel>
       </SelectionModel>
       <BottomBar>
       <ext:PagingToolbar runat="server" StoreID="Store1" PageSize="10" PageIndex="1"></ext:PagingToolbar>
       </BottomBar>
       <Plugins>
       <ext:RowExpander runat="server" ColumnPosition="0" ID="RowExpander1">
       <Component>
       <ext:FormPanel runat="server" ForceLayout="true" Height="50" ></ext:FormPanel>
       </Component>
       </ext:RowExpander>
       </Plugins>
       <View>
       <ext:GridView ForceFit="true"></ext:GridView>
       </View>
    </ext:GridPanel>

Also, is there a way to know when the CheckBox in header is checked. I see no listener for it. Do you know how to detect when select all is clicked?

[Vladimir]

Hi,

after
adding the checboxselectionmodel, The component in the row expander
starts from the checkboxcolumn and if I remove it will start from the
ProfileID column of the grid.

Fixed. Please update from SVN

Also,
is there a way to know when the CheckBox in header is checked. I see no
listener for it. Do you know how to detect when select all is clicked?

That checkbox call selectAll/clearSelections only. If you want to call own logic after click then
1. Add the following event to the grid

<Render Handler="Ext.fly(this.view.innerHd).on('mousedown', checkAllHandler, this.getSelectionModel());" />

2. Define the following js method

var checkAllHandler = function(e, t) {
    if (t.className == 'x-grid3-hd-checker') {
        var hd = Ext.fly(t.parentNode);
        var isChecked = hd.hasClass('x-grid3-hd-checker-on');
        if (isChecked) {
            alert('Select All');
        } else {
            alert('Clear All');
        }
    }
};

[amitpareek]

Cool thanks,

This is a good way example. However, this can be extensively used by people, so dont you think there we can add a listener to the checkbox something like "CheckallSelect" and "CheckallDeselect" ?

[amitpareek]

Hi Vlad,After update, I get the error "Uncaught TypeError: Cannot call method 'getRowExpander' of undefined". Checked in FF and Chrome.


On page load the grid is empty. I make a search to load data.


On another place where I use RowExpander, I am getting an error "RowExpander1 is undefined". Its placed inside a card layout, inside a window which is Hidden on load.


The following is the code:

<ext:GridPanel Flex="1" ID="GridPanel2" runat="server" AutoExpandColumn="FirstName" StoreID="Store2"
                                Border="false" AutoWidth="true" AutoScroll="true" SelectionMemory="Enabled">
                               
                                <ColumnModel ID="ColumnModel2" runat="server">
                                    <Columns>
                                        
                                        <ext:ImageCommandColumn Width="30px">
                                            <Commands>
                                                <ext:ImageCommand CommandName="Edit" Icon="TableEdit">
                                                </ext:ImageCommand>
                                            </Commands>
                                            
                                        </ext:ImageCommandColumn>
                                        <ext:Column ColumnID="clientID" DataIndex="ProfileNumber" Header="Profile No." />
                                        <ext:Column ColumnID="LastName" DataIndex="LastName" Header="Last Name" Width="150" />
                                        <ext:Column ColumnID="FirstName" DataIndex="FirstName" Header="First Name" />
                                        <ext:Column ColumnID="LastDate" DataIndex="LastDate" Header="Last Date">
                                            <Renderer Fn="Ext.util.Format.dateRenderer('m-d-Y')" />
                                        </ext:Column>
                                    </Columns>
                                </ColumnModel>
                                <LoadMask ShowMask="true" />
                                <Plugins>
                                    <ext:GridFilters runat="server" ID="GridFilters1">
                                        <Filters>
                                            <ext:StringFilter DataIndex="ProfileNumber" />
                                            <ext:StringFilter DataIndex="LastName" />
                                            <ext:StringFilter DataIndex="FirstName" />
                                            <ext:DateFilter DataIndex="LastDate">
                                                <DatePickerOptions runat="server" TodayText="Now">
                                                </DatePickerOptions>
                                            </ext:DateFilter>
                                        </Filters>
                                    </ext:GridFilters>
                                    <ext:RowExpander runat="server"  ID="profileRowExpander">
                                        <Component>
                                        <ext:TabPanel runat="server">
                                        <Items>
                                        <ext:Panel ID="Tab10" Header="false"  runat="server" Title="Contact Info" Height="210"
                                                        LabelWidth="80"  AutoScroll="true" Padding="5" Border="true" >
                                                        
                                            <BottomBar>
                                            <ext:Toolbar runat="server">
                                            <Items>
                                            <ext:ToolbarFill />
                                            <ext:Button ID="Button2_TabPanel10" runat="server" Icon="PageSave" Text="Save">
                                                        <DirectEvents>
                                                            <Click OnEvent="save_client" Method="POST" Type="Load" Success="#{profileRowExpander}.collapseRow(#{GridPanel2}.store.indexOf(#{Tab10}.record));">
                                                                <EventMask ShowMask="true" Msg="Saving..." Target="CustomTarget" CustomTarget="#{winProfileEdit}" />
                                                                <ExtraParams>
                                                                    <ext:Parameter Name="hh_ProfileID" Value="#{h_ProfileID}.getValue()" Mode="Raw" />
                                                                    <ext:Parameter Name="FirstName" Value="#{FirstName}.getValue()" Mode="Raw" />
                                                                    <ext:Parameter Name="LastName" Value="#{LastName}.getValue()" Mode="Raw" />
                                                                    <ext:Parameter Name="Salutation" Value="#{Salutation}.getValue()" Mode="Raw" />
                                                                    <ext:Parameter Name="Email" Value="#{Email}.getValue()" Mode="Raw" />
                                                                    <ext:Parameter Name="HomePhone" Value="#{HomePhone}.getValue()" Mode="Raw" />
                                                                    <ext:Parameter Name="Address" Value="#{Address}.getValue()" Mode="Raw" />
                                                                    <ext:Parameter Name="PostCode" Value="#{PostCode}.getValue()" Mode="Raw" />
                                                                    <ext:Parameter Name="City" Value="#{City}.getValue()" Mode="Raw" />
                                                                    <ext:Parameter Name="cbxCountry" Value="#{cbxCountry}.getValue()" Mode="Raw" />
                                                                    <ext:Parameter Name="Province" Value="#{Province}.getValue()" Mode="Raw" />
                                                                    <ext:Parameter Name="AccountType" Value="#{cmbAccountType}.getValue()" Mode="Raw" />
                                                                    <ext:Parameter Name="cmbTitle" Value="#{cmbTitle}.getValue()" Mode="Raw" />
                                                                </ExtraParams>
                                                            </Click>
                                                        </DirectEvents>
                                                    </ext:Button>
                                            </Items>
                                            </ext:Toolbar>
                                            </BottomBar>
                                                        <Items>
                                                            <ext:TableLayout ID="TableLayout2"  ColumnWidth="1" runat="server" Columns="3" AnchorHorizontal="95%">
                                                                
                                                                <Cells>
                                                                <ext:Cell ColSpan="3">
                                                                        <ext:MultiField ID="MultiField1" runat="server">
                                                                            <Fields>
                                                                                <ext:Hidden LazyMode="Instance" ID="h_ProfileID" runat="server" />
                                                                                <ext:Hidden LazyMode="Instance" ID="h_ProfileNumber" runat="server" />
                                                                                <ext:Hidden LazyMode="Instance" ID="type_email" runat="server" />
                                                                                <ext:Hidden LazyMode="Instance" ID="type_phone" runat="server" />
                                                                                <ext:Hidden LazyMode="Instance" ID="address_id" runat="server" />
                                                                            </Fields>
                                                                        </ext:MultiField>
                                                                    </ext:Cell>
                                                                    <ext:Cell>
                                                                    <ext:ComboBox runat="server" ID="cmbAccountType" FieldLabel="Client Type" Width="225">
                                                                    <Items>
                                                                    <ext:ListItem Text="Leisure" Value="0" />
                                                                    <ext:ListItem Text="Corporate" Value="1" />
                                                                    <ext:ListItem Text="Group" Value="3" />
                                                                    <ext:ListItem Text="Prospect" Value="4" />
                                                                    </Items>
                                                                    <DirectEvents>
                                                                    <Select OnEvent="cmbAccountType_Select" Type="Load">
                                                                    <EventMask ShowMask="True" Target="CustomTarget" CustomTarget="#{Tab10}" Msg="Changing Form..." />
                                                                    <ExtraParams>
                                                                    <ext:Parameter Name="AccountType" Value="#{cmbAccountType}.getValue()" Mode="Raw"></ext:Parameter>
                                                                    </ExtraParams>
                                                                    
                                                                    </Select>
                                                                    </DirectEvents>
                                                                    </ext:ComboBox>
                                                                    </ext:Cell>
                                                                    <ext:Cell CellCls="cell-m" RowSpan="2" >
                                                                    <ext:Container runat="server" Width="225" ID="conAddress" Height="50" RowHeight="1" Layout="table"><Items>
                                                                    <ext:Button Icon="NoteEdit" runat="server"  StyleSpec="padding-bottom:20px;" LabelWidth="50" FieldLabel="Address" ID="addressTrigger">
                                                                    
                                                                    <DirectEvents>
                                                                    <Click OnEvent="show_addresses" Method="POST" Type="Load">
                                                                     <ExtraParams>
                                                                                        <ext:Parameter Name="hh_ProfileID" Value="#{h_ProfileID}.getValue()" Mode="Raw" />
                                                                     </ExtraParams>
                                                                    </Click>
                                                                    </DirectEvents>
                                                                    </ext:Button>
                                                                    <ext:TextArea ID="Address"  runat="server" Width="140px" Height="48" StyleSpec="margin-left:5px" >
                                                                    
                                                                    </ext:TextArea>
                                                                    
                                                                    </Items></ext:Container>
                                                                        <%--<ext:TriggerField ID="Address" runat="server" Width="225" Height="44px" FieldLabel="Address">
                                                                            <DirectEvents>
                                                                                <TriggerClick OnEvent="show_addresses" Method="POST" Type="Load">
                                                                                    <ExtraParams>
                                                                                        <ext:Parameter Name="hh_ProfileID" Value="#{h_ProfileID}.getValue()" Mode="Raw" />
                                                                                    </ExtraParams>
                                                                                </TriggerClick>
                                                                            </DirectEvents>
                                                                        </ext:TriggerField>--%>
                                                                    </ext:Cell>
                                                                    <ext:Cell CellCls="cell-m">
                                                                        <ext:TriggerField ID="HomePhone" runat="server" Width="225" FieldLabel="Phone">
                                                                            <DirectEvents>
                                                                                <TriggerClick OnEvent="show_phones" Method="POST" Type="Load">
                                                                                    <ExtraParams>
                                                                                        <ext:Parameter Name="hh_ProfileID" Value="#{h_ProfileID}.getValue()" Mode="Raw" />
                                                                                    </ExtraParams>
                                                                                </TriggerClick>
                                                                            </DirectEvents>
                                                                        </ext:TriggerField>
                                                                    </ext:Cell>
                                                                    <ext:Cell CellCls="cell-m">
                                                                        <ext:TextField ID="Agent" runat="server" FieldLabel="Agent" Width="225" HideLabel="True" />
                                                                    </ext:Cell>
                                                                    
                                                                    <ext:Cell CellCls="cell-m">
                                                                        <ext:TriggerField ID="Email" runat="server" Width="225" FieldLabel="Email">
                                                                            <DirectEvents>
                                                                                <TriggerClick OnEvent="show_phones" Method="POST" Type="Load">
                                                                                    <ExtraParams>
                                                                                        <ext:Parameter Name="hh_ProfileID" Value="#{h_ProfileID}.getValue()" Mode="Raw" />
                                                                                    </ExtraParams>
                                                                                </TriggerClick>
                                                                            </DirectEvents>
                                                                        </ext:TriggerField>
                                                                    </ext:Cell>
                                                                    
                                                                    <ext:Cell CellCls="cell-m">
                                                                        <ext:TextField ID="FirstName" FieldLabel="First Name" runat="server" Width="225" />
                                                                    </ext:Cell>
                                                                    <ext:Cell CellCls="cell-m" ColSpan="2">
                                                                        <ext:TextField ID="City" FieldLabel="City" runat="server" Width="225" />
                                                                    </ext:Cell>
                                                                    <ext:Cell CellCls="cell-m">
                                                                        <ext:TextField ID="LastName" FieldLabel="Last Name" runat="server" Width="225" />
                                                                    </ext:Cell>
                                                                    <ext:Cell CellCls="cell-m" ColSpan="2">
                                                                        <ext:TextField ID="Province" runat="server" FieldLabel="Province" Width="225" />
                                                                    </ext:Cell>
                                                                    <ext:Cell>
                                                                    <ext:Container runat="server" Width="225">
                                                                    <Items>
                                                                    <ext:TextField ID="Salutation" FieldLabel="Contact" runat="server" Width="225" />
                                                                    <ext:ComboBox runat="server" ID="cmbTitle" FieldLabel="Title" Width="225">
                                                                    <items>
                                                                    <ext:ListItem Text="Mr." Value="Mr." />
                                                                    <ext:ListItem Text="Mrs." Value="Mrs." />
                                                                    <ext:ListItem Text="Ms." Value="Ms." />
                                                                    <ext:ListItem Text="Dr." Value="Dr." />
                                                                    <ext:ListItem Text="Mr. and Mrs." Value="Mr. and Mrs." />
                                                                    </items>
                                                                    </ext:ComboBox>
                                                                    
                                                                    </Items>
                                                                    </ext:Container>
                                                                    
                                                                    </ext:Cell>
                                                                    
                                                                    <ext:Cell CellCls="cell-m" ColSpan="2">
                                                                        
                                                                        <ext:TextField ID="PostCode" FieldLabel="Post Code" runat="server" Width="225" />
                                                                    </ext:Cell>
                                                                    <ext:Cell CellCls="cell-m">
                                                                        <ext:DateField ID="BirthDate" runat="server" Width="225" FieldLabel="Birth Date"
                                                                            Format="yyyy-M-d" ReadOnly="false" />
                                                                    </ext:Cell>
                                                                    
                                                                    <ext:Cell CellCls="cell-m" ColSpan="2">
                                                                        <ext:ComboBox ID="cbxCountry" runat="server" FieldLabel="Country" Width="225" BlankText="Select">
                                                                            <Items>
                                                                            </Items>
                                                                        </ext:ComboBox>
                                                                    </ext:Cell>
                                                                    
                                                                </Cells>
                                                            </ext:TableLayout>
                                                        </Items>
                                                    </ext:Panel>
                                                    <ext:Panel Title="Other Info" Html="Other info goes here." runat="server" Height="240"></ext:Panel>
                                        </Items>
                                        </ext:TabPanel>
                                        
                                        </Component>
                                        <Listeners>
                                            <Expand Handler="#{Tab10}.record = record;" />
                                        </Listeners>


                                        <DirectEvents>
                                            <BeforeExpand OnEvent="RowSelect_pass" Type="Load" Method="POST">
                                                <EventMask ShowMask="True" Target="CustomTarget" CustomTarget="#{Tab10}" Msg="Loading Profile Details..." />
                                                <ExtraParams>
                                                    <ext:Parameter Name="ProfileID" Value="record.data['ProfileID']" Mode="Raw" />
                                                </ExtraParams>
                                            </BeforeExpand>
                                        </DirectEvents>
                                    </ext:RowExpander>
                                </Plugins>
                                <SelectionModel>
                                                     <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" CheckOnly="true"  runat="server">
                                                        <Listeners>
                                                            <RowDeselect Fn="row_deselect"></RowDeselect>
                                                            <RowSelect Fn="row_select" />
                                                            
                                                             </Listeners>
                                                    </ext:CheckboxSelectionModel>
                                                    
                                                    
                               </SelectionModel>
                                <View>
                                    <ext:GridView ID="GridView1" runat="server" ForceFit="true">
                                    </ext:GridView>
                                </View>
                                <Listeners>
                                    <CellClick Fn="cellClick" />
                                    <%-- <Render Handler="Ext.fly(this.view.innerHd).on('mousedown', onHdMouseDown, this);"
                                                        Delay="10" />--%>
                            
                                </Listeners>
                                <DirectEvents>
                                    <Command OnEvent="edit_notes" Buffer="250" Type="Load" Method="POST">
                                        <ExtraParams>
                                            <ext:Parameter Name="ProfileID" Value="record.data.ProfileID" Mode="Raw" />
                                        </ExtraParams>
                                    </Command>
                                    <CellClick OnEvent="RowSelect_pass" Buffer="250" Type="Load" Method="POST">
                                        
                                        <ExtraParams>
                                            <ext:Parameter Name="ProfileID" Value="params[0].getStore().getAt(params[1]).get('ProfileID')"
                                                Mode="Raw" />
                                        </ExtraParams>
                                    </CellClick>
                                </DirectEvents>
                                <BottomBar>
                                    <ext:PagingToolbar ID="PagingToolBar1" PageIndex="15" runat="server" PageSize="15"
                                        StoreID="Store2" DisplayInfo="true" />
                                </BottomBar>
                            </ext:GridPanel>

[Vladimir]

Hi,

Please create test sample which reproduces the problem. I cannot reproduce the problem

About ""CheckallSelect" and "CheckallDeselect""
We will add those events

[amitpareek]

Thanks to consider adding those events. Will it be added soon? I was working on a feature for it, and will require it. If it takes long I will use the sample u gave me in previous mail.

As for the error, I am not able to reproduce it unfortunately. However, I checked in IE and FF, and it gets stuck in the extnet-data-debug.js, line 3664, with the error this.grid is undefined. Hope with this you can help.

    renderer: function(v, p, record) {
        if (this.grid.getRowExpander()) {
            p.cellAttr = 'rowspan="2"';
        }
        return '<div class="x-grid3-row-checker">&amp;#160;
';
    }

[Vladimir]

Hi,

I will add those events soon (today)


I understood where is the error occurs. But I cannot reproduce the problem (it seems that for you this.grid is undefined)

[amitpareek]

Can you suggest me something that I should try?

[Vladimir]

Hi,

Just narrow the code which has the issue. Just if you have application which throws an exception then you can always to remove code step by step to detect the problem code


1. Run appication which throws that error
2. Try to remove code until the error is gone
3. Try to create test sample page which based on your application after unnessary code removing

[Vladimir]

Hi,

Please update from SVN and retest. Now the error should is gone