What's New?

[CLOSED] Changing cell content with javascript

  1. #1
    Oct 04, 2012, 4:01 PM

    [CLOSED] Changing cell content with javascript

    Hello,

    I have a function that adds a new row to a grid and calls another function that takes a few seconds to draw a path on a map.

    I would like to show an ajax loading-gif in a specific column of the newly added row while the draw function is processing, and once finished I would like to show the actual cell content.

    
        function addData(record) {

            var tourGrid= App.GridPanelActiveTours;

                record.TourDescription = "<b>XX<b>";

                tourGrid.store.insert(0, record);
                
                drawTour(record.TourId);
            }
    XX is a placeholder for my ajax-gif

    So after the method drawTour has finished, instead of XX there should be the old value again. I need to set back the old Value inside the drawTour function, so what do I need to pass and how can I refresh that cell to its old value then ?
    Last edited by Daniil; Oct 09, 2012 at 10:41 AM. Reason: [CLOSED]
  2. #2
    Oct 04, 2012, 6:15 PM
    Hi @blueworld,

    I am not sure that I understood the requirement well, but here is an example how I understood.

    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>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script type="text/javascript">
        var update = function () {
            var grid = App.GridPanel1,
                record = grid.getStore().getAt(1),
                column = grid.columns[1],
                cell = grid.getView().getCell(record, column);

            cell.addCls("my-loading-image");

            Ext.defer(function () {
                cell.removeCls("my-loading-image");
                record.set("test2", "new value");
            }, 3000);
        };
    </script>

    <style type="text/css">
        .my-loading-image {
            background-image: url("resources/images/test.png");
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Button runat="server" Text="Update">
        <Listeners>
            <Click Fn="update" />
        </Listeners>
    </ext:Button>

    <ext:GridPanel ID="GridPanel1" runat="server">
        <Store>
            <ext:Store runat="server">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="test1" />
                            <ext:ModelField Name="test2" />
                            <ext:ModelField Name="test3" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                <ext:Column runat="server" Text="Test2" DataIndex="test2" />
                <ext:Column runat="server" Text="Test3" DataIndex="test3" />
            </Columns>
        </ColumnModel>
    </ext:GridPanel>
</body>
</html>
  3. #3
    Oct 05, 2012, 8:11 AM
    Hi Daniil,

    I have done it now by waiting for a callback:

    
                record.TourDescription = "<img src='myAjax.gif' />";

                myGrid.store.insert(0, record);
                
                drawTour(record.TourId,'showAll', function () {

                    record = myGrid.getStore().getAt(0);
                    record.TourDescription = "Old_value";
                    record.commit();
                    myGrid.getView().refresh();
                    alert(record.TourDescription);
                });
    The alert correctly shows "Old_value", but my grid does not refresh, I think I'm missing just a little thing here, any idea ?

    In addition do that, at the end of this function I need to access the button component of a gridCommand in that record, it is the 6th column, so how can get this specific button?
                        var myCommandColumn = myGrid.columns[5];
                    var myGridCommand= myGrid.getView().getCell(record, myCommandColumn );
                    var myCommandButton = ?
    I need to call 
    myCommandButton.toggle();
    or 
    myCommandButton.setValue(1);
  4. #4
    Oct 05, 2012, 11:30 AM
    Quote Originally Posted by blueworld View Post
    The alert correctly shows "Old_value", but my grid does not refresh, I think I'm missing just a little thing here, any idea ?
    Please use the set method
    record.set("fieldName", "newValue");
    instead of this
    record.TourDescription = "Old_value";
    In this case you can remove:
    myGrid.getView().refresh();
    Another option is updating the record's data property.

    More details are here.
    http://docs.sencha.com/ext-js/3-4/#!...ord-method-set


    Quote Originally Posted by blueworld View Post
    In addition do that, at the end of this function I need to access the button component of a gridCommand in that record, it is the 6th column, so how can get this specific button?
                        var myCommandColumn = myGrid.columns[5];
                    var myGridCommand= myGrid.getView().getCell(record, myCommandColumn );
                    var myCommandButton = ?
    I need to call 
    myCommandButton.toggle();
    or 
    myCommandButton.setValue(1);
    Please start a new forum thread for this issue.

Similar Threads

  1. [CLOSED] Center GridPanel cell column content
    By deejayns in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 04, 2012, 10:24 AM
  2. [CLOSED] Changing the Visibility of Field Sets including their content - code behind
    By sisa in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 21, 2011, 8:42 AM
  3. Changing a GridPanel cell value with getSelected().data.field_name does not work
    By paul-2011 in forum 1.x Help
    Replies: 1
    Last Post: Jan 03, 2011, 1:49 PM
  4. QTip on cell not having any content
    By mansi752 in forum 1.x Help
    Replies: 5
    Last Post: Dec 21, 2010, 9:40 AM
  5. [CLOSED] GridPanel: modify cell-content from listener (script)
    By andreas.seitz in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 21, 2009, 12:00 PM

Posting Permissions