PDA

View Full Version : [CLOSED] Editable check column inside a TreePanel



RCN
May 10, 2012, 2:39 PM
Hi folks, when the check box (Active Column) is clicked a javascript exception is thrown. It tries to call getAt method of TreeStore but the method is not defined.

Any idea to overcome this problem or even another approach to implement a TreePanel with an editable check column?

thanks in advance



<ext:TreePanel ID="TreePanel1" RootVisible="false" Title="Tree" Height="500" Width="500"
Border="false" runat="server">
<Store>
<ext:TreeStore ID="TreeStore1" runat="server">
<Proxy>
<ext:AjaxProxy Url="/Example/LoadTree/" />
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Lastname" />
<ext:ModelField Name="Active" Type="Boolean" />
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<Root>
<ext:Node NodeID="0" Text="Root" />
</Root>
<ColumnModel>
<Columns>
<ext:TreeColumn ID="TreeColumn1" runat="server" Text="Name" Flex="2" Sortable="true"
DataIndex="Name">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:TreeColumn>
<ext:Column ID="Column1" runat="server" Text="Lastname" Flex="1" Sortable="true"
DataIndex="Lastname" />
<ext:CheckColumn ID="Column2" runat="server" Text="Active" Sortable="true" DataIndex="Active"
Editable="true" />
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" />
</Plugins>
</ext:TreePanel>




public ContentResult LoadTree()
{
string nodeId = "Ext" + DateTime.Now.Second;

NodeCollection nodes = new NodeCollection(false);

bool active = false;
for (int i = 1; i < 6; i++)
{
Node asyncNode = new Node();

active = !active;
asyncNode.CustomAttributes.Add(new ConfigItem { Name = "Name", Value = "Name " + nodeId + i, Mode = ParameterMode.Value });
asyncNode.CustomAttributes.Add(new ConfigItem { Name = "Lastname", Value = "Lastname " + nodeId + i, Mode = ParameterMode.Value });
asyncNode.CustomAttributes.Add(new ConfigItem { Name = "Active", Value = active.ToString().ToLower(), Mode = ParameterMode.Raw });
asyncNode.NodeID = nodeId + i;
nodes.Add(asyncNode);
}

return new ContentResult { Content = nodes.ToJson() };
}

Daniil
May 10, 2012, 3:23 PM
Hi,

Thanks for the report. I will report it to Sencha. Though I'm not sure that CheckColumn supports to be used within TreePanel. But I can't see any significant reason why not.

For now I can suggest the following fix. The fix is within the <head>.

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", true },
new object[] { "test4", "test5", false },
new object[] { "test7", "test8", true },
};
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 v2 Example</title>

<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

<script type="text/javascript">
Ext.ux.CheckColumn.override({
processEvent: function (type, view, cell, recordIndex, cellIndex, e) {
if (this.editable && (type == 'mousedown' || (type == 'keydown' && (e.getKey() == e.ENTER || e.getKey() == e.SPACE)))) {

var me = this,
store = view.panel.store,
record = store.getAt ? store.getAt(recordIndex) : view.getRecord(view.getNode(recordIndex)), //store.getAt(recordIndex),
dataIndex = this.dataIndex,
checked = !record.get(dataIndex),
eventTarget = view.panel.editingPlugin || view.panel;

var ev = {
grid: view.panel,
record: record,
field: dataIndex,
value: record.get(this.dataIndex),
row: view.getNode(recordIndex),
column: this,
rowIdx: recordIndex,
colIdx: cellIndex,
cancel: false
};

if (eventTarget.fireEvent("beforeedit", eventTarget, ev) === false || ev.cancel === true) {
return;
}

ev.originalValue = ev.value;
ev.value = checked;

if (eventTarget.fireEvent("validateedit", eventTarget, ev) === false || ev.cancel === true) {
return;
}

if (this.singleSelect) {
store.suspendEvents();
store.each(function (record, i) {
var value = (i == recordIndex);
if (value != record.get(dataIndex)) {
record.set(dataIndex, value);
}
});
store.resumeEvents();
store.fireEvent("datachanged", store);
} else {
record.set(dataIndex, checked);
}

this.fireEvent('checkchange', this, recordIndex, record, checked);
eventTarget.fireEvent('edit', eventTarget, ev);

if (type == 'mousedown') { //if (mousedown) {
e.stopEvent();
}

// Selection will not proceed after this because of the DOM update caused by the record modification
// Invoke the SelectionModel unless configured not to do so
if (!me.stopSelection) {
view.selModel.selectByPosition({
row: recordIndex,
column: cellIndex
});
}
// cancel selection.
return false;
} else {
return this.callParent(arguments);
}
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="GridPanel"
AutoHeight="true">
<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:CheckColumn runat="server" Text="Test3" DataIndex="test3" Editable="true" />
</Columns>
</ColumnModel>
</ext:GridPanel>

<ext:TreePanel runat="server" Title="TreePanel" Height="150">
<ColumnModel>
<Columns>
<ext:TreeColumn runat="server" Text="Text" DataIndex="text" />
<ext:CheckColumn runat="server" Text="Allow" DataIndex="allow" Editable="true" />
</Columns>
</ColumnModel>
<Root>
<ext:Node Text="Root" Expanded="true">
<Children>
<ext:Node Text="Node1" Leaf="true" />
<ext:Node Text="Node2" Leaf="true" />
</Children>
</ext:Node>
</Root>
</ext:TreePanel>
</form>
</body>
</html>

Daniil
May 10, 2012, 3:48 PM
I have reported it to Sencha.
http://www.sencha.com/forum/showthread.php?203682

I will monitor it.

RCN
May 10, 2012, 3:56 PM
thank you daniil .. please keep me posted

Daniil
Jun 04, 2012, 9:07 AM
Hi @RCN,

The fix has been committed to SVN, revision #4060. You can remove the local override after update.

Thanks again for the report.