Ext4.2学习之Store数据存储

lang20150928

于 2021-03-23 15:05:34 发布

阅读量140

点赞数

分类专栏： extjs 文章标签： js

本文链接：https://blog.csdn.net/m0_37607945/article/details/115124549

版权

extjs 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="ext-4/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-4/ext-all.js"></script>
    <script type="text/javascript" src="ext-4/locale/ext-lang-zh_CN.js"></script>
    <title>09.store</title>
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.define('PersonRecord', {
                extend: 'Ext.data.Model',
                fields: [
                    {name: 'name', type: 'string'},
                    {name: 'sex', type: 'int'}
                ]
            });

            var boy = new PersonRecord({
                name: 'boy', sex: 0
            });

            console.log("boy.data.name = " + boy.data.name);
            console.log("boy.data['name'] = " + boy.data['name']);
            console.log("boy.get('name') = " + boy.get('name'))

            boy.set('name', 'boy name');

            console.log("boy.getChanges().name = " + boy.getChanges().name);
            var copyBoy = boy.copy();
            console.log('copyBoy id : ' + copyBoy.id + ',boy id:' + boy.id);

            var data = [
                ['boy', 0],
                ['girl', 1]
            ];

            var store = new Ext.data.ArrayStore({
                data: data,
                fields: [
                    {name: 'name', type: 'string'},
                    {name: 'sex', type: 'int'}
                ]
            });
            store.sort('name', 'DESC');

            store.load();

            var grid = new Ext.grid.GridPanel({
                store: store,
                columns: [
                    {header: 'name', dataIndex: 'name'},
                    {header: 'sex', dataIndex: 'sex'}
                ],
                autoHeight: true,
                renderTo: 'grid'
            });

            console.log(store.sorters);

            // 从store中获取数据
            for (var i = 0; i < store.getCount(); i++) {
                var record = store.getAt(i);
                // 输出girl boy
                console.log("通过for遍历数据: " + record.get('name'))
            }

            // 获取返回数据
            var records = store.getRange(0, 1);
            for (var i = 0; i < records.length; i++) {
                var record = records[i];
                // 输出girl boy
                console.log("通过Range查找数据: " + record.get('name'))
            }

            // 通过find查找数据
            var index = store.find('name', 'g');
            console.log("通过find查找数据: " + store.getAt(index).get('name'));

            // 对于复杂的逻辑 可以通过findBy来实现 可以同时判断record中的多个字段 在函数中实现复杂逻辑
            index = store.findBy(function (record, id) {
                return record.get('name') == 'girl' && record.get('sex') == 1;
            });
            console.log("通过findBy查找数据: " + store.getAt(index).get('name'));

            // 向store中添加数据 每次都会添加到store的末尾
            store.add(new PersonRecord({
                name: 'other', sex: 0
            }));

            // 通过add添加每次都会添加到末尾 这样会打破排序 如果希望根据store原有的排序将数据插入到相应的位置 使用addSorted函数
            // 这样添加完数据之后 就会立即对store进行排序
            store.addSorted(new PersonRecord({
                name: 'addSorted', sex: 1
            }));

            // 遍历所有数据
            store.each(function (record) {
                console.log("通过each遍历数据: " + record.get('name'))
            });
        });
    </script>
</head>
<body>
<div id="toolbar"></div>
<div id="grid"></div>
</body>
</html>

lang20150928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ext4.2学习之Store数据存储

<!DOCTYPE html><html><head> <title>Hello World</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link type="text/css" rel="stylesheet" href="ext-4/resources/css/ext-all.css"/&
复制链接

扫一扫