extJs学习基础5 理解mvvm的一个小案例

今天很是幸运,看到了一位大神的博客,学习了不少的东西。太感谢了.(满满的都是爱啊)

建议去学习这个大神的博客,真心不错。

博客地址:http://blog.csdn.net/column/details/extjs5.html?&page=1

首先要建立一个简单的项目,我是使用的 Sencha Architect 3自动生成的

app下面的文件

在视图文件中建立

MyViwepost.js (view文件中)

 1 Ext.define(‘MyApp.view.MyViewport‘, {
 2     extend: ‘Ext.container.Viewport‘,
 3     alias: ‘widget.myviewport‘,
 4
 5     requires: [
 6         ‘MyApp.view.MyViewportViewModel‘,
 7         ‘MyApp.view.MyViewportViewController‘,
 8         ‘Ext.panel.Panel‘,
 9         ‘Ext.button.Button‘
10     ],
11
12     controller: ‘myviewport‘,  // 设置会找到 MyViewportViewController.js
13     viewModel: {
14         type: ‘myviewport‘     // 找到 MyViewportViewModel.js
15     },
16     padding: 12,
17     layout: ‘fit‘,
18
19     items: [
20         {
21             xtype: ‘panel‘,
22             //设置此配置选项添加或删除数据绑定其他配置
23             bind: {           //这里的 name和model中对应
24                 title: ‘{name}‘,
25             },
26
27             items: [
28                 {
29                     xtype: ‘button‘,
30                     text: ‘测试 控制器‘,              //这里的控制器和 controller文件中对应
31                     handler: ‘onClickButton‘
32                 }
33             ]
34         }
35     ]
36
37 });

myViewportViewController.js (view文件中)

 1 Ext.define(‘MyApp.view.MyViewportViewController‘, {
 2     extend: ‘Ext.app.ViewController‘,
 3     alias: ‘controller.myviewport‘,
 4     onClickButton: function(){
 5         Ext.Msg.confirm(‘Confirm‘, ‘要改变面板的title值吗?‘, ‘onConfirm‘, this);
 6     },
 7
 8     onConfirm: function(choice){
 9         if(choice === ‘yes‘) {
10                 //加入下面这一条语句
11                 //this.getView().getViewModel().set(‘name‘ , "修改后的title");
12                 console.log(this.getView().getViewModel().set(‘name‘,‘my app‘));
13             }
14     }
15 });

MyViewportViewModel.js (view文件中)

1 Ext.define(‘MyApp.view.MyViewportViewModel‘, {
2     extend: ‘Ext.app.ViewModel‘,
3     alias: ‘viewmodel.myviewport‘,
4
5     //这个对象包含任意数据填充 视图模型 ,然后通过视图绑定。
6     data: {
7         name: ‘app‘
8     }
9 });
时间: 2024-10-04 19:41:37

extJs学习基础5 理解mvvm的一个小案例的相关文章

ExtJS学习------------基础架构,Extjs.js和Ext-more.js的学习

Ext.apply和Ext.applyIf Ext.onReady(function(){ //Ext.apply和Ext.applyIf对对象的属性或者方法进行扩展 var src1={name:'张三',age:23};//被扩展的对象 var src2={name:'张三',age:23};//被扩展的对象 var config={name:'李四',sex:'男'};//配置对象 //使用Ext.apply进行扩展,会覆盖原来的属性或方法 Ext.apply(src1,config);

白鹭Egret学习之egret.ImageLoader.load的一个小问题(#1011:流错误)

egret.ImageLoader.load的路径问题 本来这个问题只是一个小问题,但是是学习Egret路途上遇到的第一个困惑了一段时间的问题,也花了一段时间去进行各种尝试.调试想要解决问题.同时也是由于自身基础不够扎实导致,所以记录下来警醒自己. 使用egret.ImageLoader.load加载ImageLoader的资源,其默认路径为工程所在路径,假设工程TEST下有以下资源:TEST->resource->assets->123.jpeg,如下图: 现在想要创建一个位图对象,使

【转】深度学习基础概念理解

原文链接 神经网络基础 1)神经元(Neuron)--就像形成我们大脑基本元素的神经元一样,神经元形成神经网络的基本结构.想象一下,当我们得到新信息时我们该怎么做.当我们获取信息时,我们一般会处理它,然后生成一个输出.类似地,在神经网络的情况下,神经元接收输入,处理它并产生输出,而这个输出被发送到其他神经元用于进一步处理,或者作为最终输出进行输出.  2)权重(Weights)--当输入进入神经元时,它会乘以一个权重.例如,如果一个神经元有两个输入,则每个输入将具有分配给它的一个关联权重.我们随

extJs学习基础3 ajax与php交互

extJs代码: 1 <script src="build/ext-all.js"></script> 2 <script src="build/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script> 3 <link rel="stylesheet" href="build/packages/ext-theme-cri

extJs学习基础2

一个登陆界面: 1 Ext.onReady(function(){ 2 3 Ext.define('Login', { 4 //renderTo: Ext.getBody(), 5 extend: 'Ext.window.Window', 6 closable: false, 7 resizable : false, 8 modal: true, 9 //draggable: false, 10 autoShow: true, 11 title: '用户登录---OA办公系统', 12 item

extJs学习基础 容器的介绍

Viewport: 一个专门的容器用于可视应用领域(浏览器窗口). Viewport渲染自身到网页的documet body区域, 并自动将自己调整到适合浏览器窗口的大小,在窗口大小发生改变时自动适应大小. 一个页面中只能创建一个Viewport. 任何的Container容器都可以作为一个Viewport 的子组件,开发者使用一个Viewport作为父容器配置布局layout, 并管理他们的大小和位置. Container: 任何可能包含其它Ext.Component组件的基类,默认是没有大小

extJs学习基础4 Ext.each的用法

1 Ext.onReady(function(){ 2 //案例一 3 /* 4 var countries = ['Vietnam', 'Singapore', 'United States', 'Russia']; 5 Ext.Array.each(countries, function(name, index, countriesItSelf){ 6 console.log(name); 7 if(name == 'Vietnam'){ 8 return false; //停止循环 9 }

学习selenium python版最初的一个小想法

这个还是我在刚开始学习selenium的时候做的,自己觉得有点意思,在接下来我会基于目前我对于selenium的一些深入研究,写下我对selenium的理解以及UIAutomation的一些理解,以此开篇吧^_^ 前段时间研究Selenium,写了一些测试网页的代码,写着写着,就感觉这些自动化cases的相似度太高,多数是大同小异,基本上可以归纳为这样三步1)找到元素 2)进行操作, 比如点击或者滑动 3) 验证期望, 比如跳转到了一个新页面,或者新元素出现在屏幕中. 比如下面: from se

TP5学习基础一:增删改查小demo

①TP5--增删改查简单的demo 我先吐槽一下:因为工作需要研究tp5,去官网看了一下哎呦,资源挺多挺全啊!然后下载唯一免费的官方教程,我曹pdf打开533页.讲的很细但是开发能等看完才做吗?看到精简版快速入门的还软妹币20试读3章.寻思找个demo案例吧,要不加群拿源码,要不视频教程收费.特喵的框架是开源的但是教程是收费的.寻思去论坛看看问题,不是我喷好多技术小白的问题,我想看看怎么获取传参传值,泥煤那个系统变量是什么鬼?挣扎了3个小时我放弃了官网.在度娘上找到一个demo,吭哧吭哧啃完.一