What's New?

[CLOSED] Reach Command coloumn at run time with javascript

  1. #1
    Dec 09, 2010, 9:17 AM

    [CLOSED] Reach Command coloumn at run time with javascript

    im just move my post to premium support.


    my problem as following :

    1.I'm using EXT.NET RC,.NET Framework 3.5 SP1,Visual Studio 2010 Proffessional version,windows 7 64 bit.

    2.I have a EXT grid and this Grid contained an ImageCommandColoum and this coloumn contained two command (follow,unfolow), at prepare event handler at client side (javascript) i depend on other coloumn value to decide wether display one of command(follow,unfollow) and hide the other per record , where i can depened on commands parameter of the record.

    3.I have a listener on the grid and this listener calls a Javascript function this javascript function contains a call to a DirectMethod depends on the command user clicked , inside my javascript function i detect success or failure of the direct method call, in case of success i need to hide the clicked command and show the other, the problem i cant :confused:.

    4. i solve it by rebind my Store object at the directMethod code at server side so the prepare function calleded again.

    5. The solution was slow take a 5-7 seconds :mad: since my store depends on get its data from a server located other country (Australia).

    6. is there a way get to refrences to commands collection of the record inside my javascipt function which call the direct method.\

    7.also i will gratefull if you have any other solution to achieve this.

    i hope you respond to me ASAP.
    Last edited by Daniil; Dec 10, 2010 at 5:40 AM. Reason: [CLOSED]
  2. #2
    Dec 09, 2010, 10:39 AM
    Hi,

    Please investigate the following example.

    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[] {"test11", "test12", "test13"},
                new object[] {"test12", "test22", "test23"},
                new object[] {"test13", "test32", "test33"}
            };
            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>

    <script type="text/javascript">
        var commandHandler = function(command, record, rowIndex, colIndex) {
            var cell = Ext.fly(GridPanel1.getView().getCell(rowIndex, colIndex)),
                comToHide = getCommand(cell, command),
                comToShow;
            switch (command) {
                case "command1":
                    comToShow = getCommand(cell, "command2");
                    break;
                case "command2":
                    comToShow = getCommand(cell, "command1");
                    break;
            }
            comToHide.hide();
            comToShow.removeClass("x-hide-display"); // it's required to show at the first time
            comToShow.show();
        }
        
        var getCommand = function(cell, command) {
            var sel = "div[cmd='" + command + "']";
            return cell.child(sel);
        }
    </script>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <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" />
                <ext:ImageCommandColumn Header="Commands">
                    <Commands>
                        <ext:ImageCommand CommandName="command1" Icon="Accept" />
                        <ext:ImageCommand CommandName="command2" Icon="Add" Hidden="true" />
                    </Commands>
                </ext:ImageCommandColumn>
            </Columns>
        </ColumnModel>
        <Listeners>
            <Command Fn="commandHandler" />
        </Listeners>
    </ext:GridPanel>
    </form>
</body>
</html>
  3. #3
    Dec 09, 2010, 11:08 AM
    Hi,

    My example is not good. I didn't think about the changes are disappeared when grid is refreshed.

    You could avoid a Store.DataBind() by calling .refreshRow(). This method causes invoking of prepare methods.

    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[] {"test11", "test12", true, false},
                new object[] {"test12", "test22", false, true},
                new object[] {"test13", "test32", true, false}
            };
            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>

    <script type="text/javascript">
        var commandHandler = function(command, record, rowIndex, colIndex) {
            switch (command) {
                case "command1":
                    record.set("test3", false);
                    break;
                case "command2":
                    record.set("test3", true);
                    break;
            }
            GridPanel1.getView().refreshRow(rowIndex);
        }
    </script>

</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <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" />
                <ext:ImageCommandColumn Header="Commands">
                    <Commands>
                        <ext:ImageCommand CommandName="command1" Icon="Accept" />
                        <ext:ImageCommand CommandName="command2" Icon="Add" />
                    </Commands>
                    <PrepareCommands Handler="if (record.get('test3')) { commands[1].hidden = true; } else { commands[0].hidden = true; }" />
                </ext:ImageCommandColumn>
            </Columns>
        </ColumnModel>
        <Listeners>
            <Command Fn="commandHandler" />
        </Listeners>
    </ext:GridPanel>
    </form>
</body>
</html>
  4. #4
    Dec 09, 2010, 4:42 PM

    Thanks man....

    The second sample working perfectly :cool:......thanks alot and really this framework is great...... but really man we need documentation, the documentation will help us to accelerate our learning curve...
  5. #5
    Dec 10, 2010, 5:40 AM
    Quote Originally Posted by farisqadadeh View Post
    but really man we need documentation, the documentation will help us to accelerate our learning curve...
    Please follow this link.
    http://forums.ext.net/showthread.php...-documentation

Similar Threads

  1. Move next page in GridPanel when i reach the end of page when moving through down arrow key
    By huzzy143 in forum 1.x Help
    Replies: 2
    Last Post: Apr 11, 2012, 2:15 PM
  2. [CLOSED] ext:CalendarPanel: Time slots should be formated in Portuguese (military time format).
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 28, 2012, 1:39 PM
  3. Returning value from DirectMethod for Column Renderer
    By huzzy143 in forum 1.x Help
    Replies: 24
    Last Post: Feb 13, 2012, 3:39 PM
  4. [CLOSED] CalendarPanel: can not show the time default value or set the time in the EventEditWindow
    By csssi_coolite in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 25, 2011, 8:35 AM
  5. [CLOSED] Reach TextField ctrl via code behind
    By methode in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 15, 2008, 1:52 PM

Tags for this Thread

Posting Permissions