EXTJS4.x之实战项目（3）菜单控制器MenuPanelController

上次我们完成了菜单界面的制作。接下来来我们来做响应事件。

1.添加Conroller，如下图添加一个Controller

设置userClassName为MenuPanelController

添加四个函数（Functions），添加方法如下图

init无参数；

getTab参数为 viewName;

onItemClick参数为 view,record,item,index,e,eOpts

openTab参数为 panel,id

2.为MenuPanelController添加view如下图

3.编写MenuPanelController的init函数

在init函数中进行事件的绑定，打开init函数编辑界面输入以下内容

this.control(
    {
        'BaseContentManager':
        {
            itemclick:this.onItemClick
        },
        'SectionManager':
        {
            itemclick:this.onItemClick
        }
    }
);

如下图

分别设置BaseContentManager和SectionManager的userAlias为BaseContentManager和SectionManager。

编辑onItemClick函数，输入以下内容

alert(record.get('text'));

此时运行一下，效果如下图所示：

此时的菜单点击事件可以正常响应到。

4.根据点击的内容创建内容在中间容器显示

这部分比较复杂：

1）修改onItemClick函数内容为：

if(record.get('leaf')){
    var panel = Ext.getCmp(record.get('id')); 
    if(!panel)
    { 
        panel =
        { 
            title: record.get('text'), 
            iconCls: 'tabs', 
            items:[this.getTab(record.get('view'))], 
            closable: true 
        };
        this.openTab(panel,record.get('id'));
    }else{
        var main = Ext.getCmp("CenterTabPanel");
        main.setActiveTab(panel); 
    }
}

代码的作用是获取点击的id，通过id查找panel，如果存在则激活，如果不存在则通过view属性的值创建panel。

2）编辑getTab函数内容为：

var pnContent = Ext.create(viewName, {});
//debugger;
try{
    pnContent.getStore().reload();
}catch (e) {

}finally{
    return pnContent;
}

代码作用为创建panel并加载数据源

3）编写openTab函数内容为：

var o = (typeof panel == "string" ? panel : id || panel.id);
var main = Ext.getCmp("CenterTabPanel");
var tab = main.child('panel[id='+o+']');      
if (tab) 
{
    main.setActiveTab(tab); 
} 
else if(typeof panel!="string")
{ 
    panel.id = o; 
    var p = main.add(panel);
    //alert(main.getXTypes());
    main.setActiveTab(p); 
} 

代码作用是激活窗口

4）创建ArticleGridPanel, MediaGridPanel,SectionGridPanel,SectionContentGridPanel四个GridPanel视图。步骤是拖动一个GridPanel到工作空间的views分组下。设置属性userClass和title，删除width和height属性

userClass分别设置为：ArticleGridPanel, MediaGridPanel,SectionGridPanel,SectionContentGridPanel

userAlias分别设置为：ArticleGridPanel, MediaGridPanel,SectionGridPanel,SectionContentGridPanel

title分别为：文章资源管理，媒体资源管理，栏目管理，栏目内容管理；

整个工程如下图所示

5）删除CenterTabPanel中的默认tabPanel,结果如下图

6）保存运行，点击菜单中部视图将切换到正确的页面，如下图