正文讲述extjs
mvc的Helloworld,tabPanel,event,页面布局layout等内容。

本页包蕴:MVC形式案例(一)~MVC情势案例(6),从搭建extjs
mvc到点击开关生成tab页,事件点击

正文代码地点:http://download.csdn.net/download/xiaoliu123586/10156915

代码应用idea展开就能够,如果在windows下直接用浏览器展开index.html,加载data.json树文件会找不到,必须在某服务器里张开或然只怕idea展开,

访问url类似:

而不是  file:///C:/Users/Mike/Desktop/extdemo/index.html

MVC方式案例(1)

快要达成网页的布局有三某些构成:顶部标题、左边菜单和左边手宗旨内容呈现。这里大家对案例的布局有个伊始印象,方便今后大家的一发读书。

打听了花色的末尾效果,上面来看一下该案例最后的文书结构:

            永利开户送38元体验金 1

文件结构能够见见,在全路项目中,app文件夹是咱们的严重性专门的学问目录,个中带有:controller(调控器)、model(数据模型)、store(数据集)、view(视图)。此外还有server文件夹,其重大目的是顶替后台服务器为项目提供数据。那些内容大家就要后来的稿子中逐年讲明,今日大家来看一下index.html和app.js那多少个文件。
index.html文件代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ExtJS学习:MVC模式案例</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../extjs/examples/shared/example.css" />
<script type="text/javascript" src="../extjs/bootstrap.js"></script>
<script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<iframe id='contentIframe' name='contentIframe' style='height:100%;width:100%' frameborder="no"></iframe>
</body>
</html>

这么些文件重大的目标正是对ExtJS框架文件的引用,这里大家不做过多的介绍。
app.js文件代码:

Ext.onReady(function(){
    //开启悬浮提示功能
    Ext.QuickTips.init();
    //开启动态加载
    Ext.Loader.setConfig({
        enabled: true
    });
    //创建应用程序的实例
    Ext.application({
        //设定命名空间
        name: 'Demo',
        //指定配置选项,设置相应的路径
        appFolder: 'app',
        //加载控制器
        controllers: ['demoController'],
        //自动加载和实例化Viewport文件
        autoCreateViewport: true
    });
});

 app.js文件能够作为是对我们任何项指标大局设置,其中大家需求注意的有:
     
 (一)Ext.Loader.setConfig帮大家展开了机关加载的功用,这一个效果私下认可是不打开的,须求大家手动开启,不然以往开辟的累累文件都会找不到,报错。

  (二)name:
‘德姆o’给品种分明了二个命名空间,它将作为一个全局变量应用于任何项目中,援助大家识别属于本项目标利用文本。
       (三)appFolder: ‘app’那些布局项,帮大家钦赐到app文件夹中。

MVC情势案例(2)

ExtjS框架怎么利用MVC格局对代码举行布局。
      到如今结束我们现存的文书只有根目录下的index.html和app.js七个公文,不享有其余的实际意义。上边大家开始开始创设我们的品种,让它能够实实在在的表今后大家的浏览器中。首先,大家在根目录下开创app文件夹,然后在app文件夹下创制controller和view四个文本夹,分别寄存我们的调节器文件和视图像和文字件。

定义ViewPort

      VeiwPort代表全体浏览器呈现区域,该对象渲染到页面的body区域,并会趁机浏览器彰显区域的大大小小活动退换,叁个页面中只可以有3个ViewPort
实例。上边大家在view文件夹中创制Viewport.js文件,然后增加如下代码:

Ext.define('Demo.view.Viewport', {
    extend: 'Ext.container.Viewport',
    //布局方式:border
    layout: 'border',
    items: [{
        title:'ExtJS案例',
        collapisble: true,
        region:'north',
        height: 100,
        html: '<br><center><font size=5>MVC模式实现的ExtJS案例</font><br><font size=2>源码来源:ITLee博客</font></center>'
    },{
        title: '功能菜单',
        region: 'west',
        width: 180,
        split: true,
        collapisble: true,
        html:'这里是菜单部分'
    }, {
        id: 'mainContent',
        title: '主题内容显示',
        layout: 'fit',
        region: 'center',
        collapisble: true,
        contentEl: 'contentIframe'
    }]
});

 在Viewport中咱们用border的布局格局将全体网页分为多个部分:尾部(north)、左部(west)、主题部分(center)。

概念叁个调节器

      调节器是一体应用程序的重大,他承受监听事件,并对一些时刻做出相应的动作。现在大家在controller文件夹下创造二个调整器,命名字为demoController.js(这里的命名应该与app.js文件中加载的调整器名称1致),然后大家为该公文增多以下代码: 

Ext.define('Demo.controller.demoController', {
    extend: 'Ext.app.Controller',
        //将Viewport.js添加到控制器
    views: ['Viewport']
});

在调节器中我们通过views配置项,将所需视图加载到调控器中。现在大家透过浏览器就可以对项目开始展览查看了,查看效果如下: 

永利开户送38元体验金 2

由来,大家对网页的布局即便是落成了,希望对我们全体辅助。下1讲大家将执教树形菜单的兑现。

MVC情势案例(三)

 

接下去,大家在view文件夹中加多多少个mentTree.js文件,用来作为树形菜单组件。为该文件增加以下代码:

Ext.define('Demo.view.menuTree', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.menutree',
    border: false,
    //规定锚链接地址的显示区域
    hrefTarget: 'mainContent',
    //是否显示根节点
    rootVisible: false,
    //数据集
    store: 'menuStore',
    //菜单样式
    bodyStyle: {
        background: '#ffc',
        padding: '10px'
    }
});

这么大家就创设了3个菜单的组件,不过,未来大家的菜系还不能够健康专业,因为菜单中还未有填写数据。ExtJS肆中我们用单独的贰个文本来成立数据模型和数据集,在制造数量集前大家第3创制数据模型。在app文件夹下创立model文件夹,并且在该公文夹下创设menuModel.js文件,为该文件增多以下代码:

Ext.define('Demo.model.menuModel', {
    extend: 'Ext.data.Model',
    fields:[
        {name:'id', type:'int'},
        {name:'pid', type:'int'},
        {name:'text', type:'varchar'},
        //type为布尔型时,后面的默认值是必须写的,要不会出错
        {name:'leaf', type:'boolean', defaultValue: true},
        {name: 'url', type:'varchar'}
    ]
});

有了数据模型,接下去大家创造store文件夹,以及在该公文夹下创制menuStore.js文件,加多下边包车型大巴代码:

Ext.define("Demo.store.menuStore",{
    extend:'Ext.data.TreeStore',
    defaultRoodId:'root',
    //requires: 'Demo.model.menuModel',//我加了这两行,会报错
    //model: 'Demo.model.menuModel',
    proxy:{
        type:'ajax',
        url:'./server/data.json',
        reader:'json',
        autoLoad:true
    }
});

数据集和数据模型都有了,那么大家怎么给菜单添增加少吧?一般景况下,菜单所需的多少都以有后台服务器提供,因为大家这边最主要批注ExtJS的文化,尽量不去涉及后端的事物,我们能够用json格式模拟后台数据输出。将来,咱们在根目录下创办server文件夹,在该文件夹下成立二个data.json的文本用来为前端提供数据:

[
    {"id":"2",
    "pid":"1",
    "text":"用户管理",
    "leaf":"0",
    "url":"http:\/\/www.lihuai.net",
    "children":[{
        "id":"5",
        "pid":"2",
        "text":"基本信息",
        "leaf":"1",
        "url":"http:\/\/www.sogou.com",
        "children":""},{
        "id":"11",
        "pid":"2",
        "text":"信息管理",
        "leaf":"1",
        "url":"http:\/\/www.sogou.com",
        "children":""},{
        "id":"12",
        "pid":"2",
        "text":"添加用户",
        "leaf":"1",
        "url":"http:\/\/www.sogou.com",
        "children":""}]},
    {"id":"3",
    "pid":"1",
    "text":"产品管理",
    "leaf":"0",
    "url":"http:\/\/www.so.com",
    "children":[{
        "id":"7",
        "pid":"3",
        "text":"产品信息",
        "leaf":"1",
        "url":"http:\/\/www.so.com",
        "children":""},{
        "id":"8",
        "pid":"3",
        "text":"产品添加",
        "leaf":"1",
        "url":"http:\/\/www.so.com",
        "children":""}]}
]

为了简单起见,每一个节点的url地址我们用简易的网页取代。万事俱备,只差加载了。那么,怎么能力将大家写好的菜单组件加载到我们的档案的次序中呢?
      首先,修改大家的Viewport.js文件,将菜单组件增多到整个视图中,修改后的代码如下:

Ext.define('Demo.view.Viewport', {
    extend: 'Ext.container.Viewport',
    //布局方式
    layout: 'border',
    items: [{
        title:'ExtJS案例',
        collapisble: true,
        region:'north',
        height: 100,
        html: '<br><center><font size=5>MVC模式实现的ExtJS案例</font><br><font size=2>源码来源:ITLee博客</font></center>'
    },{
        title: '功能菜单',
        region: 'west',
        width: 180,
        split: true,
        collapisble: true,
                //这里是修改的部分
        items:[{
            xtype: 'menutree'
        }]
    }, {
        id: 'mainContent',
        title: '主题内容显示',
        layout: 'fit',
        region: 'center',
        collapisble: true,
        contentEl: 'contentIframe'
    }]
});

 

接下去,修改demoController.js文件,完结对菜单组件的加载,修改后的代码:

Ext.define('Demo.controller.demoController', {
    extend: 'Ext.app.Controller',
    views: ['Viewport','menuTree'],
    stores: ['menuStore'],
    model: ['menuModel']
});

近来,用浏览器查看我们的案例,右边已经呈现出菜单栏了,效果如下图:

永利开户送38元体验金 3

 

当大家点击树形节点的时候,开采左边主旨部分并不曾显得网页内容,那是因为我们还未曾为节点增加监听事件的缘故。具体什么加多切换页面包车型大巴效应,下一讲大家将会详细讲授。

MVC形式案例(4)

咱俩着力落到实处了MVC格局布局ExtJS项目标指标,并且在浏览器中也得以看来最为常见的网页布局结构。然而,作为WEB开垦者,并不是能够完结网页布局就到底完结职务了,大家还亟需完结自然的效力。在那一讲中,大家将贯彻当点击ExtJS菜单节点的时候,网页大旨部分显得相呼应的剧情。
                  

本讲大家不会增多新的文件,只是对本来的文件实行改变就能够。后边我们说过,调节器的最重要成效是监听事件,调控逻辑。所以,大家前些天第叁修改demoController.js这些文件,为大家的档期的顺序增多切换页面包车型地铁成效。

demoController.js文件代码:

累加对menuTree组件的鼠标点击事件开始展览监听,修改后的代码:

Ext.define('Demo.controller.demoController', {
    extend:'Ext.app.Controller',
    views: ['Viewport','menuTree'],
    stores: ['menuStore'],
    model: ['menuModel'],
    //通过init函数来监听视图事件,控制视图与控制器的交互
    init:function() {
        //init函数通过this.control来负责监听
        this.control({
            //被监听的组件的别名
            'menutree': {
                //监听鼠标点击事件,点击后调用changePage方法
                itemclick:this.changePage,
            }
        });
    },
    changePage:function(){
        alert('success');
    }
});

  

      刷新页面,点击菜单几点,弹出success表达大家监听事件成功。上面大家后续修改changePage方法,实现对宗旨内容部分页面包车型地铁切换作用。

changePage:function(view, rec, item, index, e){
            //获取url地址
            var url = rec.get('url');
            //获取当前节点信息
            var title = rec.get('text');
            //将主体内容部分的url地址指定为我们获取到的url
            Ext.getDom('contentIframe').src = url;
            //将主体内容框的标题设置为我们获取的节点信息
            Ext.getCmp('mainContent').setTitle(title);
        }

 

      通过对changePage方法的修改,刷新页面,当我们再一次点击节点的时候,左侧主体内容部分将展现对应url的页面新闻,旗开得胜。

MVC情势案例(伍)

 要贯彻右键菜单的效益,首先我们要求丰盛3个美食指南组件,在view文件夹中新建contextMenu.js文件,该文件中增多以下代码:

Ext.define('Demo.view.contextMenu', {
    extend: 'Ext.menu.Menu',
    alias: 'widget.contextmenu',
    float: true,
    items: [{
        xtype: 'button',
        text: '添加',
        action: 'add',
        iconCls: 'leaf'
    }, {
        xtype: 'button',
        text: '删除',
        action: 'del',
        iconCls: 'leaf'
    }, {
        xtype: 'button',
        text: '编辑',
        action: 'edit',
        iconCls: 'leaf'
    }]
});

 

      正如我们前面所说的,增多组件后须要在调整器中开始展览加载,否则ExtJS的活动加运载飞机制将不能够找到大家的文书,上面修改demoController.js文件的view配置项,修改后的代码如下:

Ext.define('Demo.controller.demoController', {
    extend: 'Ext.app.Controller',
        //这次的修改在这里,给view配置项添加“contextMenu”
    views: ['Viewport','menuTree','contextMenu'],
    stores: ['menuStore'],
    model: ['menuModel'],
    //通过init函数来监听视图事件,控制视图与控制器的交互
    init: function() {
        //init函数通过this.control来负责监听
        this.control({
            //被监听的组件的别名
            'menutree': {
                //监听鼠标点击事件,点击后调用changePage方法
                itemclick: this.changePage,
            }
        });
    },
    changePage:function(view, rec, item, index, e){
        //获取url地址
        var url = rec.get('url');
        //获取当前节点信息
        var title = rec.get('text');
        //将主体内容部分的url地址指定为我们获取到的url
        Ext.getDom('contentIframe').src = url;
        //将主体内容框的标题设置为我们获取的节点信息
        Ext.getCmp('mainContent').setTitle(title);
    }
});

 

      做完以上工作后,接下去正是为我们的menuTree组件增多右键监听事件了,修改调控器文件demoController.js:

Ext.define('Demo.controller.demoController', {
    extend: 'Ext.app.Controller',
    views: ['Viewport','menuTree','contextMenu'],
    stores: ['menuStore'],
    model: ['menuModel'],
    //通过init函数来监听视图事件,控制视图与控制器的交互
    init: function() {
        //init函数通过this.control来负责监听
        this.control({
            //被监听的组件的别名
            'menutree': {
                //监听鼠标点击事件,点击后调用changePage方法
                itemclick: this.changePage,
                //监听鼠标右键事件,点击后调用contextMenu方法
                itemcontextmenu: this.contextMenu
            }
        });
    },
    //页面切换方法
    changePage:function(view, rec, item, index, e){
        //获取url地址
        var url = rec.get('url');
        //获取当前节点信息
        var title = rec.get('text');
        //将主体内容部分的url地址指定为我们获取到的url
        Ext.getDom('contentIframe').src = url;
        //将主体内容框的标题设置为我们获取的节点信息
        Ext.getCmp('mainContent').setTitle(title);
    },
    //显示右键菜单方法
    contextMenu:function(tree, record, item, index, e, eOpts){
        //阻止浏览器默认右键事件
        e.preventDefault();
        e.stopEvent();
        //显示右键菜单
        var view = Ext.widget('contextmenu');
        view.showAt(e.getXY());
    }
});

      在demoController.js文件中增添以上代码后,刷新页面,在菜单节点上点击右键,看到如下效果图:

            永利开户送38元体验金 4

 现在,我们凡事案例教程就停止了,尽管还有不少功效没完成,若是后续扩展的话,怕是世代也讲不完了,呵呵,首要目标只怕为ExtJS的新手们起七个指导的效果,希望对大家享有帮助。

 

 

永利开户送38元体验金,MVC形式案例(陆)

如上代码的场地下,改成点击菜单,生成tab的动静

修改demoController的changePage方法

changePage:function(view, rec, item, index, e){
        var title = rec.get('text');
        var leaf = rec.get('leaf');
        var tabPanel = Ext.getCmp('mainContent');
        //子节点才能打开,父节点不设置响应
        if(leaf==false){
            return;
        }
        //以title值设置为tab的id,打开时,有就使tab active,无则新建tab
        var newTab = tabPanel.getChildByElement(title);
        if (newTab == null) {
            tabPanel.add({
                id: title,
                title: title,
                html: '当前页面是 ' + title + '<br/><br/>',
                closable: true
            });
        }
        tabPanel.setActiveTab(title);
    }

 

ViewPort.js里center布局的有个别,退换如下

{
        region: 'center',
        id: 'mainContent',
        xtype:'tabpanel',
        title: '主题内容显示',
        layout: 'fit',
        collapisble: true
    }

  此时,data.json的id和pid属性能够去掉了(没动用到了)

data.json:

永利开户送38元体验金 5永利开户送38元体验金 6

[
  {
    "text":"用户管理",
    "leaf":"false",
    "url":"http://www.lihuai.net",
    "children":[
      {
      "text":"基本信息",
      "leaf":"true",
      "url":"http://www.sogou.com",
      "children":""
    },
      {
      "text":"信息管理",
      "leaf":"true",
      "url":"http://www.sogou.com",
      "children":""
      },
      {
      "text":"添加用户",
      "leaf":"true",
      "url":"http://www.sogou.com",
      "children":""
      }]},
  {
    "text":"产品管理",
    "leaf":"false",
    "url":"http://www.so.com",
    "children":[
      {
      "text":"产品信息",
      "leaf":"true",
      "url":"http://www.so.com",
      "children":""
      },
      {
      "text":"产品添加",
      "leaf":"true",
      "url":"http://www.so.com",
      "children":""
      }]}
]

View Code

永利开户送38元体验金 7

 

只顾,假诺需求树哪个节点私下认可展开,就在节点下安顿”expanded:true” ,即修改data.json文件

永利开户送38元体验金 8

 

 

 ======================================================================================================================

参考自:

有略微修正。

 

转眼间是局地私有实际代码的贴出

Ext基本引进文件如下:

<script type="text/javascript" src="ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext/theme-crisp/resources/theme-crisp-all.css" />

永利开户送38元体验金 9

 

相关文章