Extjs7.0.0——Store篇

Extjs7.0.0——Store篇

store 是前端用来接收后台响应的对象。

1. Store 的创建方式

1.1 方式一 (Hard Code)

//创建一个Store 对象
Ext.create('Ext.data.Store', {
    // Store 的名字
    storeId: "simpsonsStore",
 
 	//字段名称
    fields: ['name', 'email', 'phone'],
    // 默认数据
    data: [{
        'name': 'Lisa',
        "email": "lisa@simpsons.com",
        "phone": "555-111-1224"
    }, {
        'name': 'Bart',
        "email": "bart@simpsons.com",
        "phone": "555-222-1234"
    }, {
        'name': 'Homer',
        "email": "home@simpsons.com",
        "phone": "555-222-1244"
    }, {
        'name': 'Marge',
        "email": "marge@simpsons.com",
        "phone": "555-222-1254"
    }]
});

例子：

//创建一个Store 对象
Ext.create('Ext.data.Store', {
    // Store 的名字
    storeId: "simpsonsStore",
 
 	//字段名称
    fields: ['name', 'email', 'phone'],
    // 默认数据
    data: [{
        'name': 'Lisa',
        "email": "lisa@simpsons.com",
        "phone": "555-111-1224"
    }, {
        'name': 'Bart',
        "email": "bart@simpsons.com",
        "phone": "555-222-1234"
    }, {
        'name': 'Homer',
        "email": "home@simpsons.com",
        "phone": "555-222-1244"
    }, {
        'name': 'Marge',
        "email": "marge@simpsons.com",
        "phone": "555-222-1254"
    }]
});
 
let columns = [{
    text: 'Name',
    dataIndex: 'name',
    flex: 1
}, {
    text: 'Email',
    dataIndex: 'email',
    flex: 1
}, {
    text: 'Phone',
    dataIndex: 'phone',
    flex: 1
}];
 
let grid = Ext.create('Ext.grid.Grid', {
    title: 'Simpsons',
 
    // Using the Named Store
    store: "simpsonsStore",
 
    columns: columns,
    layout: 'fit',
    renderTo: document.body,
    width: '100%',
    height: 300
});

1.2 方式二(Proxy 请求)

// 当fileds 太过复杂可以单独拆除了定义字段模型
Ext.define('SimpsonsStoreItem', {
        extend: 'Ext.data.Model',
        fields: [
        	{name: 'name', type: 'string'},
            {name: 'email', type: 'string'},
            {name: 'phone', type: 'string'}
        ]
    });

// Store 的名字
let simpsonsStore= new Ext.data.Store({
 	//字段模型，
	model: 'SimpsonsStoreItem',
    // 通过proxy,请求后台数据
    proxy: {
            type: 'ajax',
            //请求路径
            url: 'url'，
            //请求参数
            extraParams: {
                orderNo: orderNo,
                bsn: bsn
            },
            //数据渲染
            render: {
            //指定要data对象的数据
                root: 'data',
                type: 'json'
            }
        },
        //页面加载自动加载
        autoLoad: true
});

2. Store 接收Json数据

Store 接收复杂的Json数据，需要特别主要fields的设置。
常用属性：

• name
• 用来给前端使用，主要是dataIndex，或者遍历store。如果与后台响应的字段名一样则可直接接收数据。
• type
• 指定数据类型：string、number、boolean。
• mapping
• 用来匹配后台响应的数据的字段名，如果名字一样就接收响应数据。存在的意义是，如果想要前端想使用单独的name，可以用mapping，去匹配后台响应的字段名 或者一些复杂的json就需要mapping去匹配了。
• convert
• 后台响应的数据，在接收前转化一下。如：后台传boolean，前台要Y/N则需要转化。

这里以Ext.data.Model对象创建模型举例。
Json:

[
    {
        'name': 'Lisa',
        "email": "lisa@simpsons.com",
        "phone": "555-222-1244"
    }, {
        'name': 'Bart',
        "contact": {"email": "bart@simpsons.com", "phone": "555-222-1244", tel: "1111"}
    }, {
        'name': 'Homer',
        "contact": {"email": "home@simpsons.com", "phone": "555-222-1244", tel: "1111"}
    }, {
        'name': 'Marge',
        "contact": {"email": "marge@simpsons.com", "phone": "555-222-1244", tel: "1111"}
    }]

Ext.define('SimpsonsStoreItem', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'name', type: 'string'},
                {name: 'email', type: 'string', mapping: 'contact.email'},
                {name: 'phone', type: 'string', mapping: 'contact.phone'},
                {
                    name: 'isAdult',
                    type: 'string',
                    convert: function (value) {
                        if (value == null || value == '' || value == 'false' || value == false) {
                            return 'N';
                        }
                        return 'Y';
                    }
                }
            ]
        });

例子：

Ext.create('Ext.data.Store', {
 
    // Named Store
    storeId: "simpsonsStore",
 
    fields: ['name', {name: 'email'}, {name: 'phone', mapping: 'contact.phone'}, {
        name: 'isAdult',
        type: 'string',
        convert: function (value) {
            if(value == null || value == '' || value == 'false' || value == false){
							return 'N';
					}
							
                    return 'Y';
        }
    }],
    data: [
        {
        'name': 'Lisa',
        "email": "lisa@simpsons.com",
        "phone": "555-222-1244",
        "isAdult": false
    }, {
        'name': 'Bart',
        "contact": {"email": "bart@simpsons.com", "phone": "555-222-1244"},
        "isAdult": false
    }, {
        'name': 'Homer',
        "contact": {"email": "home@simpsons.com", "phone": "555-222-1244"},
        "isAdult": true
    }, {
        'name': 'Marge',
        "contact": {"email": "marge@simpsons.com", "phone": "555-222-1244"},
        "isAdult": true
    }]
});
 
let columns = [{
    text: 'Name',
    dataIndex: 'name',
    flex: 1
}, {
    text: 'Email',
    dataIndex: 'email',
    flex: 1
}, {
    text: 'Phone',
    dataIndex: 'phone',
    flex: 1
}, {
    text: 'Adult',
    dataIndex: 'isAdult',
    flex: 1
}];
 
let grid = Ext.create('Ext.grid.Grid', {
    title: 'Simpsons',
 
    // Using the Named Store
    store: "simpsonsStore",
 
    columns: columns,
    layout: 'fit',
    renderTo: document.body,
    width: '100%',
    height: 300
});

效果：