2010-08-24 28 views
1

前一段时间,我开始ExtJS的图书馆学习,现在我想创建如下:更新内容在其他窗口的ExtJS

有一个浏览器窗口,它是verticaly分离。
在左边有一个TreePanel,其目录和子目录(只有2级深)。
右侧会显示所选子目录内容的输出。

我已经完成了界面部分,但是当用户点击左侧的子目录时,我不知道如何更改右侧的内容。我可以使用Ext.Ajax.request发出请求,但我不知道如何触发右侧内容的更新。

顺便说一句。正如我提到的左侧是TreePanel,右侧是GripPanel,他们在Viewport中使用xtype:'panel',但我不认为这是不适合这个问题的。

有什么建议吗?

回答

1

首先,你需要注册的用户选择在TreePanel中节点的事实,这可以通过以下方式进行:

yourtreepanel.getSelectionModel().on('selectionchange', whattodonext); 

其中“yourtreepanel”是你的TreePanel中的名称(如果TreePanel中是分配给变量,否则使用Ext.getCmp('yourtreepanel')。getSelecti ....)和'whattodonext'是当用户选择节点时要调用的函数的名称。

函数“whattodonext”会再看看这样的:

function whattodonext(){ 
     node=yourtreepanel.selModel.selNode; 
     if(node){ 
      if(node.isLeaf()){ 
// this works out what you want to do if the user has selected a valid leaf node 


      }else{ 
// otherwise...put anything you wish to happen here (i.e. if a folder has been selected) 

      } 

     } 
    } 

接下来的部分是更新面板与内容的权利(如果它被称为“mycontentpanel”)。之所以这样说,内容应从“mycontent.html”被加载,在节与

// this works out what you want to do if the user has selected a valid leaf node 

你会把代码:

mycontentpanel.load({ 
url: 'mycontent.html', 
params: { 
yourparam1:'param1value', 
yourparam2:'param2value' 
}, 
nocache: true, 
timeout: 30 
}); 

而这就是它!

您可以使用参数选项发送您可能拥有的将决定提供哪些内容的任何特定POST参数。

不要忘记,如果你运行的困难,请尝试使用Ext.getCmp(“对象名”)引用的对象,而不是仅仅“objectname'.operation ....

祝你好运!