ExtJs学习笔记

官网:http://docs.sencha.com/extjs/6.5.1/classic/Ext.html
示例demo:https://fiddle.sencha.com/#view/editor&fiddle/255l 密码:k2
ExtJS
1、主要控件:Application
、View,ViewModel,Controller,Component,Store,Model

2、常用store:Strore(最常用),JsonStore,TreeStore,ArrayListStore(用于本地下拉框)

3、Store
3.1、storeId:view使用,Ext.StoreMgr.get(‘storeId‘);全局唯一,容易被冲掉
3.2、推荐使用viewModel.getStore(‘vm中‘);grid.getStore();
3.3、autoload为true时实例化的时候就加载,否则在调用load方法时才加载
3.4、store可以通过proxy去加载restful

4、Controller
4.1、控制器的写法尽量不用listen,用init的方法
4.2、initViewModel,可以保证viewmodel实例化完成
4.3、通过this.getReferences()可以获取所有的视图里的引用
示例:
----holder1(holder) ----this.getView() --顶层
--------type10 ----holder1.type10
--------type20 ----holder1.type20
------------type21 ----holder1.type21
------------holder2(holder) ----holder1.holder2
----------------type1 ----holder1.holder2.type1
4.4、通过this.getViewModel()获取总对象

5、model
5.1、model只定义结构,可以通过proxy加载restful

6、model、store的区别
6.1、model是一条数据
6.2、store是mode的list
6.3、在vm里面使用model是用links,使用store是用stores,使用data是用本地数据
6.4、store里面包含model属性

7、viewmodel
7.1、links里面的create:true表示new一个空的对象,如果是create:{id:123},表示new一个包含id数据的对象
7.2、links:id:12表示从后台请求主键id为12的数据,(id是不是固定写法不确定)

8、自定义双向bind属性
8.1、参考url:http://docs.sencha.com/extjs/6.5.1/classic/Ext.Class.html#cfg-config
8.2、双向绑定里面如果带小数点的表示json对象的方式访问。
比如{task.types.url},那么在vm里面里面可以使用viewmodel.set("task":{types:{url:"aaa"}})的方式进行设置值
也可以使用set(‘task.types.url‘,"XXX")进行赋值,默认还是会生成json对象。

9、数据类型:
String,Integer,Number,Bool,Date
参考地址:http://docs.sencha.com/extjs/6.5.1/classic/Ext.data.field.String.html

10、view.

10.1、定义一个referenceHolder:true,这个属性之后的每个子孙节点可以定义个reference,referenceHolder也可以嵌套使用,在同一个referenceHolder下,不管多少级,不能重名,拉平浮动到同一referenceHolder层。

11、错误提示

12、data 本地数据(写死的)

时间: 2024-10-09 23:50:26

ExtJs学习笔记的相关文章

ExtJs学习笔记(1)---ExtJs安装及其使用

从官网下载了ExtJs的3.2版本的SDK,包含了代码依赖的详细说明.文档.范例和其他文件.其中,adapter和resources文件是Ext正常运行所必须的,其他的仅在开发过程中使用到. Adapter:支持把Ext和其他代码库一同使用的文件 build:用于自定义构建ext-all.js的文件 docs:文档中心(仅当运行在服务器上时能够正常访问) examples:大量令人印象深刻富有洞察力的范例 resources:Ext依赖的文件,例如CSS和图片 source:ext的所有代码 在

[ExtJS学习笔记]第六节 Extjs的类系统Class System命名规则及定义和调试

本文地址: http://blog.csdn.net/sushengmiyan/article/details/38479079 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站:    http:

[ExtJS学习笔记]第五节 使用fontawesome给你的web应用增加友好图标

本文地址: 本文作者:sushengmiyan -------------------------------------------------资源链接-------------------------------------------------------- FontAwesome glyph编码:http://fortawesome.github.io/Font-Awesome/cheatsheet/ 使用图标美化按钮: http://blog.csdn.net/jfok/articl

[ExtJS学习笔记]第七节 Extjs的组件components及其模板事件方法学习

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38487519 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源  Sencha Cmd官方网站: http://ww

[ExtJS学习笔记]第十节 Extjs5新增特性之ViewModel和DataBinding

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38612721 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

[ExtJS学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

EXTJS学习笔记--搭建实验环境

1.目的 在eclipse中搭建EXTJS的基础环境,学习如何按照从官方下载的代码中搭建新的Extjs工程 2.学习过程中遇到的问题 ext-4.2.1-gpl与ext-4.2.1-commercial的区别        ext-4.2.1-gpl:开源版本,使用GPL开源协议        ext-4.2.1-commercial:商业版本,收费,稳定 作为个人研究来讲,可以使用ext-4.2.1-gpl. 下载的Extjs目录中各个文件说明        主要目录说明 builds目录:压

[ExtJS学习笔记]第八节 Extjs的Ext.toolbar.Toolbar工具条组件及其应用

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38515499 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- Ext JS API: http://docs.sencha.

ExtJs学习笔记之学习小结LoginDemo

ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../ext-js-4.2.1/res

ZP的EXTJS学习笔记(三)——邮箱功能的开发(按钮事件、下拉框、分页、record小图标、整条数据格式处理、定时刷新、record复选删除、分组)

照例,先贴效果图: 本人比较满意,短时间开发的邮箱功能,这是收件箱,还有配套的发件箱与删除箱. 简单说下思路: 1.配置model.store,用的是MVC模式,可参考第一篇学习笔记. 2.页面简单布局: Ext.define('KitchenSink.view.mail.InBox', { extend: 'Ext.grid.Panel', alias : 'widget.inbox', xtype: 'inbox', autoHeight:true, bodyStyle:'width:100