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 条评论
登录 后参与评论

相关文章

  • extjs 基础部分

    创建对象的方法:     使用new 关键字创建对象。       new  classname ([config])     使用Ext.create方法创建...

    用户1197315
  • Extjs grid 组件

    表格面板类Ext.grid.Panel 重要的配置参数 columns : Array 列模式(Ext.grid.column.Columnxtype: gr...

    用户1197315
  • Angularjs基础(十二)

    ng-model-options       描述:规定如何更新模型             实例: 在失去焦点时绑定输入框的值scope 变量中。 ...

    用户1197315
  • 用MobX管理状态(ES5实例描述)-3.常用API

    除了上面提过的在类实例里使用 getter/setter 和 computed(), computed(expression)也可以直接用来当作一个独立的函数:

    江米小枣
  • 零基础VB教程062期:常用数学函数第二节 弧度、进制转换、hex/oct/round/fix/sqr等

    Exp反对数, e(自然对数的底)的某次方,常数数e的值大约是2.718282

    刘金玉编程
  • RxJava高级进阶--lift操作符

    之前几篇文章是在为这篇文章作铺垫。关于RxJava的核心思想其实可以说就在于 lift() 。

    PhoenixZheng
  • 【云开发校园技术布道师】云笔记小程序

    我们平时听课、开会、学习都会记录一些重要的知识,这个时候我们要是手写记录的话,速度有可能会跟不上,有时还会错过重要的知识点。很多时候讲师都是使用ppt授课,这个...

    城南旧事
  • 数据挖掘实践指南读书笔记2

    本书涉及的源程序和数据都可以在以下网站中找到:http://guidetodatamining.com/ 这本书理论比较简单,书中错误较少,动手锻炼较多,如果每...

    公众号---人生代码
  • 面试:JVM 垃圾回收器

    我们都知道java的默认垃圾回收器是jdk1.8 默认垃圾收集器Parallel Scavenge(新生代)+Parallel Old(老年代),但是一般我们都...

    黑白格
  • 同步时钟电路设计及其与异步时钟信号交互的问题

    所谓同步电路,即电路中的所有受时钟控制的单元,如触发器( Flip Flop)或寄存器( register)都由一个统一的全局时钟控制。如图 1...

    碎碎思

扫码关注云+社区

领取腾讯云代金券