GridPanel cell focus

**Dominik** · Feb 28, 2012, 8:26 AM

Hi again,

At the moment I have this sample working with RowSelectionModel and catching Tab key. But how could I re-setting old cell style?

<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">    
    protected void Page_Load(object sender, EventArgs e) { 
        if (!X.IsAjaxRequest) { 
            Store store = this.GridPanel1.GetStore(); 
            store.DataSource = new object[] { 
                new object[] { "test1", "test2", "test3" }, 
                new object[] { "test4", "test5", "test6" }, 
                new object[] { "test7", "test8", "test9" }, 
            }; 
            store.DataBind(); 
        } 
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:TextField ID="Text" runat="server" FieldLabel="Text" MaxLength="5" Width="300">
        <Listeners>
            <BeforeRender Handler="this.focus();" Delay="10" />
        </Listeners>
    </ext:TextField>
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" TrackMouseOver="true"
        StripeRows="true" >
        <Store>
            <ext:Store ID="Store1" runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test1" />
                            <ext:RecordField Name="test2" />
                            <ext:RecordField Name="test3" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column Header="Test1" DataIndex="test1" />
                <ext:Column Header="Test2" DataIndex="test2" />
                <ext:Column Header="Test3" DataIndex="test3" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
        </SelectionModel>
        <KeyMap>
            <ext:KeyBinding>
                <Keys>
                    <ext:Key Code="TAB" />
                </Keys>
                <Listeners>
                <Event Handler="e.target.style.backgroundColor = 'red';" />
                </Listeners>
            </ext:KeyBinding>
        </KeyMap>
    </ext:GridPanel>
    </form>
</body>
</html>

Thanks for your kind assistance,

Dominik.

**Dominik** · Feb 28, 2012, 9:46 AM

Hi again,

This code works except at last cell in each Row:

<KeyMap>
    <ext:KeyBinding>
        <Keys>
            <ext:Key Code="TAB" />
        </Keys>
        <Listeners>
        <Event Handler="
            var oldColor = event.srcElement.style.backgroundColor;
            e.target.style.backgroundColor = 'red';
            if (e.target.previousSibling)
                e.target.previousSibling.style.backgroundColor = oldColor;
            " />
        </Listeners>
    </ext:KeyBinding>
</KeyMap>

I Keep trying...

**Daniil** · Mar 02, 2012, 11:21 AM

Strange, when Tab key is pressed on a penultimate cell, the focus goes directly to a browser address field (it's in IE; in FireFox it goes to a tab title element) bypassing the last cell.

A similar situation with the second cell and Shift+Tab - the focus goes to the TextField bypassing the first cell.

Therefore the code looks a bit complicated. I was unable to make it simpler.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">    
    protected void Page_Load(object sender, EventArgs e) { 
        if (!X.IsAjaxRequest) 
        { 
            Store store = this.GridPanel1.GetStore(); 
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" }, 
                new object[] { "test4", "test5", "test6" }, 
                new object[] { "test7", "test8", "test9" } 
            }; 
            store.DataBind(); 
        } 
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TextField runat="server" AutoFocus="true" AutoFocusDelay="100" />
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" SingleSelect="true" />
            </SelectionModel>
        </ext:GridPanel>
        <ext:KeyMap runat="server" Target="Ext.getBody()">
            <ext:KeyBinding>
                <Keys>
                    <ext:Key Code="TAB" />
                </Keys>
                <Listeners>
                    <Event Handler="
                        var t = e.getTarget(),
                            tEl = Ext.get(t),
                            grid = #{GridPanel1};                            

                        if (tEl.findParent('.x-grid3')) {
                            var oldColor = t.style.backgroundColor,
                                rowIndex = grid.getView().findRowIndex(t),
                                firstRow = rowIndex === 0,
                                firstCell = firstRow && tEl.hasClass('x-grid3-cell-first'),
                                lastRow = rowIndex === grid.getStore().getCount() - 1,
                                lastCell = lastRow && tEl.hasClass('x-grid3-cell-last');

                            if (grid.previousCell) {
                                grid.previousCell.cell.style.backgroundColor = grid.previousCell.color;
                            }

                            if (!(e.shiftKey && firstCell) &&
                                !(!e.shiftKey && lastCell)) {

                                t.style.backgroundColor = 'red';
                            }

                            grid.previousCell = {
                                cell  : t,
                                color : oldColor   
                            }
                        } else if (grid.previousCell) {
                            grid.previousCell.cell.style.backgroundColor = grid.previousCell.color;
                            delete grid.previousCell;
                        }" />
                </Listeners>
            </ext:KeyBinding>
        </ext:KeyMap>
    </form>
</body>
</html>

Thread: GridPanel cell focus

Thread Tools

Search Thread

Display

Similar Threads

[CLOSED] focus on first cell in new record gridpanel

Gridpanel: change cell's css class on click (eg. toggle the cell background color)

[CLOSED] Have cell, want to trigger editor and give focus...

GridPanel does not cycle focus properly to next cell on pressing Tab

GP - Validate Edit Keep Cell Focus

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources