Ext4.2学习之GridPanel

最新推荐文章于 2021-03-19 14:16:46 发布
最新推荐文章于 2021-03-19 14:16:46 发布
阅读量93 收藏
点赞数
分类专栏： extjs 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37607945/article/details/114980258
版权 
<!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"/>
    <!--定义样式文件-->
    <style type="text/css">
        .white-row {
            background-color: white;
        }

        .red-row {
            background-color: #F5C0C0 !important;
        }

        .yellow-row {
            background-color: #FBF8BF !important;
        }

        .green-row {
            background-color: #99CC99 !important;
        }

        .x-grid-row .x-grid-cell {
            background-color: transparent;
        }
    </style>
    <script type="text/javascript" src="ext-4/ext-all.js"></script>
    <script type="text/javascript" src="local/ext-lang-zh_CN.js"></script>
    <script>
        Ext.onReady(function () {

            function renderSex(value) {
                if (value == 'male') {
                    return "<span style='color:red;font-weight:bold;'>红男</span><img src='user_male.png' />";
                } else {
                    return "<span style='color:green;font-weight:bold;'>绿女</span><img src='user_female.png' />";
                }
            }

            function renderMotif(data, cell, record, rowIndex, columnIndex, store) {
                var value = record.get('color')
                cell.style = "background-color:" + value;
                return data;
            }

            /**
             * 渲染函数
             * @param value 将要显示在单元格中的值
             * @param cellmeta 单元格的相关属性，主要有id和CSS
             * @param record 当前行的数据对象 如果要获取列 record.data["id"]
             * @param rowIndex 行号
             * @param columnIndex 列号
             * @param store 构造表格用的ds
             */
            function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
                var str = "<input type='button' value='查看详细信息' οnclick='alert(\"" +
                    "这个单元格的值是：" + value + "\\n" +
                    "这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
                    "这个单元格对应行的record是：" + record + "，一行的数据都在里边\\n" +
                    "这是第" + rowIndex + "行\\n" +
                    "这是第" + columnIndex + "列\\n" +
                    "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
                    "\")'>";
                return str;
            }

            // 表格包含的列
            var columns = [
                // 显示行号
                new Ext.grid.RowNumberer(),
                // header 标题 width 宽度 sortable 当前列是否可排序
                {header: '编号', dataIndex: 'id', width: 200, sortable: true},
                {header: '名称', dataIndex: 'name', width: 200, sortable: false},
                // 通过renderer函数将male显示为红男 而其他为绿女
                {
                    header: '性别', dataIndex: 'sex', width: 200, sortable: false, renderer: function (value) {
                        if (value == 'male') {
                            return "<span style='color: red;font-weight: bold'>男</span><img src='icons/user_male.png'>";
                        } else {
                            return "<span style='color: green;font-weight: bold'>女</span><img src='icons/user_female.png'>";
                        }
                    }
                },
                {header: '描述', dataIndex: 'descn', width: 400, sortable: false, renderer: renderDescn},
                {header: '颜色', dataIndex: 'color', width: 400, sortable: false, renderer: renderMotif},
                {header: '日期', dataIndex: 'date', renderer: Ext.util.Format.dateRenderer('Y-m-d'), width: 400}
            ];

            var data = [
                ['1', 'name1', 'male', 'descn1', '#FBF8BF', '1970-01-15T02:58:04'],
                ['2', 'name2', 'female', 'descn2', '#99CC99', '1970-01-15T02:58:04'],
                ['3', 'name3', 'male', 'descn3', '#F5C0C0', '1970-01-15T02:58:04'],
                ['4', 'name4', 'female', 'descn4', '#FFFFFF', '1970-01-15T02:58:04'],
                ['5', 'name5', 'male', 'descn5', '#FFFFFF', '1970-01-15T02:58:04']
            ];
            /**
             * 数据存储对象store负责将原始数据（二维数组、JSON对象数组、XML文本等）转为Ext.data.Record类型对象
             * @type {Ext.data.ArrayStore}
             */
            var store = new Ext.data.ArrayStore({
                data: data,
                fields: [
                    {name: 'id'},
                    {name: 'name'},
                    {name: 'sex'},
                    {name: 'descn'},
                    {name: 'color', type: 'string'},
                    // 日期类型处理 Y是年 m是月 d是日期 H是小时 i是分钟 s是秒
                    {name: 'date', type: 'date', dateFormat: 'Y-m-dTH:i:s'}
                ],
                // 设置默认的排序规则
                sorters: [{property: "id", direction: "DESC"}]
            });
            store.load();

            var sm = new Ext.selection.CheckboxModel();
            // var sm = new Ext.selection.CheckboxModel({checkOnly: false});

            var grid = new Ext.grid.GridPanel({
                // 表格会自动根据columns中设置的width按比例分配 非常智能
                forceFit: true,
                autoHeight: true,
                // 读取数据时的遮罩和提示功能
                loadMask: true,
                // 表格斑马线效果
                stripeRows: false,
                // 指示Ext将表格渲染的位置
                renderTo: 'grid',
                // GridPanel表格必须包含列定义信息columns和表格的数据存储器store
                store: store,
                columns: columns,
                // 提供复选框的功能
                // selModel: sm,
                selModel: new Ext.selection.RowModel({singleSelect: true}),
                viewConfig: {
                    enableRowBody: true,
                    getRowClass: function (record, rowIndex, p, ds) {
                        var cls = 'white-row';
                        switch (record.data.color) {
                            case '#FBF8BF' :
                                cls = 'yellow-row'
                                break;
                            case '#99CC99' :
                                cls = 'green-row'
                                break;
                            case '#F5C0C0' :
                                cls = 'red-row'
                                break;
                        }
                        return cls;
                    }
                }
            });

            /**
             * 点击操作 显示数据
             */
            grid.on('itemclick', function () {
                var selected = grid.getSelectionModel().selected;
                for (var i = 0; i < selected.getCount(); i++) {
                    // 根据选择模型获取数据 如果选择模型为单元格 那么获取的为单元格数据 如果是行模型 则获取的是行数据
                    var record = selected.get(i);
                    Ext.Msg.alert('提示', record.get("id") + "," + record.get("name") + "," + record.get("descn"));
                }
            });

            Ext.get('remove').on('click', function () {
                // 删除第二行数据
                store.remove(store.getAt(1));
                // 执行视图刷新 并没有效果
                grid.view.refresh();
            });
        });
    </script>
</head>
<body>
<div id="grid"></div>
<input type="button" id="remove" value="删除第二行"/>
</body>
</html>

在这里插入图片描述
点击查看详细信息
在这里插入图片描述
点击某一行
在这里插入图片描述
添加分页和插入、删除

<!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"/>
    <!--定义样式文件-->
    <style type="text/css">
        .white-row {
            background-color: white;
        }

        .red-row {
            background-color: #F5C0C0 !important;
        }

        .yellow-row {
            background-color: #FBF8BF !important;
        }

        .green-row {
            background-color: #99CC99 !important;
        }

        .x-grid-row .x-grid-cell {
            background-color: transparent;
        }
    </style>
    <script type="text/javascript" src="ext-4/ext-all.js"></script>
    <script type="text/javascript" src="local/ext-lang-zh_CN.js"></script>
    <script>
        Ext.onReady(function () {

            function renderSex(value) {
                if (value == 'male') {
                    return "<span style='color:red;font-weight:bold;'>红男</span><img src='user_male.png' />";
                } else {
                    return "<span style='color:green;font-weight:bold;'>绿女</span><img src='user_female.png' />";
                }
            }

            function renderMotif(data, cell, record, rowIndex, columnIndex, store) {
                var value = record.get('color')
                cell.style = "background-color:" + value;
                return data;
            }

            /**
             * 渲染函数
             * @param value 将要显示在单元格中的值
             * @param cellmeta 单元格的相关属性，主要有id和CSS
             * @param record 当前行的数据对象 如果要获取列 record.data["id"]
             * @param rowIndex 行号
             * @param columnIndex 列号
             * @param store 构造表格用的ds
             */
            function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
                var str = "<input type='button' value='查看详细信息' οnclick='alert(\"" +
                    "这个单元格的值是：" + value + "\\n" +
                    "这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
                    "这个单元格对应行的record是：" + record + "，一行的数据都在里边\\n" +
                    "这是第" + rowIndex + "行\\n" +
                    "这是第" + columnIndex + "列\\n" +
                    "这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
                    "\")'>";
                return str;
            }

            // 表格包含的列
            var columns = [
                // 显示行号
                new Ext.grid.RowNumberer(),
                // header 标题 width 宽度 sortable 当前列是否可排序
                {header: '编号', dataIndex: 'id', width: 200, sortable: true, editor: {allowBlank: false}},
                {header: '名称', dataIndex: 'name', width: 200, sortable: false},
                // 通过renderer函数将male显示为红男 而其他为绿女
                {
                    header: '性别', dataIndex: 'sex', width: 200, sortable: false, renderer: function (value) {
                        if (value == 'male') {
                            return "<span style='color: red;font-weight: bold'>男</span><img src='icons/user_male.png'>";
                        } else {
                            return "<span style='color: green;font-weight: bold'>女</span><img src='icons/user_female.png'>";
                        }
                    }
                },
                {header: '描述', dataIndex: 'descn', width: 400, sortable: false, renderer: renderDescn},
                {header: '颜色', dataIndex: 'color', width: 400, sortable: false, renderer: renderMotif},
                {header: '日期', dataIndex: 'date', renderer: Ext.util.Format.dateRenderer('Y-m-d'), width: 400}
            ];

            var data = [
                ['1', 'name1', 'male', 'descn1', '#FBF8BF', '1970-01-15T02:58:04'],
                ['2', 'name2', 'female', 'descn2', '#99CC99', '1970-01-15T02:58:04'],
                ['3', 'name3', 'male', 'descn3', '#F5C0C0', '1970-01-15T02:58:04'],
                ['4', 'name4', 'female', 'descn4', '#FFFFFF', '1970-01-15T02:58:04'],
                ['5', 'name5', 'male', 'descn5', '#FFFFFF', '1970-01-15T02:58:04']
            ];
            /**
             * 数据存储对象store负责将原始数据（二维数组、JSON对象数组、XML文本等）转为Ext.data.Record类型对象
             * @type {Ext.data.ArrayStore}
             */
            var store = new Ext.data.ArrayStore({
                data: data,
                fields: [
                    {name: 'id'},
                    {name: 'name'},
                    {name: 'sex'},
                    {name: 'descn'},
                    {name: 'color', type: 'string'},
                    // 日期类型处理 Y是年 m是月 d是日期 H是小时 i是分钟 s是秒
                    {name: 'date', type: 'date', dateFormat: 'Y-m-dTH:i:s'}
                ],
                // 设置默认的排序规则
                sorters: [{property: "id", direction: "DESC"}]
            });
            store.load();

            var sm = new Ext.selection.CheckboxModel();
            // var sm = new Ext.selection.CheckboxModel({checkOnly: false});

            var grid = new Ext.grid.GridPanel({
                // 表格会自动根据columns中设置的width按比例分配 非常智能
                forceFit: true,
                autoHeight: true,
                // 读取数据时的遮罩和提示功能
                loadMask: true,
                // 表格斑马线效果
                stripeRows: false,
                // 指示Ext将表格渲染的位置
                renderTo: 'grid',
                // GridPanel表格必须包含列定义信息columns和表格的数据存储器store
                store: store,
                columns: columns,
                // 提供复选框的功能
                // selModel: sm,
                // selModel: new Ext.selection.RowModel({singleSelect: true}),
                // 编辑单元 必须在columns中包含有editor属性
                selType: 'cellmodel',
                plugins: [
                    Ext.create('Ext.grid.plugin.CellEditing', {
                        clicksToEdit: 1
                    })
                ],
                // Ext.grid.GridView
                viewConfig: {
                    columnsText: '显示的列',
                    scrollOffset: 30,
                    sortAscText: '升序',
                    sortDescText: '升序',
                    // 自动填满
                    forceFit: true,
                    enableRowBody: true,
                    getRowClass: function (record, rowIndex, p, ds) {
                        var cls = 'white-row';
                        switch (record.data.color) {
                            case '#FBF8BF' :
                                cls = 'yellow-row'
                                break;
                            case '#99CC99' :
                                cls = 'green-row'
                                break;
                            case '#F5C0C0' :
                                cls = 'red-row'
                                break;
                        }
                        return cls;
                    }
                },
                // 添加底部行 显示分页信息
                bbar: new Ext.PagingToolbar({
                    // 指定bbar的样式
                    cls: 'rightPage',
                    pageSize: 10,
                    store: store,
                    displayInfo: true,
                    // 显示信息 只有当displayInfo设置为true的时候才会显示
                    displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
                    // 没有数据时显示的信息
                    emptyMsg: "没有记录"
                }),
                tbar: ['-', {
                    text: '添加一行',
                    handler: function () {
                        var p = {
                            id: '',
                            name: '',
                            sex: '',
                            descn: '',
                            color: '#FBF8BF',
                            date: '1970-01-15T02:58:04'
                        };
                        //grid.stopEditing();
                        store.insert(0, p);
                        //grid.startEditing(0, 0);
                    }
                }, '-', {
                    text: '删除一行',
                    handler: function () {
                        Ext.Msg.confirm('信息', '确定要删除？', function (btn) {
                            if (btn == 'yes') {
                                // 获得表格的选择模型
                                var sm = grid.getSelectionModel();
                                // 从选择模型中获得选中的单元格 对应的单元格有两个属性 一个是行号 一个是列号 此处通过行号获取记录
                                var record = sm.getSelection()[0];
                                store.remove(record);
                            }
                        });
                    }
                }, '-']
            });

            /**
             * 点击操作 显示数据
             */
            // grid.on('itemclick', function () {
            //     var selected = grid.getSelectionModel().selected;
            //     for (var i = 0; i < selected.getCount(); i++) {
            //         // 根据选择模型获取数据 如果选择模型为单元格 那么获取的为单元格数据 如果是行模型 则获取的是行数据
            //         var record = selected.get(i);
            //         Ext.Msg.alert('提示', record.get("id") + "," + record.get("name") + "," + record.get("descn"));
            //     }
            // });

            Ext.get('remove').on('click', function () {
                // 删除第二行数据
                store.remove(store.getAt(1));
                // 执行视图刷新 并没有效果
                grid.view.refresh();
            });
        });
    </script>
    <style type="text/css">
        .rightPage {
            float: right;
            width: 400px;
        }
    </style>
</head>
<body>
<div id="grid"></div>
<input type="button" id="remove" value="删除第二行"/>
</body>
</html>

在这里插入图片描述
加入数据类型组件，比如NumberField限制只能输入数字，ComboBox限制只能输入备选项，DateField限制只能选择日期，Checkbox则限制从true和false中选择其一。

           var comboData = [
                [0,'新版ext教程'],
                [1,'ext在线支持'],
                [2,'ext扩展']
            ];

            // 表格包含的列
            var columns = [
                // 显示行号
                new Ext.grid.RowNumberer(),
                // header 标题 width 宽度 sortable 当前列是否可排序
                {header: '编号', dataIndex: 'id', width: 100, sortable: true, editor: {allowBlank: false}},
                {header: '名称', dataIndex: 'name', width: 100, sortable: false},
                // 通过renderer函数将male显示为红男 而其他为绿女
                {
                    header: '性别', dataIndex: 'sex', width: 100, sortable: false, renderer: function (value) {
                        if (value == 'male') {
                            return "<span style='color: red;font-weight: bold'>男</span><img src='icons/user_male.png'>";
                        } else {
                            return "<span style='color: green;font-weight: bold'>女</span><img src='icons/user_female.png'>";
                        }
                    }
                },
                {header: '描述', dataIndex: 'descn', width: 100, sortable: false, renderer: renderDescn},
                {header: '颜色', dataIndex: 'color', width: 100, sortable: false, renderer: renderMotif},
                // {header: '日期', dataIndex: 'date', renderer: Ext.util.Format.dateRenderer('Y-m-d'), width: 400}
                {
                    header:'日期',
                    dataIndex:'date',
                    // 日期控件
                    editor:new Ext.form.DateField({
                        // 日期格式
                        format: 'Y-m-d',
                        minValue: '2007-12-14',
                        // 禁止用户选择星期几
                        disabledDays: [0, 6],
                        disabledDaysText: '只能选择工作日'
                    }),
                    renderer: function(value) {
                        return Ext.Date.format(value, "Y-m-d");
                    }
                },{
                    header:'判断列',
                    dataIndex:'check',
                    // checkbox只能选择true or false
                    editor:new Ext.form.Checkbox({
                        allowBlank: false
                    }),
                    renderer:function(value) {
                        return value ? '是' : '否';
                    }
                },
                {
                    header:'数字列',
                    dataIndex:'number',
                    editor:new Ext.form.NumberField({
                        allowBlank: false,
                        allowNegative: false,
                        maxValue: 10
                    })
                },{
                    header:'选择列',
                    dataIndex:'combo',
                    //
                    editor:new Ext.form.ComboBox({
                        store: new Ext.data.SimpleStore({
                            fields:['value','text'],
                            data: comboData
                        }),
                        emptyText: '请选择',
                        mode: 'local',
                        triggerAction: 'all',
                        valueField: 'value',
                        displayField: 'text',
                        // 不能通过readonly来设置只读属性 否则会造成无法正常显示 需要将editable设置为false
                        editable: false
                    }),
                    // 必须设置renderer否则显示的数据时value值 而不是text 毕竟编辑器只是在实际编辑时起作用 表格与editor之间共享的是数据 显示层要依靠各自的实现
                    renderer: function(value){
                        return comboData[value][1];
                    }
                }
            ];

            var data = [
                ['1', 'name1', 'male', 'descn1', '#FBF8BF', '2021-03-18T02:58:04',true,1.1,0],
                ['2', 'name2', 'female', 'descn2', '#99CC99', '2021-03-17T02:58:04',false,2.2,1],
                ['3', 'name3', 'male', 'descn3', '#F5C0C0', '2021-03-16T02:58:04',false,0.6,2],
                ['4', 'name4', 'female', 'descn4', '#FFFFFF', '2021-03-15T02:58:04',true,3.5,1],
                ['5', 'name5', 'male', 'descn5', '#FFFFFF', '2021-03-12T02:58:04',true,2,2]
            ];
            /**
             * 数据存储对象store负责将原始数据（二维数组、JSON对象数组、XML文本等）转为Ext.data.Record类型对象
             * @type {Ext.data.ArrayStore}
             */
            var store = new Ext.data.ArrayStore({
                data: data,
                fields: [
                    {name: 'id'},
                    {name: 'name'},
                    {name: 'sex'},
                    {name: 'descn'},
                    {name: 'color', type: 'string'},
                    // 日期类型处理 Y是年 m是月 d是日期 H是小时 i是分钟 s是秒
                    {name: 'date', type: 'date', dateFormat: 'Y-m-dTH:i:s'},
                    {name: 'check'},
                    {name: 'number'},
                    {name: 'combo'}
                ],
                // 设置默认的排序规则
                sorters: [{property: "id", direction: "DESC"}]
            });

在这里插入图片描述
在这里插入图片描述
添加属性表格控件PropertyGrid

            var propertygrid = new Ext.grid.PropertyGrid({
                title: '属性表格',
                autoHeight: true,
                width: 300,
                renderTo: 'propertygrid',
                viewConfig: {
                    forceFit: true
                },
                // string、date、bool和number都对应默认的编辑器
                source: {
                    "名字": "不告诉你",
                    "创建时间": new Date(Date.parse('12/15/2007')),
                    "是否有效": false,
                    "版本号": .01,
                    "描述": "嗯，估计没啥可说的"
                }
            });

            // PropertyGrid默认是提供编辑功能的 使用以下的方法禁用这个编辑功能
            propertygrid.on("beforeedit",function(e){
                e.cancel = true;
                return false;
            });

在这里插入图片描述

lang20150928
关注
专栏目录
EXTJS 4.2 实现 gridpanel 鼠标悬停单元格以提示信息的方式显示单元格内容。
iteye_7017的博客
08-08 1369
Ext4JS官方API中给出的Ext.tip.ToolTip的用法如下： grid.getView().on('render', function(view) { view.tip = Ext.create('Ext.tip.ToolTip', { // 所有的目标元素 target: view.el, // 每个网格行导致其自己...
Extjs4.2 根据不同的数值设置tabpanel行的背景颜色
04-17
通过以上步骤，我们不仅学习了如何在ExtJS 4.2中根据不同数值设置TabPanel中GridPanel行的背景颜色，而且还了解了如何利用CSS和JavaScript结合来实现灵活多变的界面效果。这种方法不仅适用于数值类型的数据，还可以...
神器网格布局，基础教学
weixin_47281041的博客
11-20 142
html布局神器之 神器GRID布局 我们常见的布局分为以下几种 固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸； 可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局； 弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果； 混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效
ext.grid的配置属性和方法
weixin_34023863的博客
09-07 99
a) activeItem：渲染布局时激活的子元素。b) applyTo：指定渲染对象。c) autoDestroy：当容器的子元素从容器中移除时是否自动销毁。d) autoExpandColumn：指定自动填充表格剩余区域的列ide) autoExpandMax：可自动扩张的最大宽度。f) autoExpandMin：可自动扩张的最小宽度g) autoHeight:自动扩充...
Ext4.2学习之GridPanel行编辑功能
m0_37607945的博客
03-19 303
首先定义一个Ext.grid.plugin.RowEditing类型的编辑器 然后在表格的plugins属性当中添加即可。 结果如下所示 对应源代码 <!DOCTYPE html> <html> <head> <title>Hello World</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <
Extjs-表格 Ext.grid.GridPanel
mengzhengjie的专栏
03-29 1914
Extjs-表格 Ext.grid.GridPanel 项目中的grid 自动显示行号 [javascript] view plaincopy rn = new Ext.grid.RowNumberer();   复选框 [javascript] view plaincopy
ExtJS中表格控件的使用，属性设置和数据的获取
Follow heart
08-02 318
ExtJS中表格的特性简介 表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，xtype为grid 表格的列信息由Ext.grid.ColumnModel定义 表格的数据存储器由Ext.data.Store定义，根据解析数据的不同，数据存储器可具体分为如下几种： JsonStore，SimpleStore，GroupingStore… 一个表格的基本编写过程： ...
ext4.2学习之路
04-27
### ext4.2学习之路：深入理解Ext JS 4.2框架 #### 一、Ext JS 4.2概述 Ext JS是一款强大的企业级富客户端Web应用程序开发框架，基于JavaScript和HTML5技术，用于构建高性能的桌面和移动Web应用程序。Ext JS 4.2...
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
10-20
在Extjs中，GridPanel组件是非常常用的一个表格组件，它提供了丰富的功能来展示和操作数据。其中，复选框（checkbox）是交互式元素中用于表示选中状态的常见组件。然而，在某些业务场景中，可能需要根据数据行的特定...
gridPanel 新增时，自动添加默认值
chenzhh1987的专栏
01-31 217
[code="java"]var grid = this.grid, store = grid.getStore(), Record = store.reader.recordType; var proTitleSn=Ext.getCmp('previous_title_sn').getValue(); var r = new Record({pro_title_sn:proTi...
Ext.GridPanel 用法总结（一）—— Grid基本用法
百福骈臻庆吉昌
05-25 8952
GridPanel类是基于基础列表接口具代表性的主要实现类。也是最常用的Ext组件之一。一：首先定义grid的数据源 //初始化Ext状态管理器，在Cookie中记录用户的操作状态，如果不启用，象刷新时就不会保存当前的状态，而是重新加载 Ext.state.Manager.setProvider(new Ext.state.CookieProvid
ext-4.2之grid的高级应用：增删改查！
starjuly的专栏
01-10 3475
ext-4.2之grid的高级应用：增删改查！
Ext 4 关于实现grid的列的宽度随数据的长度自动改变
的博客
08-29 1749
去这个grid的store中： listeners:{          load: {              fn: function(store){                  Ext.getCmp("list_grid").headerCt.getGridColumns()[1].width = 200;                  var c = Ext.getC...
Ext Grid控件的配置与方法
zoe的专栏
02-10 1913
<br />1、Ext.grid.GridPanel <br />主要配置项： <br />store：表格的数据集 <br />columns：表格列模式的配置数组，可自动创建ColumnModel列模式 <br />autoExpandColumn：自动充满表格未用空间的列，参数为列id，该id不能为0 <br />stripeRows：表格是否隔行换色，默认为false <br />cm、colModel：表格的列模式，渲染表格时必须设置该配置项 <br />sm、selModel：表格的选择模式，默
Ext.grid.EditorGridPanel使用方法
weixin_33979363的博客
12-29 118
首先定义一个EditorGridPanel， var maintainceOrderGrid = new Ext.grid.EditorGridPanel( {// 创建Grid表格组件 applyTo : 'maintainorderinfo-grid-div',// 设置表格现实位置 frame : true,// 渲染表格面板 tbar : too...
ExtJs4.1:新建一个GridPanel并在弹出窗口中显示
追
01-22 6805
新建GridPanel： var grid = Ext.create('Ext.grid.Panel', { border: false, store: store, columns: createColumns(4), loadMask: true, features: [filters],
Ext.grid.GridPanel
zhaoqian888的专栏
10-10 542
1、Ext.grid.GridPanel 主要配置项： store：表格的数据集 columns：表格列模式的配置数组，可自动创建ColumnModel列模式 autoExpandColumn：自动充满表格未用空间的列，参数为列id，该id不能为0 stripeRows：表格是否隔行换色，默认为fa...
Ext学习笔记：GridPanel基础
"这篇教程是针对ExtJS的学习笔记，特别是关于GridPanel的基础知识，适合初学者。基于Ext2.2版本，作者旨在通过每周的总结帮助网络上的学习者。教程中将详细介绍GridPanel的声明方式、属性设置以及相关概念，如类的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lang20150928

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值