Extjs mvc

MVC的模式,模型(Models)和控制器(Controllers)

Model模型 是字段和它们的数据的集合,例如User模型带有username和password字段,模型知道如何持久化自己的数据,并且可以和其他模型关联,模型跟ExtJS 3 中的Record类有点像(区别是,Record只是单纯的扁平结构,而Model可以nest),通常都用在Store中去展示grid和其他组件的数据

View视图 是组件的一种,专注于界面展示 - grid, tree, panel 都是view

Controllers控制器 一个安放所有使你的app正确工作的代码的位置,具体一点应该是所有动作,例如如何渲染view,如何初始化model,和app的其他逻辑

目录结构如下图所示:

index.html 文件如下:

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title></title>
     <link rel="stylesheet" href="../resources/css/ext-all.css">
     <script type="text/javascript " src="../bootstrap.js"></script>
     <script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>

Ext.app.application

代表整个应用

Ext.container.Viewport

       Viewport渲染自身到网页的documet body区域, 并自动将自己调整到适合浏 览器窗口的大小,

在窗口大小发生改变时自动适应大小,

继承于 :Ext.Component

app.js 文件如下:

Ext.application({
//  动态加载 这个类。
     requires: ['Ext.container.Viewport'],
// 这个应用的名字。
     name: 'FWY',
// 应用程序的路径
     appFolder: 'app',
// 应用程序控制器名称
     controllers: ['Students'],
       // 页面 装载完成后自动调用。
     launch: function () {
 Ext.create('Ext.container.Viewport',{
//  布局
             layou:'fit',
             items: [{
                 xtype: 'studentlist'
             }]
         })
     }
});

View 定义一个视图。

Ext.define('FWY.view.student.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.studentlist',
    store: 'Students',
    title: '学生信息列表',
    initComponent: function () {
        this.columns = [
            {header: '编号', dataIndex: 'id', flex:1},
            {header: '姓名', dataIndex: 'name', flex:1},
            {header: '年龄', dataIndex: 'age', flex:1},
            {header: '性别', dataIndex: 'sex', flex:1}
        ];
        this.callParent(arguments);
    }
});

创建一个model 文件

Ext.define('FWY.view.student.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.studentlist',
    store: 'Students',
    title: '学生信息列表',
    initComponent: function () {
        this.columns = [
            {header: '编号', dataIndex: 'id', flex:1},
            {header: '姓名', dataIndex: 'name', flex:1},
            {header: '年龄', dataIndex: 'age', flex:1},
            {header: '性别', dataIndex: 'sex', flex:1}
        ];
        this.callParent(arguments);
    }
});

controller  层 创建文件

Ext.define('FWY.controller.Students', {
    extend: 'Ext.app.Controller',
    views: [
        'student.List',
        'student.Edit'
    ],
    stores: ['Students'],
    models: ['Students'],
    init: function () {
        this.control({
            'studentlist': {
                itemdblclick: this.editStudent
            },
            'studentedit button[action = save]' : {
                click: this.updateStudent
            }
        });
    },
    onPanelRendered:function() {
        console.log("panel rendered!");
    },
    updateStudent: function(button) {
 // 获取window 下面的 下面的 按钮, 提交。
 var win = button.up('window'),
           form = win.down('form'),
           record = form.getReader()
    },
    editStudent: function (grid,record) {
 //  通过别名获得这个组件
 var view = Ext.widget('studentedit');
 // 这个对象向下查找 form 组件,自动赋值
 view.down('form').loadRecord(record);
    }
});

store 创建文件。

Ext.define('FWY.store.Students',{
    extend: 'Ext.data.Store',
    model:'FWY.model.Students',
    data: [
        {id:1,name:'zhangsan', age:18,sex:'boy'},
        {id:2,name:'lisi', age:20,sex:'gril'}
    ]
});

demo 下载 https://github.com/ningmengxs/Extjs.git

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java爬坑系列

【SpringMVC】使用Myeclipse创建SpringMVC项目【超详细教程】

  之前一直是使用Eclipse创建Web项目,用IDEA和MyEclipse的创建SpringMVC项目的时候时不时会遇到一些问题,这里把这个过程记录一下,希...

339100
来自专栏葡萄城控件技术团队

用FlexGrid做开发,轻松处理百万级表格数据

表格数据处理是我们项目开发中经常会遇到的设计需求之一,所需处理的数据量也较大,通常是万级、甚至百万级。此时,完全依赖平台自带的表格工具,往往无法加载如此大的数据...

26480
来自专栏葡萄城控件技术团队

自学MVC看这里——全网最全ASP.NET MVC 教程汇总

MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC。小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想要学习ASP.NET MVC...

1.5K70
来自专栏Java技术分享

SSM三大框架整合详细总结(Spring+SpringMVC+MyBatis)

使用 SSM ( Spring 、 SpringMVC 和 Mybatis )已经很久了,项目在技术上已经没有什么难点了,基于现有的技术就可以实现想要的功能,当...

2.3K130
来自专栏葡萄城控件技术团队

【初学者指南】在ASP.NET MVC 5中创建GridView

介绍 在这篇文章中,我们将会学习如何在 ASP.NET MVC 中创建一个 gridview,就像 ASP.NET Web 表单中的 gridview 一样。服...

43790

ASP.NET MVC 6路由技术

在我们开始学习路由的自定义之前,先看一下MVC6较之于MVC5(在路由配置方面)有哪些变化。 ASP.NET MVC6将所有应用程序所必要的启动服务以及其所定义...

31350
来自专栏web前端

backbone 整体架构学习

一、是什么     构建前端MVC(Model,View,Collection)模型的框架,其中Model是数据模型,Collection是数据模型的集合,Vi...

22480
来自专栏葡萄城控件技术团队

在ASP.NET MVC5中实现具有服务器端过滤、排序和分页的GridView

背景 在前一篇文章《【初学者指南】在ASP.NET MVC 5中创建GridView》中,我们学习了如何在 ASP.NET MVC 中实现 GridView,类...

30280
来自专栏葡萄城控件技术团队

七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC

? 系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据...

50250
来自专栏智能大石头

魔方NewLife.Cube升级v2.0

 魔方是一套集成权限管理的MVC管理后台,最具特色功能是模版覆盖机制,是XCode实体类的最佳搭档! v2.0.2017.1126   借助Ajax支持高级操作...

23390

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励