PDA

View Full Version : [CLOSED] Changing cell content with javascript



blueworld
Oct 04, 2012, 4:01 PM
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 ?

Daniil
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>

blueworld
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);

Daniil
Oct 05, 2012, 11:30 AM
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/#!/api/Ext.data.Record-method-set




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.