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）保存运行，点击菜单中部视图将切换到正确的页面，如下图