PDA

View Full Version : [CLOSED] render pid to name problem?



hdsoso
Nov 28, 2013, 12:24 PM
a tree panel to show tree data, pid is the parent id .
now i want to render pid to type in render function



<script type="text/javascript">
var r_p_product_type = function (v) {
// if (!Ext.isEmpty(v)) {
// return App.s_product_type.getById(v).data.type; // is it right?
// }
console.debug(App.s_product_type.data); //here set debug in chrome , but not stop , why?
return v;
};
</script>

<form id="form1" runat="server">
<ext:ResourceManager runat="server" SourceFormatting="True"></ext:ResourceManager>
<ext:Store runat="server" ID="s_product_type">
<Model>
<ext:Model runat="server" IDProperty="id">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Viewport runat="server">

<Items>

<ext:TreePanel ID="tp_product_type" runat="server" Title="商品类别管理">
<Store>
<ext:TreeStore runat="server" ID="ts_product_type">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="新增"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>


<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="id" Text="编号"></ext:Column>
<ext:TreeColumn runat="server" DataIndex="type" Text="类别" Flex="1">
<Editor>
<ext:TextField runat="server"></ext:TextField>
</Editor>
</ext:TreeColumn>
<ext:Column runat="server" DataIndex="pid" Text="父类别">
<Renderer Fn="r_p_product_type"/>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server"></ext:CellEditing>
</Plugins>
</ext:TreePanel>
</Items>
</ext:Viewport>

</form>

hdsoso
Nov 28, 2013, 1:24 PM
I wrote a sample code:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm13.aspx.cs" Inherits="extdemo.test.WebForm13" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
var r_p_product_type = function (v) {
if (!Ext.isEmpty(v)) {
return App.s_product_type.getById(v).data.type; //here how to render id to type?
}
return v;
};
</script>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
tp_product_type.ExpandAll();
LoadAllProductType();
}

private void LoadAllProductType()
{
var tc = new TreeClass { id = 1, type = "type1", pid = -1 };
var tc1 = new TreeClass { id = 2, type = "type2", pid = 1 };
var tc2 = new TreeClass { id = 3, type = "type3", pid = 1 };
var tc3 = new TreeClass { id = 4, type = "type4", pid = 2 };
var tc4 = new TreeClass { id = 5, type = "type5", pid = 4 };

s_product_type.Add(tc);
s_product_type.Add(tc1);
s_product_type.Add(tc2);
s_product_type.Add(tc3);
s_product_type.Add(tc4);
}
public class TreeClass
{
public int id { get; set; }
public string type { get; set; }
public int pid { get; set; }
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True"></ext:ResourceManager>
<ext:Store runat="server" ID="s_product_type">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="id">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server">
<Items>
<ext:TreePanel ID="tp_product_type" runat="server" Title="商品类别管理">
<Root>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="1" />
<ext:ConfigItem Name="type" Value="type1" />
<ext:ConfigItem Name="pid" Value="-1" />
</CustomAttributes>
<Children>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="2" />
<ext:ConfigItem Name="type" Value="type2" />
<ext:ConfigItem Name="pid" Value="1" />
</CustomAttributes>
<Children>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="4" />
<ext:ConfigItem Name="type" Value="type4" />
<ext:ConfigItem Name="pid" Value="2" />
</CustomAttributes>
<Children>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="5" />
<ext:ConfigItem Name="type" Value="type5" />
<ext:ConfigItem Name="pid" Value="4" />
</CustomAttributes>

</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="3" />
<ext:ConfigItem Name="type" Value="type3" />
<ext:ConfigItem Name="pid" Value="1" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
</Root>
<Store>
<ext:TreeStore runat="server" ID="ts_product_type">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="新增"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>


<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" DataIndex="id" Text="编号"></ext:Column>
<ext:TreeColumn ID="TreeColumn1" runat="server" DataIndex="type" Text="类别" Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server"></ext:TextField>
</Editor>
</ext:TreeColumn>
<ext:Column ID="Column2" runat="server" DataIndex="pid" Text="父类别">
<Renderer Fn="r_p_product_type" />
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server"></ext:CellEditing>
</Plugins>
</ext:TreePanel>
</Items>
</ext:Viewport>

</form>
</body>
</html>

Daniil
Nov 28, 2013, 1:53 PM
Hi @hdsoso,

You set up a Renderer for the DataIndex="pid" and use its value in such a way:

App.s_product_type.getById(v).data.type
where "v" is a "pid" value.

In other words you are doing:

.getById("some pid')
but IDProperty="id".


Also do you really need to retrieve a record by its id? A record is passed to a Renderer as the third parameter.

var r_p_product_type = function (value, metadata, record) {

hdsoso
Nov 28, 2013, 11:41 PM
Hi @hdsoso,

You set up a Renderer for the DataIndex="pid" and use its value in such a way:

App.s_product_type.getById(v).data.type
where "v" is a "pid" value.

In other words you are doing:

.getById("some pid')
but IDProperty="id".


Also do you really need to retrieve a record by its id? A record is passed to a Renderer as the third parameter.

var r_p_product_type = function (value, metadata, record) {

pid is the parent id of current node , so dataindex="pid" is ok,
plz see the picture,you may know what i mean
7296

hdsoso
Nov 29, 2013, 12:09 AM
Hi @hdsoso,

You set up a Renderer for the DataIndex="pid" and use its value in such a way:

App.s_product_type.getById(v).data.type
where "v" is a "pid" value.

In other words you are doing:

.getById("some pid')
but IDProperty="id".


pid is what i need , because i will render pid to parent's type, pid is the parent id.

hdsoso
Nov 29, 2013, 12:15 AM
Also do you really need to retrieve a record by its id? A record is passed to a Renderer as the third parameter.

var r_p_product_type = function (value, metadata, record) {

no,because the record does not contain parent's type.

Baidaly
Nov 29, 2013, 12:17 AM
Hello!

I guess you want to render type of parent node? If so, try the following code:


<script type="text/javascript">
var r_p_product_type = function (v, meta, record) {
if (!Ext.isEmpty(record.parentNode)) {
return record.parentNode.get('type'); // Use parentNode of current record
}
return v;
};
</script>

hdsoso
Nov 29, 2013, 12:30 AM
Hello!

I guess you want to render type of parent node? If so, try the following code:


<script type="text/javascript">
var r_p_product_type = function (v, meta, record) {
if (!Ext.isEmpty(record.parentNode)) {
return record.parentNode.get('type'); // Use parentNode of current record
}
return v;
};
</script>
good , no need to define the store s_product_type , thanks.

hdsoso
Nov 30, 2013, 2:54 AM
Hello!

I guess you want to render type of parent node? If so, try the following code:


<script type="text/javascript">
var r_p_product_type = function (v, meta, record) {
if (!Ext.isEmpty(record.parentNode)) {
return record.parentNode.get('type'); // Use parentNode of current record
}
return v;
};
</script>

hello, this work well, but when i add a editor to the column, in editor there is a DropDownField, in DropDownField there is a treepanel,
when click the item of treepanel , set the value to the DropDownField, then execute the r_p_product_type function , but it can not render the right parent type. because the record is not change when click the item of treepanel.
below is my code :


<ext:Column runat="server" DataIndex="pid" Text="父类别" Flex="1">
<Renderer Fn="r_p_product_type" />
<Editor>
<ext:DropDownField runat="server" ID="ddf_ptype" Mode="ValueText">

<Component>
<ext:TreePanel runat="server" ID="tp_product_type1">
<Store>
<ext:TreeStore runat="server" ID="TreeStore1">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>

<ColumnModel>
<Columns>
<ext:TreeColumn runat="server" DataIndex="type" Flex="1">
</ext:TreeColumn>
</Columns>
</ColumnModel>
<Listeners>
<ItemClick Handler="
this.dropDownField.setValue(record.data.id, record.data.type, false);
this.dropDownField.collapse();
"></ItemClick>
</Listeners>
</ext:TreePanel>
</Component>
</ext:DropDownField>
</Editor>
</ext:Column>

is there a way to change the record when select the item of the treepanel. or according to the value of dropDownField to render right "type"?

hdsoso
Nov 30, 2013, 2:17 PM
now , i use a global store to find type by id,


<script type="text/javascript">
var r_p_product_type = function (v, meta, record) {

var r = App.s_p_t.getById(v);
if (!Ext.isEmpty(r)) {
return r.get("type"); //it can render right when select the item of treepanel in the editor ,but when page is load , s_p_t's items is empty.
} else {
return v;
}
};



<ext:ResourceManager runat="server" SourceFormatting="True"></ext:ResourceManager>
<ext:Store runat="server" ID="s_p_t">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>



protected void Page_Load(object sender, EventArgs e)
{

if (!X.IsAjaxRequest)
{
LoadAllProductTypes(); // it load data to the store "s_p_t"
tp_product_type.ExpandAll();
LoadProductTypes(tp_product_type);
LoadProductTypes(tp_product_type1);
tp_product_type1.RootVisible = true;

}
}
private void LoadAllProductTypes()
{
s_p_t.DataSource = _productTypeService.All();
s_p_t.DataBind();
}

it resolve the select in editor render problems.but can not render when page is load
7306

hdsoso
Dec 01, 2013, 1:24 PM
why App.s_p_t is empty ?


var r_p_product_type = function (v, meta, record) {

var r = App.s_p_t.getById(v);
if (!Ext.isEmpty(r)) {
return r.get("type");
} else {
return v;
}
};

before the render "r_p_product_type " execute , the s_p_t is loaded in codebehind


protected void Page_Load(object sender, EventArgs e)
{

if (!X.IsAjaxRequest)
{
LoadAllProductTypes();
tp_product_type.ExpandAll();
LoadProductTypes(tp_product_type);
LoadProductTypes(tp_product_type1);
tp_product_type1.RootVisible = true;

}
}
private void LoadAllProductTypes()
{
s_p_t.DataSource = _productTypeService.All();
s_p_t.DataBind();
}

why App.s_p_t is empty ?

Baidaly
Dec 01, 2013, 8:43 PM
Could you provide a full sample to reproduce? It's difficult to understand changes from initial sample and the current.

hdsoso
Dec 01, 2013, 11:49 PM
Could you provide a full sample to reproduce? It's difficult to understand changes from initial sample and the current.


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="product_type.aspx.cs" Inherits="extdemo.admin.pages.product_type" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
var r_p_product_type = function (v, meta, record) {

var r = App.s_p_t.getById(v);
if (!Ext.isEmpty(r)) {
return r.get("type");
} else {
return v;
}
};
var r_p_product_type1 = function (v, meta, record) {
if (!Ext.isEmpty(record)) {
return record.get('type'); // Use parentNode of current record
}
return v;
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" SourceFormatting="True"></ext:ResourceManager>
<ext:Store runat="server" ID="s_p_t">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Viewport runat="server">
<Items>
<ext:TreePanel ID="tp_product_type" runat="server" Title="商品类别管理">
<Store>
<ext:TreeStore runat="server">
<Model>
<ext:Model ID="Model3" runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="新增"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>


<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="id" Text="编号"></ext:Column>
<ext:TreeColumn runat="server" DataIndex="type" Text="类别" Flex="1">
<Editor>
<ext:TextField runat="server"></ext:TextField>
</Editor>
</ext:TreeColumn>
<ext:Column runat="server" DataIndex="pid" Text="父类别" Flex="1">
<Renderer Fn="r_p_product_type" />
<Editor>
<ext:DropDownField runat="server" ID="ddf_ptype" Mode="ValueText">

<Component>
<ext:TreePanel runat="server" ID="tp_product_type1">
<Store>
<ext:TreeStore runat="server" ID="TreeStore1">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>

<ColumnModel>
<Columns>
<ext:TreeColumn runat="server" DataIndex="type" Flex="1">
</ext:TreeColumn>
</Columns>
</ColumnModel>
<Listeners>
<ItemClick Handler="
this.dropDownField.setValue(record.data.id, record.data.type, false);
this.dropDownField.collapse();
">
</ItemClick>
</Listeners>
</ext:TreePanel>
</Component>
</ext:DropDownField>
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing runat="server">
<DirectEvents>
<BeforeEdit OnEvent="SelectPtype" Before="
return el.activeColumn.dataIndex == 'pid';
">
</BeforeEdit>
</DirectEvents>
</ext:CellEditing>
</Plugins>
</ext:TreePanel>
</Items>
</ext:Viewport>

</form>
</body>
</html>



using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;
using Service;

namespace extdemo.admin.pages
{
public partial class product_type : System.Web.UI.Page
{
readonly ProductTypeService _productTypeService = new ProductTypeService();
protected void Page_Load(object sender, EventArgs e)
{

if (!X.IsAjaxRequest)
{
LoadAllProductTypes();
tp_product_type.ExpandAll();
LoadProductTypes(tp_product_type);
LoadProductTypes(tp_product_type1);
tp_product_type1.RootVisible = true;

}
}
private void LoadAllProductTypes()
{
s_p_t.DataSource = _productTypeService.All();
s_p_t.DataBind();
}
protected void SelectPtype(object sender, DirectEventArgs e)
{
// LoadProductTypes(tp_product_type1);
ddf_ptype.Expand();
tp_product_type1.ExpandAll();
}

private void LoadProductTypes(TreePanel tp)
{

Node root = new Node();
root.CustomAttributes.Add(new ConfigItem { Name = "id", Value = "0" });
root.CustomAttributes.Add(new ConfigItem { Name = "type", Value = "根类别" });
root.CustomAttributes.Add(new ConfigItem { Name = "pid", Value = "" });
root.Expanded = true;
tp.Root.Add(root);
tp.RootVisible = false;
var level1 = _productTypeService.GetChildProduct(-1);
foreach (var qizProductType in level1)
{
Node n = new Node();
n.CustomAttributes.Add(new ConfigItem { Name = "id", Value = qizProductType.id.ToString() });
n.CustomAttributes.Add(new ConfigItem { Name = "type", Value = qizProductType.type });
n.CustomAttributes.Add(new ConfigItem { Name = "pid", Value = qizProductType.pid.ToString() });
n.Leaf = _productTypeService.IsLeaf(qizProductType.id);
root.Children.Add(n);
AddChildProductType(n, qizProductType.id);
}
}
private void AddChildProductType(Node n1, int pid)
{
var level1 = _productTypeService.GetChildProduct(pid);
foreach (var qizProductType in level1)
{
Node n = new Node();
n.CustomAttributes.Add(new ConfigItem { Name = "id", Value = qizProductType.id.ToString() });
n.CustomAttributes.Add(new ConfigItem { Name = "type", Value = qizProductType.type });
n.CustomAttributes.Add(new ConfigItem { Name = "pid", Value = qizProductType.pid.ToString() });
n.Leaf = _productTypeService.IsLeaf(qizProductType.id);
n1.Children.Add(n);
AddChildProductType(n, qizProductType.id);
}
}
}
}

Daniil
Dec 02, 2013, 5:45 AM
Unfortunately, it throws:

Compiler Error Message: CS0246: The type or namespace name 'ProductTypeService' could not be found (are you missing a using directive or an assembly reference?)
for me.

hdsoso
Dec 02, 2013, 9:51 AM
Unfortunately, it throws:

Compiler Error Message: CS0246: The type or namespace name 'ProductTypeService' could not be found (are you missing a using directive or an assembly reference?)
for me.

it just return data , do not care with it.

hdsoso
Dec 02, 2013, 9:55 AM
why App.s_p_t is empty ?


var r_p_product_type = function (v, meta, record) {

var r = App.s_p_t.getById(v);
if (!Ext.isEmpty(r)) {
return r.get("type");
} else {
return v;
}
};

before the render "r_p_product_type " execute , the s_p_t is loaded in codebehind


protected void Page_Load(object sender, EventArgs e)
{

if (!X.IsAjaxRequest)
{
LoadAllProductTypes();
tp_product_type.ExpandAll();
LoadProductTypes(tp_product_type);
LoadProductTypes(tp_product_type1);
tp_product_type1.RootVisible = true;

}
}
private void LoadAllProductTypes()
{
s_p_t.DataSource = _productTypeService.All();
s_p_t.DataBind();
}

why App.s_p_t is empty ?

why in column renderer can not visit App.s_p_t which have loaded in code behind?
column renderer execute before LoadAllProductTypes in code behind?
how to make LoadAllProductTypes execute before column renderer ?

Daniil
Dec 02, 2013, 12:30 PM
why App.s_p_t is empty ?


Please explain how do you determine it is empty?

Baidaly
Dec 02, 2013, 11:43 PM
Sorry, but your is not runnable and doesn't reproduce your issue. It's difficult to say where is the problem without a sample.

hdsoso
Dec 02, 2013, 11:55 PM
Please explain how do you determine it is empty?

now , i use a global store to find type by id,


<script type="text/javascript">
var r_p_product_type = function (v, meta, record) {

var r = App.s_p_t.getById(v);
if (!Ext.isEmpty(r)) {
return r.get("type"); //it can render right when select the item of treepanel in the editor ,but when page is load , s_p_t's items is empty.
} else {
return v;
}
};



<ext:ResourceManager runat="server" SourceFormatting="True"></ext:ResourceManager>
<ext:Store runat="server" ID="s_p_t">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>



protected void Page_Load(object sender, EventArgs e)
{

if (!X.IsAjaxRequest)
{
LoadAllProductTypes(); // it load data to the store "s_p_t"
tp_product_type.ExpandAll();
LoadProductTypes(tp_product_type);
LoadProductTypes(tp_product_type1);
tp_product_type1.RootVisible = true;

}
}
private void LoadAllProductTypes()
{
s_p_t.DataSource = _productTypeService.All();
s_p_t.DataBind();
}

it resolve the select in editor render problems.but can not render when page is load
7306

@Daniil
i set a breakpoint in the javascript using chrome.when page is loading , it stops and i see it is empty.
please see the attachment
7306

hdsoso
Dec 03, 2013, 12:08 AM
Sorry, but your is not runnable and doesn't reproduce your issue. It's difficult to say where is the problem without a sample.
@Baidaly, please see my post carefully, i think i describe clearly, if i have extra time, i will write a runnable code.it is a trouble to translate dynamic code to demo code.

hdsoso
Dec 03, 2013, 12:45 AM
private void LoadAllProductTypes()
{
var l = _productTypeService.All();
s_p_t.DataSource = l;
s_p_t.DataBind();
}

7317

database pic
7318

hdsoso
Dec 03, 2013, 1:47 AM
I wrote a test case , this time pid can render to type only in a part of rows


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm7.aspx.cs" Inherits="TobrosCWT.test.WebForm7" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
var r_p_product_type = function (v, meta, record) {

var r = App.s_product_type.getById(v);
if (!Ext.isEmpty(r)) {
return r.get("type");
} else {
return v;
}
};
</script>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
tp_product_type.ExpandAll();
LoadAllProductType();
}

private void LoadAllProductType()
{
var tc = new TreeClass { id = 1, type = "type1", pid = -1 };
var tc1 = new TreeClass { id = 2, type = "type2", pid = 1 };
var tc2 = new TreeClass { id = 3, type = "type3", pid = 1 };
var tc3 = new TreeClass { id = 4, type = "type4", pid = 2 };
var tc4 = new TreeClass { id = 5, type = "type5", pid = 4 };

s_product_type.Add(tc);
s_product_type.Add(tc1);
s_product_type.Add(tc2);
s_product_type.Add(tc3);
s_product_type.Add(tc4);
}
public class TreeClass
{
public int id { get; set; }
public string type { get; set; }
public int pid { get; set; }
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True"></ext:ResourceManager>
<ext:Store runat="server" ID="s_product_type">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="id">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server">
<Items>
<ext:TreePanel ID="tp_product_type" runat="server" Title="商品类别管理">
<Root>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="1" />
<ext:ConfigItem Name="type" Value="type1" />
<ext:ConfigItem Name="pid" Value="-1" />
</CustomAttributes>
<Children>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="2" />
<ext:ConfigItem Name="type" Value="type2" />
<ext:ConfigItem Name="pid" Value="1" />
</CustomAttributes>
<Children>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="4" />
<ext:ConfigItem Name="type" Value="type4" />
<ext:ConfigItem Name="pid" Value="2" />
</CustomAttributes>
<Children>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="5" />
<ext:ConfigItem Name="type" Value="type5" />
<ext:ConfigItem Name="pid" Value="4" />
</CustomAttributes>

</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="3" />
<ext:ConfigItem Name="type" Value="type3" />
<ext:ConfigItem Name="pid" Value="1" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
</Root>
<Store>
<ext:TreeStore runat="server" ID="ts_product_type">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="新增"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>


<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" DataIndex="id" Text="编号"></ext:Column>
<ext:TreeColumn ID="TreeColumn1" runat="server" DataIndex="type" Text="类别" Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server"></ext:TextField>
</Editor>
</ext:TreeColumn>
<ext:Column ID="Column2" runat="server" DataIndex="pid" Text="父类别">
<Renderer Fn="r_p_product_type" />
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server"></ext:CellEditing>
</Plugins>
</ext:TreePanel>
</Items>
</ext:Viewport>

</form>
</body>
</html>

please see
7319

Baidaly
Dec 03, 2013, 11:57 AM
Try the following approach:


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

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
var r_p_product_type = function (v, meta, record) {

var r = App.s_product_type.getById(v);
if (!Ext.isEmpty(r)) {
return r.get("type");
} else {
return v;
}
};
</script>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
tp_product_type.ExpandAll();
LoadAllProductType();
}
}

private void LoadAllProductType()
{
var tc = new TreeClass { id = 1, type = "type1", pid = -1 };
var tc1 = new TreeClass { id = 2, type = "type2", pid = 1 };
var tc2 = new TreeClass { id = 3, type = "type3", pid = 1 };
var tc3 = new TreeClass { id = 4, type = "type4", pid = 2 };
var tc4 = new TreeClass { id = 5, type = "type5", pid = 4 };

List<TreeClass> l = new List<TreeClass> { tc, tc1, tc2, tc3, tc4 };
//s_product_type.Add(tc);
//s_product_type.Add(tc1);
//s_product_type.Add(tc2);
//s_product_type.Add(tc3);
//s_product_type.Add(tc4);
s_product_type.DataSource = l;
s_product_type.DataBind();
}
public class TreeClass
{
public int id { get; set; }
public string type { get; set; }
public int pid { get; set; }
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True"></ext:ResourceManager>
<ext:Store runat="server" ID="s_product_type">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="id">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="#{tp_product_type}.view.refresh();"></Load>
</Listeners>
</ext:Store>

<ext:Viewport ID="Viewport1" runat="server">
<Items>
<ext:TreePanel ID="tp_product_type" runat="server" Title="商品类别管理">
<Root>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="1" />
<ext:ConfigItem Name="type" Value="type1" />
<ext:ConfigItem Name="pid" Value="-1" />
</CustomAttributes>
<Children>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="2" />
<ext:ConfigItem Name="type" Value="type2" />
<ext:ConfigItem Name="pid" Value="1" />
</CustomAttributes>
<Children>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="4" />
<ext:ConfigItem Name="type" Value="type4" />
<ext:ConfigItem Name="pid" Value="2" />
</CustomAttributes>
<Children>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="5" />
<ext:ConfigItem Name="type" Value="type5" />
<ext:ConfigItem Name="pid" Value="4" />
</CustomAttributes>

</ext:Node>
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node>
<CustomAttributes>
<ext:ConfigItem Name="id" Value="3" />
<ext:ConfigItem Name="type" Value="type3" />
<ext:ConfigItem Name="pid" Value="1" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
</Root>
<Store>
<ext:TreeStore runat="server" ID="ts_product_type">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="type"></ext:ModelField>
<ext:ModelField Name="pid"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="新增"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>


<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" DataIndex="id" Text="编号"></ext:Column>
<ext:TreeColumn ID="TreeColumn1" runat="server" DataIndex="type" Text="类别" Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server"></ext:TextField>
</Editor>
</ext:TreeColumn>
<ext:Column ID="Column2" runat="server" DataIndex="pid" Text="父类别">
<Renderer Fn="r_p_product_type" />
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server"></ext:CellEditing>
</Plugins>
</ext:TreePanel>
</Items>
</ext:Viewport>

</form>
</body>
</html>

hdsoso
Dec 03, 2013, 12:14 PM
thanks , can you describe why add


<Listeners>
<Load Handler="#{tp_product_type}.view.refresh();"></Load>
</Listeners>

Baidaly
Dec 03, 2013, 12:36 PM
thanks , can you describe why add


<Listeners>
<Load Handler="#{tp_product_type}.view.refresh();"></Load>
</Listeners>


Because, you renderer is called before data is loaded so when data is loaded you need to call your renderer using refresh method