extjs笔记.txt

extjs6

类系统

Ext
Ext.application({  // 该方法返回一个名为MyApp的全局变量，应用的所有类都会挂在该变量下
	name: 'MyApp',
	extend: 'MyApp.Application',
	launch: function () {  // 页面加载后触发
	}
});

Ext.define('ClassB', {  // 创建或重写一个类
	a: 'data',
	extend: 'ClassA',  // 需要继承时配置
	singleton: true,  // 需要单例时配置
	override: 'Ext.form.field.Text',  // 需要重写基类的扩展时配置
	setValue: function () {  // 重写基类方法
		this.callParent(['override']);
		return this;
	}
}, function () {  // 该类创建后的回调
});

Ext.create('ClassB', {  // 创建类的实例，也可通过new创建，var a = new ClassB('B');，当Ext.Loader开启时，此时会自动请求并加载对应的js类文件，'ClassB'可以是widget名，如：widget.panel
	name: 'B'
});

Ext.onReady(function () {  // 页面加载后触发

});

Ext.widget('panel', {  // widget通过xtype创建实例，xtype即原始类名的别名
	renderTo: Ext.getBody()
});

Ext.getClass(new Ext.Button());  // 返回创建该实例的类，Ext.Button
Ext.getClassName(new Ext.Button());  // 返回创建该实例的类名，'Ext.Button'

Ext.Base  // 所有类的基类
Ext.Class  // 底层的类，用于创建class，不应该直接访问，而是通过使用Ext.define()
Ext.ClassManager  // 管理所有的class，将class名称字符串映射到真实的class
Ext.Loader  // 用于动态加载依赖
Ext.require()  // Ext.loader的快捷方法，文件加载的路径依据当前类的类名，Ext.require(['widget.*', 'layout.*', 'Ext.data.*']); or Ext.exclude('Ext.data.*').require('*');

事件

var btn = Ext.create('Ext.button', {
	renderTo: Ext.getBody(),
	listeners: {  // 绑定事件，也可以在实例创建成功后通过on绑定，如：btn.on({'click': function () {}, 'mouseout': function () {}}); or btn.on('click', function () {});
		mouseout: function () {},
		click: function () {}
	}
});
btn.un('click', listener);  // 移除事件绑定

DOM

Ext.DomQuery类
Ext.query(cssSelector, rootNode);  // 即Ext.DomQuery.select()，rootNode，原生节点，返回原生dom对象

Ext.Element类
Ext.get('id');  // 即Ext.Element.get(id)，返回Ext.Element对象，Ext.get('id').dom得到原生dom对象
Ext.fly('id'); // 作用与Ext.get('id')一样，但是它不开辟新内存空间，每次调用都会覆盖前一次的信息
Ext.getDom('id'); // 返回原生dom对象
Ext.getBody();
Ext.getDoc();

Ext.CompositeElement类
Ext.select(cssSelector);  // 返回一个CompositeElement对象，其是对dom对象集合的封装，可迭代
Ext.get('id').select(cssSelector);  // 等价于Ext.select(cssSelector, true, 'id');

Ext.ComponentQuery类  // 可通过id，属性，xtype查找component
Ext.ComponentQuery.query("button[title='my button']");  // button，xtype
Ext.ComponentQuery.query('formpanel numberfield');
component.child('button[itemId=save]');
window.down('form');
form.up('window');
window.down('treep'); // xtype
window.down('button[action=save]');

Ext.DomHelper类
Ext.DomHelper.append(id, '<a>aaa</a>');
Ext.DomHelper.append(id, {tag: ul, children: [tag: li, html: 'aaaa']});
Ext.DomHelper.insertHtml(position, dom, '<a>aaa</a>'); //position:beforeBegin, afterBegin, beforeEnd, afterEnd
Ext.DomHelper.overwrite(id, '<a>aaa</a>'); //相当于原生的innerHTML
var tpl = Ext.DomHelper.createTemplate('<li>{content}</li>');
tpl.overwrite(id, {content: '内容'});

组件  // 每个组件都有一个xtype，xtype可以使组件懒加载

容器  // 基类，Ext.container.Container，常见的容器如：Ext.toolbar.Toolbar, Ext.panel.Panel, Ext.Editor...

布局
absolute  // absolute布局继承Ext.layout.container.Anchor布局方式，子组件可配置x，y等属性
accordion  // 手风琴布局，在任何时间里，只有一个面板处于激活状态，子组件可配置title，html等属性
anchor  // anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，子组件可配置anchor属性
  anchor: '75% 25%'，表示宽度为父容器的75%，高度为父容器的25%，未定义高度时，使用框架默认值
  anchor: '-295 -300'，表示组件右侧距离父容器右侧295，底部相对于父容器的底部300
  anchor: '-250 10%'，混合模式，表示组件右侧相对于容器右侧250，高度为父容器的10%
border  // 常用作页面整体布局，子组件可配置region: north, south, east, west, center
card  // 类似向导，上一步，下一步，总是只有一个子组件可见，setActiveItem(index) setDisabled(index) getNext() getPrev()
fit  // 子组件会自适应于父容器（用了fit布局子容器设置宽度无效），如果父容器有多个子组件，只会显示第一个
hbox  // 所有的子元素横向排列，可不定义高度，自动stretch，layout: {type: 'hbox', pack: 'start', align: 'stretch'}，子组件可配置width，flex等属性
vbox  // 所有的子元素纵向排列，可不定义宽度，自动stretch，layout: {type: 'vbox', pack: 'start', align: 'stretch'}，子组件可配置height，flex等属性
table  // layout:{type: 'table', columns: 3, tableAttrs: {style: {width: '100%'}}}  子组件可配置rowspan: 2 // 合并行  colspan: 2 // 合并列 合并行列的时候记得指明高和宽
center  // 使子组件水平且垂直居中于父容器
column  // 子组件可配置columnWidth，需要指定高度height，如：columnWidth: .7
form  // 一行一控件的形式

store
Ext.data.StoreManager.lookup('myStore');   // myStore，storeId，Ext.getStore是其简便方法
this.getViewModel().getStore('myStore');  // view model，this为controller

template
var tpl = new Ext.XTemplate(str1, str2, ...);  // 用于xtype，dataview

form
默认布局： layout: 'anchor'
From和FormBasic
form.getForm(); => FormBasic
加载数据：
record
form.loadRecord(record);
json
form.getForm().setValues(data);
获取或更新数据
record
form.getRecord();
form.updateRecord();
json
form.getForm().getValues();
异步加载
form.getForm().load({
	url: ...
});
异步提交
form.submit({
	url: '...',
	success: function (form, action) {

	}
});
数据验证：
vtype

Ext.apply(Ext.form.field.VTypes, {
    IPAddress: function (v) {
        return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
    },
    IPAddressText: '只能输入ip地址',
    IPAddressMask: /[\d\.]/i
});

常规开发模式：
Ext.onReady(function () {
    // 1.定义Model
    Ext.define("MyApp.model.User", {
        extend: "Ext.data.Model",
        fields: [
            { name: 'name', type: 'string', mapping: 'test', convert: function (val) {return val;}},  // mapping，对应服务器字段名
            { name: 'age', type: 'int' },
            { name: 'phone', type: 'string' }
        ]
    });

    // 2.创建store
    var store = Ext.create("Ext.data.Store", {
        model: "MyApp.model.User",
        data: [
            { name: "Tom", age: 5, phone: "123456" },
            { name: "Jerry", age: 3, phone: "654321" }
        ]
    });

    // 3.创建grid
    var viewport = Ext.create("Ext.container.Viewport", {
        layout: "fit",
        items: {
            xtype: "grid",
            model: "MyApp.model.User", //可不加
            store: store,
            columns: [
                { text: '姓名', dataIndex: 'name' },
                { text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0' },
                { text: '电话', dataIndex: 'phone' }
            ]
        }
    });

    // 4.添加双击编辑
    var grid = viewport.down("grid");
    grid.on("itemdblclick", function (me, record, item, index, e, eopts) {
        // 5.创建编辑表单
        var win = Ext.create("Ext.window.Window", {
            title: "编辑用户",
            width: 300,
            height: 200,
            layout: "fit",
            items: {
                xtype: "form",
                margin: 5,
                border: false,
                fieldDefaults: {
                    labelAlign: 'left',
                    labelWidth: 60
                },
                items: [
                    { xtype: "textfield", name: "name", fieldLabel: "姓名" },
                    { xtype: "numberfield", name: "age", fieldLabel: "年龄" },
                    { xtype: "textfield", name: "phone", fieldLabel: "电话" }
                ]
            },
            buttons: [
                {
                    text: "保存",
                    handler: function () {
                        win.down("form").updateRecord();
                        record.commit();
                        win.close();
                    }
                }
            ]
        });
        win.down("form").loadRecord(record);
        win.show();
    });
});

mvc开发模式：
1、宿主页面，引用入口文件
2、入口文件
app.js

// Ext.Loader.setConfig({
//     enabled: true,
//     paths: {
//         'Ext.ux': extjsConfig.uxFolder
//     }
// });

Ext.application({
    name: 'MyApp',
    appFolder: 'app',
    controllers: ["User"],
    autoCreateViewport: true,
    launch: function () {
        // Ext.create('viewportName'); 手动加载viewport
    }
});

model层
model
app/model/User.js
Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int' },
        { name: 'phone', type: 'string' }
    ]
});
store
app/store/user.js
Ext.define("MyApp.store.User", {
    extend: "Ext.data.Store",
    model: "MyApp.model.User",
    data: [
        { name: "Tom", age: 5, phone: "123456" },
        { name: "Jerry", age: 3, phone: "654321" }
    ]
});

view层
viewport
app/view/viewport.js
Ext.define("MyApp.view.Viewport", {
    extend: "Ext.container.Viewport",
    layout: "fit",
    items: {
        xtype:"userlist"
    }
});
part1
app/view/user/List.js
Ext.define("MyApp.view.user.List", {
    extend: "Ext.grid.Panel",
    alias: 'widget.userlist',
    store: "User",
    initComponent: function () {
        this.columns = [
            { text: '姓名', dataIndex: 'name' },
            { text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0' },
            { text: '电话', dataIndex: 'phone' }
        ];
        this.callParent(arguments);
    }
});
part2
app/view/user/edit.js
Ext.define("MyApp.view.user.Edit", {
    extend: "Ext.window.Window",
    alias: "widget.useredit",
    title: "编辑用户",
    width: 300,
    height: 200,
    layout: "fit",

    items: {
        xtype: "form",
        margin: 5,
        border: false,
        fieldDefaults: {
            labelAlign: 'left',
            labelWidth: 60
        },
        items: [
            { xtype: "textfield", name: "name", fieldLabel: "姓名" },
            { xtype: "numberfield", name: "age", fieldLabel: "年龄" },
            { xtype: "textfield", name: "phone", fieldLabel: "电话" }
        ]
    },
    buttons: [
        { text: "保存", action: "save" }
    ]
});

controller层
app/controller/user.js
Ext.define('MyApp.controller.User', {
    extend: 'Ext.app.Controller',
    stores: ['User'],
    models: ['User'],
    views: ['Viewport', 'user.List', 'user.Edit'],
    init: function () {
        this.control({
            'userlist': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.saveUser
            }
        });
    },
    editUser: function (grid, record) {
        var win = Ext.widget("useredit");
        win.down("form").loadRecord(record);
        win.show();
    },
    saveUser: function (btn) {
        var win = btn.up("window"),
            form = win.down("form"),
            record = form.getRecord();
        form.updateRecord();
        record.commit();
        win.close();
    }
});


sencha build error: 'Registry key Error: Java version has value '1.8', but '1.7' is required'
1. open regedit
2. go to [HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft\Java Runtime Environment]
3. change value CurrentVersion from "1.8" to "1.7"