extjs 选择模型 复选框 显示行号

最新推荐文章于 2017-11-02 15:42:35 发布
最新推荐文章于 2017-11-02 15:42:35 发布
阅读量144 收藏
点赞数
分类专栏： ui 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stoneii/article/details/84510078
版权

显示行号

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>03.grid</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all.js"></script>
        <script type="text/javascript">
Ext.onReady(function(){

    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);

    var data = [
        ['1','male','name1','descn1'],
        ['2','female','name2','descn2'],
        ['3','male','name3','descn3'],
        ['4','female','name4','descn4'],
        ['5','male','name5','descn5']
    ];

    var store = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        cm: cm
    });

});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../shared/examples.js"></script>
        <div id="grid"></div>
    </body>
</html>

 删除行并刷新行号

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>03.grid</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all.js"></script>
        <script type="text/javascript">
Ext.onReady(function(){

    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);

    var data = [
        ['1','male','name1','descn1'],
        ['2','female','name2','descn2'],
        ['3','male','name3','descn3'],
        ['4','female','name4','descn4'],
        ['5','male','name5','descn5']
    ];

    var store = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        cm: cm
    });

    Ext.get('remove').on('click', function() {
        store.remove(store.getAt(1));
        grid.view.refresh();
    });

});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../shared/examples.js"></script>
        <div id="grid"></div>
        <input type="button" id="remove" value="删除第二行" />
    </body>
</html>

 选择模型，复选框

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>03.grid</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all.js"></script>
        <script type="text/javascript">
Ext.onReady(function(){

	//点击行即可选择
    var sm = new Ext.grid.CheckboxSelectionModel();
	//只允许点击复选框选择
	//var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});

    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        sm,
        {header:'编号',dataIndex:'id'},
        {header:'性别',dataIndex:'sex'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);

    var data = [
        ['1','male','name1','descn1'],
        ['2','female','name2','descn2'],
        ['3','male','name3','descn3'],
        ['4','female','name4','descn4'],
        ['5','male','name5','descn5']
    ];

    var store = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])

    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        cm: cm,
        sm: sm
    });

});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../shared/examples.js"></script>
        <div id="grid"></div>
    </body>
</html>

 选择模型，仅允许单行选中

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>03.grid</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all.js"></script>
        <script type="text/javascript">
Ext.onReady(function(){

    var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);

    var data = [
        ['1','name1','descn1'],
        ['2','name2','descn2'],
        ['3','name3','descn3'],
        ['4','name4','descn4'],
        ['5','name5','descn5']
    ];

    var store = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        cm: cm,
        sm: new Ext.grid.RowSelectionModel({singleSelect:true})
    });

});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../shared/examples.js"></script>
        <div id="grid" style="height:300px;"></div>
    </body>
</html>

 获取选择数据

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>03.grid</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all.js"></script>
        <script type="text/javascript">
Ext.onReady(function(){

    var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);

    var data = [
        ['1','name1','descn1'],
        ['2','name2','descn2'],
        ['3','name3','descn3'],
        ['4','name4','descn4'],
        ['5','name5','descn5']
    ];

    var store = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        autoHeight: true,
        renderTo: 'grid',
        store: store,
        cm: cm,
        sm: new Ext.grid.RowSelectionModel({singleSelect:true})
    });

    grid.on('click', function() {
        var selections = grid.getSelectionModel().getSelections();
        for (var i = 0; i < selections.length; i++) {
            var record = selections[i];
            Ext.Msg.alert('提示', record.get("id") + "," + record.get("name") + "," + record.get("descn"));
        }
    });

});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../shared/examples.js"></script>
        <div id="grid" style="height:300px;"></div>
    </body>
</html>

 

stoneii
关注
专栏目录
ExtJs生成复选框和序号
木林森
06-18 206
[code="javascript"] var sm = new Ext.selection.CheckboxModel(); var record_start = 0; var myGird = Ext.create('Ext.grid.Panel', { store : mystore, selModel:sm, //添加复选框 Ext.create('Ext.selecti...
Extjs行选择模型
yingzi1202的专栏
04-27 749
Extjs行选择模型与Grid视图 Extjs行选择模型：Ext.data.RowSelectionModel，下面为其方法： selectFirstRow()：选择第一行 selectLastRow(keepExisting)：选择最后一行，keepExisting为true时保留原来选择行，否则清除原来选择 selectNext(keepExisting)：选择下一行 selectP
Extjs 介绍 及API 官方例子 Ext JS 3.1 RC
atgoingguoat的专栏
03-20 630
extjs 3.1 API  Ext JS 3.1 RC 例子下载 Extjs介绍 （转载） 官方网站：http://www.extjs.com/ API： http://www.extjs.com/deploy/dev/docs/ 中文API ： http://www.jshuwei.org.cn/Ext3/docs/  extjs 3.1 API 例子下载 附件中有官方示例代...
EXTJS中的grid显示实际行号
weixin_34185364的博客
07-01 168
添加一个新的功能   [javascript] view plaincopy Ext.grid.PageRowNumberer = Ext.extend(Ext.grid.RowNumberer, {       width : 40,          renderer:function(value, cellmeta, record, rowIndex, co...
精通JS脚本之ExtJS框架.part2.rar
03-02
8.5 显示行号和复选框 8.5.1 显示行号 8.5.2 引用复选框 第9章 表格的高级功能 9.1 表格视图——Ext.grid.GridView 9.2 表格分页 9.2.1 添加表格分页显示工具条 9.2.2 从后台脚本获得分页数据 9.2.3 在表格...
ExtJS 实现选择列打印功能
2. **CheckboxSelectionModel**：`Ext.grid.CheckboxSelectionModel` 是一个选择模型，它在每行前面添加一个复选框，使用户能够通过勾选来选择表格中的行。 3. **ColumnModel**：`Ext.grid.ColumnModel` 定义了表格...
EXTJS前端框架详解及中文手册
EXTJS的表格控件不仅支持基本操作如单选、多选、行高亮、列宽拖拽调整和按列排序，还具备一些高级特性，如自动生成行号、支持复选框全选、动态选择显示的列、本地和远程分页、单元格自定义渲染等。更进一步，EXTJS的...
ExtJS快速入门：构建前端Ajax框架的高效UI
3. **增强功能**：包括自动生成行号、支持复选框全选、动态选择显示的列，以及本地和远程分页。 4. **单元格渲染**：允许开发者根据需求自定义单元格的显示内容和样式。 在示例代码中，`renderer`属性用于定义...
精通JS脚本之ExtJS框架.part1.rar
03-02
8.5 显示行号和复选框 8.5.1 显示行号 8.5.2 引用复选框 第9章 表格的高级功能 9.1 表格视图——Ext.grid.GridView 9.2 表格分页 9.2.1 添加表格分页显示工具条 9.2.2 从后台脚本获得分页数据 9.2.3 在表格...
ExtJs中checkboxgroup复选框组件的显示问题
afei3418的专栏
04-15 5898
checkboxgroup复选框组件容器，当时用属性   allowBlank：false  必须至少选择一项，否则给出提示 blankText ，出现如下问题： 如果一个没有选择的时候，给出提示，但是布局会变化Ext.onReady(function(){  Ext.QuickTips.init();  var panel=new Ext.form.Panel({   title:'
js接收后端数据回显checkbox打上勾
热门推荐
jaryle的专栏
12-29 1万+
js一般直接接收springmvc后端传递过来的数据，数据一般通过model过来，里面存放的是对象，js中一般不能处理对象数据，所以在controller层把对象数据进行重新封装成（字符串等js可以识别的数据），例如：controller传递过来的是一个包含多个id的list集合，里面存放的是对象，就需要在controller层对这个list集合进行遍历，获取每个id然后，使用字符串存取，然后通过
Extjs—checkbox的取值以及修改时已选项的回显问题
QHJJHQ的博客
11-02 5639
Extjs—checkbox的取值以及修改时已选项的回显问题 注：我也是第一次在CSDN写文章，格式什么的各位就不要在意了，解决问题才是关键啊   最近在公司做项目的时候，在前段页面中用到了extjs，以前都是使用其它的前端框架，这次也是第一次接触extjs， 在实现代码的过程中遇到了各种各样的问题，其中就包括了extjs中多选框的取值以及修改时已选择项的回显问题 1.怎样取值？ 2....
关于单选框、下拉框、复选框的数据回显问题以及全选和全不选
没有别人学习好并不可怕，可怕的是你还没有别人努力
07-10 1万+
关于单选框、下拉框、复选框的数据回显问题以及全选和全不选
ExtJs 3.2 复选框数据项动态加载
xys_00
08-18 1240
var myCheckboxItems = []; var myCheckboxGroup = new Ext.form.CheckboxGroup({ xtype : 'checkboxgroup', columns : 6, items : myCheckboxItems });; var form = new Ext.FormPanel({ frame : true, bor
Extjs5实现带复选框的多选下拉选，复选框用extjs提供的checkbox样式
昨日情书
09-18 3128
因为网上现有的代码只是实现了复选框效果，在我把窗口关闭后，再打开，复选框还保留着上次的选中状态，因为有这个bug，所以自己把网上的代码给改进了下，加入了未选中事件和用extjs的样式，先上效果图 看着不错吧，这种复选框用的就是extjs的样式，下面大家看一下源代码，首先新创建个MultiSelect.js文件，代码如下Ext.define('Ext.form.MultiSelect', {
多个checkbox 回显
weixin_34416754的博客
04-13 315
2019独角兽企业重金招聘Python工程师标准>>> ...
extjs gridpanel 操作行 得到选中行的列
weixin_34256074的博客
09-15 163
var model = grid.getSelectionModel();model.selectAll();//选择所有行 model.selectFirstRow();//选择第一行 model.selectLastRow([flag]);//选择最后一行,flag为正的话保持当前已经选中的行数,不填则默认falsemodel.selectNext();//选择下一行mod...
extjs6 复选框怎么做显示和隐藏
最新发布
04-21
对于您的问题，您可以使用以下代码来控制ExtJS6中的复选框的显示和隐藏： //获取复选框组件 var checkbox = Ext.getCmp('checkboxId'); //隐藏复选框 checkbox.hide(); //显示复选框 checkbox.show(); 注意：在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值