PDA

View Full Version : [CLOSED] auto expand tree ?



hdsoso
May 13, 2013, 2:50 AM
I create a tree which data comes from remote ajax ashx server code.
how to expand all tree node when page is load, I try to call tree's expandAll() , but not works. may be data is not completely loaded before the expandAll execute.
how to resove it?

geoffrey.mcgill
May 13, 2013, 3:06 AM
Please see #1 here,

http://forums.ext.net/showthread.php?10205-More-Information-Required

hdsoso
May 13, 2013, 12:15 PM
aspx code


<ext:TreePanel ID="TreePanel1" runat="server" Region="West" RootVisible="false" Title="导航" Width="200" Collapsible="True" Split="True">
<Listeners>
<BeforeRender Handler="Ext.net.Mask.show()">

</BeforeRender>
<AfterRender Handler="Ext.net.Mask.hide()"></AfterRender>
</Listeners>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="展开">
<Listeners>
<Click Handler="#{TreePanel1}.expandAll();"></Click>
</Listeners>
</ext:Button>
<ext:Button ID="Button1" runat="server" Text="收缩">
<Listeners>
<Click Handler="#{TreePanel1}.collapseAll();"></Click>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:TreeStore runat="server" >

<Proxy>
<ext:AjaxProxy Url="handlers/Handler_menu.ashx">

</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="text"></ext:ModelField>
<ext:ModelField Name="url"></ext:ModelField>
</Fields>
</ext:Model>
</Model>

</ext:TreeStore>
</Store>
<Listeners>
<ItemClick Handler="addTab(#{TabPanel1},record.data.id, record.data.url, record.data.text);"></ItemClick>

</Listeners>
</ext:TreePanel>


ashx code



public class Handler_menu : IHttpHandler
{
MenuService menusrv = new MenuService();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
string json = buildjson(0, null);
string str = "[" + json.Substring(0, json.Length - 1) + "]";

context.Response.Write(str);
context.Response.End();
}
public string buildjson(int pid, StringBuilder sb)
{
List<menu> ll = menusrv.getMenuList(pid);
int n = ll.Count;
int i = 0;
foreach (var item in ll)
{

menu sm = item;
if (sb == null)
{
sb = new StringBuilder();
}
sb.Append("{");
sb.Append("'id':'" + sm.id + "',");
sb.Append("'text':'" + sm.name + "',");
sb.Append("'url':'" + sm.url + "'");
if (!menusrv.isLeaf(sm.id))
{
sb.Append(",");
sb.Append("children:[");
buildjson(sm.id, sb);
sb.Append("]");
sb.Append("},");

}
else
{
i = i + 1;
sb.Append(",'leaf':true");
if (i != n)
{
sb.Append("},");
}
else
{
sb.Append("}");
}
}
}

return sb.ToString();
}

public bool IsReusable
{
get
{
return false;
}
}
}

thanks

hdsoso
May 13, 2013, 12:17 PM
can I ask another question?


<ext:TreePanel ID="TreePanel1" runat="server" Region="West" RootVisible="false" Title="导航" Width="200" Collapsible="True" Split="True">
<Listeners>
<BeforeRender Handler="Ext.net.Mask.show()">

</BeforeRender>
<AfterRender Handler="Ext.net.Mask.hide()"></AfterRender>
</Listeners>

how to set mask show only on the treepanel?
thanks.

Daniil
May 13, 2013, 2:38 PM
Hi,

Re: expandAll

I would suggest to set up

expanded: true
for each node which should be expanded. So, if you need to expand all the nodes, please set up expanded to true for all non-leaf nodes.

If a node is a leaf, set up

leaf: true

Re: mask

Please set up the following for the TreePanel.

<View>
<ext:TreeView runat="server" LoadMask="true" />
</View>

hdsoso
May 14, 2013, 3:45 AM
Hi,

Re: mask

Please set up the following for the TreePanel.

<View>
<ext:TreeView runat="server" LoadMask="true" />
</View>
it dose not work,below is my code


<ext:TreePanel Icon="Application" Split="true" Collapsible="true" ID="treemenu" runat="server" Region="West" Title="导航" Width="175" RootVisible="false">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" ID="btnexpand" Text="展开">
<Listeners>
<Click Handler="#{treemenu}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button1" runat="server" Text="收缩">
<Listeners>
<Click Handler="#{treemenu}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>

<Store>
<ext:TreeStore runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="url"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:AjaxProxy Url="loadjsondata/def.ashx"></ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
<View>
<ext:TreeView ID="TreeView1" runat="server" LoadMask="true" />
</View>

</ext:TreePanel>

Daniil
May 14, 2013, 4:06 AM
It shows a mask for me when loading nodes. Does it not show a mask for you?

hdsoso
May 14, 2013, 5:52 AM
It shows a mask for me when loading nodes. Does it not show a mask for you?
no mask show.below is my whole page code


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

<!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>xxxx</title>
<link href="images/style.css" rel="stylesheet" />
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
var addTab = function (tabPanel, id, text, url) {
var tab = tabPanel.getComponent(id);

if (!tab) {
tab = tabPanel.add({
id: id,
title: text,
closable: true,
loader: {
url: url,
renderer: "frame",
loadMask: {
showMask: true,
msg: "正在打开 " + text + "..."
}
}
});


}

tabPanel.setActiveTab(tab);
}
</script>
</ext:XScript>

</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:Panel runat="server" Collapsible="True" Region="North" Header="false">
<Content>
<div class="header">
<div class="logo"></div>
</div>
</Content>
</ext:Panel>

<ext:Panel runat="server" Collapsible="true" Height="30" Region="South" Header="false" Title="South">
<Content>
<div class="foot">
xxxx
</div>
</Content>
</ext:Panel>
<ext:TreePanel Icon="Application" Split="true" Collapsible="true" ID="treemenu" runat="server" Region="West" Title="导航" Width="175" RootVisible="false">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" ID="btnexpand" Text="展开">
<Listeners>
<Click Handler="#{treemenu}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button1" runat="server" Text="收缩">
<Listeners>
<Click Handler="#{treemenu}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>

<Store>
<ext:TreeStore runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="url"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:AjaxProxy Url="loadjsondata/def.ashx"></ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>
<View>
<ext:TreeView ID="TreeView1" runat="server" LoadMask="true" />
</View>

</ext:TreePanel>
<ext:TabPanel ID="tabpanel1" runat="server" Region="Center" ActiveTabIndex="0" Border="false">
<Items>
<ext:Panel runat="server" Closable="true" Title="首页">
<Items>
<ext:Label runat="server" Text="欢迎使用xxxx系统"></ext:Label>
</Items>
</ext:Panel>

</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>

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

Daniil
May 14, 2013, 6:35 AM
I see a mask covers the TreePanel when I run the test case.

Maybe, I misunderstand where you expect the mask to be appeared and at which moment.

A screenshot or/and a screen cast could clarify something.

hdsoso
May 14, 2013, 7:03 AM
I see a mask covers the TreePanel when I run the test case.

Maybe, I misunderstand where you expect the mask to be appeared and at which moment.

A screenshot or/and a screen cast could clarify something.
please see the attachment.
62106211

Daniil
May 14, 2013, 9:51 AM
I see the mask in the place where you want to see it.

What exactly Ext.NET version are you using?

Can you share a test case online to reproduce it?

hdsoso
May 15, 2013, 8:51 AM
hello Daniil?

Daniil
May 15, 2013, 9:48 AM
Hello. I am still awaiting any answers on the questions from my previous post. Thanks.

hdsoso
May 16, 2013, 12:05 AM
I see the mask in the place where you want to see it.

What exactly Ext.NET version are you using?

Can you share a test case online to reproduce it?

sorry,I did not notice your answer of next page.
online demo:
http://crm.hdsoso.com/index.aspx
name:aaaa
password:aaaa

EXT.NET version:2.2.0.40838

can you give me your test case?

hdsoso
May 16, 2013, 12:11 AM
front page


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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="images/style.css" rel="stylesheet" />
<title>客户关系系统</title>
<ext:XScript ID="XScript1" runat="server">
<script>
var addTab = function (tabPanel, id, url, txt) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id: id,
title: txt,
closable: true,
loader: {
url: url,
renderer: "frame",
loadMask: {
showMask: true,
msg: "正在打开 " + txt + "..."
}
}
});

}

tabPanel.setActiveTab(tab);
}
</script>
</ext:XScript>
</head>
<body>
<form id="form1" runat="server">

<ext:ResourceManager runat="server">
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Items>
<ext:Panel runat="server" Region="North" Title="north" Height="38" Header="false" Layout="HBoxLayout">
<Items>
<ext:Image runat="server" ImageUrl="~/images/logo.jpg" Width="215" Height="38">
</ext:Image>
<ext:Label runat="server" ID="l_weluser" StyleSpec="margin-top:9px;"></ext:Label>
<ext:Button Margins="0 0 0 10" runat="server" ID="btn_quit" TextAlign="Right" Icon="DoorOut" Text="退出" StyleSpec="margin-top:8px;">
<DirectEvents>
<Click OnEvent="quit_event">
<Confirmation Title="提示" Message="确实要退出吗?" ConfirmRequest="true"></Confirmation>
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Panel>
<ext:TreePanel ID="TreePanel1" runat="server" Region="West" RootVisible="false" Title="导航" Width="200" Collapsible="True" Split="True">
<View>
<ext:TreeView ID="TreeView1" runat="server" LoadMask="true" />
</View>

<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="展开">
<Listeners>
<Click Handler="#{TreePanel1}.expandAll();"></Click>
</Listeners>
</ext:Button>
<ext:Button ID="Button1" runat="server" Text="收缩">
<Listeners>
<Click Handler="#{TreePanel1}.collapseAll();"></Click>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:TreeStore runat="server">

<Proxy>
<ext:AjaxProxy Url="handlers/Handler_menu.ashx">
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="id"></ext:ModelField>
<ext:ModelField Name="text"></ext:ModelField>
<ext:ModelField Name="url"></ext:ModelField>
</Fields>
</ext:Model>
</Model>

</ext:TreeStore>
</Store>
<Listeners>
<ItemClick Handler="addTab(#{TabPanel1},record.data.id, record.data.url, record.data.text);"></ItemClick>

</Listeners>
</ext:TreePanel>


<ext:TabPanel runat="server" ID="TabPanel1" Layout="Fit" Region="Center" ActiveTabIndex="0" Border="false">
<Items>
<ext:Panel runat="server" Title="首页">
<Content>
<h2>欢迎使用客户关系系统</h2>

</Content>
</ext:Panel>

</Items>
</ext:TabPanel>

<ext:Panel ID="Panel1" runat="server" Collapsible="true" Height="30" Region="South" Header="false">
<Content>
<div class="foot">
客户关系系统 powered by <a href="http://hdsoso.com" target="_blank">hdsoso.com</a>
</div>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>

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

Baidaly
May 16, 2013, 1:10 AM
Hello!

I guess the problem is that server responds too fast to see how tree is loading. Try to put the following code in your Handler:



public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
string nodeId = context.Request["node"];

Thread.Sleep(1000);

if (!string.IsNullOrEmpty(nodeId))
{
NodeCollection nodes = new NodeCollection(false);

for (int i = 1; i < 6; i++)
{
Node asyncNode = new Node();
asyncNode.Text = nodeId + i;
asyncNode.NodeID = nodeId + i;
nodes.Add(asyncNode);
}

for (int i = 6; i < 11; i++)
{
Node node = new Node();
node.Text = nodeId + i;
node.NodeID = nodeId + i;
node.Leaf = true;
nodes.Add(node);
}

context.Response.Write(nodes.ToJson());
context.Response.End();
}
}

hdsoso
May 16, 2013, 2:32 AM
use in your ashx code.
there is loading round pic when I click one node or when I click "expand all" button,
but I want to show the loading mask in the location of root when page is load first , because there is no root in my aspx code , so no mask show.
when I remove

<View>
<ext:TreeView ID="TreeView1" runat="server" LoadMask="true" />
</View>

there is also loading mask when I click one node who has childds. the code above really works?

Baidaly
May 16, 2013, 2:54 AM
use in your ashx code.
there is loading round pic when I click one node or when I click "expand all" button,
but I want to show the loading mask in the location of root when page is load first , because there is no root in my aspx code , so no mask show.


Yes, you are right but in this case you should mask all TreeView. Can you clarify your requirements?



when I remove

<View>
<ext:TreeView ID="TreeView1" runat="server" LoadMask="true" />
</View>

there is also loading mask when I click one node who has childds. the code above really works?

It works with your page. However, can you put in ProcessRequest method in your handler the following


Thread.Sleep(2000); and say would you see the mask or not?

hdsoso
May 16, 2013, 4:02 AM
I email two video . please check your email support@object.net;

when I add


<BeforeLoad Handler="Ext.net.Mask.show();" />
<Load Handler="Ext.net.Mask.hide();" />

can show mask when page is load in the center of screen, I want to move this mask to the root of treepanel.
when remove code ,below , no mask show though add


<View>
<ext:TreeView ID="TreeView1" runat="server" LoadMask="true" />
</View>



public void ProcessRequest(HttpContext context)
{
Thread.Sleep(5000);
context.Response.ContentType = "text/json";
string json = buildjson(-1, null);
string str = "[" + json.Substring(0, json.Length - 1) + "]";
context.Response.Write(str);
context.Response.End();

}

geoffrey.mcgill
May 16, 2013, 4:09 AM
I email two video . please check your email support@object.net;

It would be best to post these videos online somewhere we can view. Youtube would be an option.

Daniil
May 16, 2013, 5:22 AM
Thank you for the online example.

There are two issues.

1. You, seems, didn't set up

<ext:TreeView ID="TreeView1" runat="server" LoadMask="true" />
because I can't see it in the Page Sources.

2. I see the following listeners for the TreePanel.

afterrender: {
fn: function (item) {
Ext.net.Mask.hide()
}
},
beforerender: {
fn: function (item) {
Ext.net.Mask.show()
}
}

It should be removed after setting LoadMask="true".

Moreover, I think the AfterRender listener causes the problem. It hides the mask too early. It fires when a TreePanel is rendered, not when its nodes are loaded.

Hope this helps.

hdsoso
May 16, 2013, 5:37 AM
please see
http://screencast.com/t/tHLyqAhiPj
http://screencast.com/t/3IbUaTprFtO2

hdsoso
May 16, 2013, 5:47 AM
there is no mask when page is loaded
I have remove the after and before render please see code below.


<ext:TreePanel Icon="Application" Split="true" Collapsible="true" ID="treemenu" runat="server" Region="West" Title="导航" Width="175" RootVisible="false">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" ID="btnexpand" Text="展开">
<Listeners>
<Click Handler="#{treemenu}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button1" runat="server" Text="收缩">
<Listeners>
<Click Handler="#{treemenu}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>

<Store>
<ext:TreeStore runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="url"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:AjaxProxy Url="loadjsondata/def.ashx"></ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>

<View>
<ext:TreeView ID="TreeView1" runat="server" LoadMask="true" />
</View>
<Listeners>
<ItemClick Handler="addTab(#{tabpanel1},record.data.id,record.data.tex t, record.data.url,record.data.leaf);" />

</Listeners>
</ext:TreePanel>



public void ProcessRequest(HttpContext context)
{
Thread.Sleep(5000);
context.Response.ContentType = "text/json";
string json = buildjson(-1, null);
string str = "[" + json.Substring(0, json.Length - 1) + "]";
context.Response.Write(str);
context.Response.End();

}
public string buildjson(int pid, StringBuilder sb)
{
List<Sys_Menu> ll = menusrvc.getMenuList(pid);
int n = ll.Count;
int i = 0;
foreach (var item in ll)
{

Sys_Menu sm = item;
if (sb == null)
{
sb = new StringBuilder();
}
sb.Append("{");
sb.Append("'id':'" + sm.id + "',");
sb.Append("'text':'" + sm.menuname + "',");
sb.Append("'url':'" + sm.menuurl + "'");
if (!menusrvc.isLeaf(sm.id))
{
sb.Append(",");
sb.Append("'expanded':true,");
sb.Append("children:[");
buildjson(sm.id, sb);
sb.Append("]");
sb.Append("},");

}
else
{
i = i + 1;
sb.Append(",'leaf':true");
if (i != n)
{
sb.Append("},");
}
else
{
sb.Append("}");
}
}
}

return sb.ToString();
}

video
http://screencast.com/t/5IuyggHSmc5

Daniil
May 16, 2013, 6:08 AM
I took that TreePanel, replaced the ASHX with another one (because your one throws errors for me due to it can find some namespaces) and I see the mask.

So, could you share that example online?

hdsoso
May 16, 2013, 7:21 AM
I took that TreePanel, replaced the ASHX with another one (because your one throws errors for me due to it can find some namespaces) and I see the mask.

So, could you share that example online?

thank for your patience.

I wrote a demo page , below is code


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

<!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>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server"></ext:ResourceManager>
<ext:TreePanel Icon="Application" Split="true" Collapsible="true" ID="treemenu" runat="server" Region="West" Title="导航" Width="175" RootVisible="false">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button runat="server" ID="btnexpand" Text="展开">
<Listeners>
<Click Handler="#{treemenu}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button1" runat="server" Text="收缩">
<Listeners>
<Click Handler="#{treemenu}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>

<Store>
<ext:TreeStore ID="TreeStore1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="url"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:AjaxProxy Url="treedemo.ashx"></ext:AjaxProxy>
</Proxy>
</ext:TreeStore>
</Store>

<View>
<ext:TreeView ID="TreeView1" runat="server" LoadMask="true" />
</View>

</ext:TreePanel>
</form>
</body>
</html>



ashx code:


using Ext.Net;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web;

namespace TobrosCWT
{
/// <summary>
/// treedemo1 的摘要说明
/// </summary>
public class treedemo1 : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
string nodeId = context.Request["node"];

Thread.Sleep(5000);

if (!string.IsNullOrEmpty(nodeId))
{
NodeCollection nodes = new NodeCollection(false);

for (int i = 1; i < 6; i++)
{
Node asyncNode = new Node();
asyncNode.Text = nodeId + i;
asyncNode.NodeID = nodeId + i;
nodes.Add(asyncNode);
}

for (int i = 6; i < 11; i++)
{
Node node = new Node();
node.Text = nodeId + i;
node.NodeID = nodeId + i;
node.Leaf = true;
nodes.Add(node);
}

context.Response.Write(nodes.ToJson());
context.Response.End();
}
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

there is no mask when page is open
video :http://screencast.com/t/IVr05akeiSc

Daniil
May 16, 2013, 10:34 AM
Ok, I tested your example with the Ext.NET v2.2 release and with the latest Ext.NET sources from the SVN trunk, in Chrome, FireFox and IE9.

A mask appears for me in all the cases.

Though, there is an issue with your test case.

<ext:AjaxProxy Url="treedemo.ashx">
but

public class treedemo1 : IHttpHandler

"treedemo" mismatches "treedemo1". I had to correct it to get your sample runnable.

It makes me to feel that we are testing some different samples all the time.

You provided us with an online sample. I explained why there is no mask. Could you update the online test case?

hdsoso
May 17, 2013, 1:10 AM
Ok, I tested your example with the Ext.NET v2.2 release and with the latest Ext.NET sources from the SVN trunk, in Chrome, FireFox and IE9.

A mask appears for me in all the cases.

Though, there is an issue with your test case.

<ext:AjaxProxy Url="treedemo.ashx">
but

public class treedemo1 : IHttpHandler

"treedemo" mismatches "treedemo1". I had to correct it to get your sample runnable.

It makes me to feel that we are testing some different samples all the time.

You provided us with an online sample. I explained why there is no mask. Could you update the online test case?


because treedemo.aspx and treedemo.ashx are save name "treedemo" so vs rename treedemo to treedemo1 ,
the demo use ext.net version 2.1.1.18167. I think it is the issue.

hdsoso
May 17, 2013, 2:16 AM
I confirm that is version issue. it is my mistake that I develop on two computer using different ext.net verson.
I update ext.net version to 2.2, now it works fine.