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

最新推荐文章于 2024-05-31 10:26:40 发布
最新推荐文章于 2024-05-31 10:26:40 发布
阅读量121 收藏
点赞数
分类专栏： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJs生成复选框和序号
木林森
06-18 175
[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 680
Extjs行选择模型与Grid视图 Extjs行选择模型：Ext.data.RowSelectionModel，下面为其方法： selectFirstRow()：选择第一行 selectLastRow(keepExisting)：选择最后一行，keepExisting为true时保留原来选择行，否则清除原来选择 selectNext(keepExisting)：选择下一行 selectP
Extjs 介绍 及API 官方例子 Ext JS 3.1 RC
atgoingguoat的专栏
03-20 530
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表格——行号、复选框、选择模型
qd_jz_gaoxiao
05-19 1863
一、 设置行号    行号的设置主要问题在于删除某一行后需要重新计算行号   Ext.onReady(function() {          var cm = new Ext.grid.ColumnModel([                      new Ext.grid.RowNumberer(),           --在这里设置行号
Ext --Grid复选框列
yanpengfeil的博客
07-18 5897
在网上找了好多但是都是所问非所答，最后找到了两篇比较好的文章，记录下 今天我们主要介绍一下grid的单选、多选功能，并告诉小伙伴们如何显示一个选择框列 extjs grid默认支持单选 在前面几节的例子中，我们已经见识了extjs grid的强大。今天说到单选和多选，我们不妨打开前面的例子，其实在grid默认的情况下已经可以进行单选的，如图： extjs grid的行选择 在ex...
ExtJS4.2学习(五)表格渲染与复选框
yundashi168.com
03-22 1336
前几章做的例子，你有没有发现太单调啦？呵呵，相信聪明的你一定知道，光显示文字，那这功能太弱爆了吧，现在我们来看下ExtJs给我们带来的表格渲染和复选框等功能。 有的人问我了，为什么你们的默认表格样式和我做的效果图不一样呢，呵呵，那是因为我引入了ExtJS4.2的其他样式，并非默认的样式，换样式很简单，只需要更改Link引入的文件就可以很轻松的换各种样式，哇~是不是很给力啊，你敢信？
extjs 渲染之前的方法_ExtJS4.2学习(五)表格渲染与复选框
weixin_39860975的博客
12-19 303
前几章做的例子，你有没有发现太单调啦？呵呵，相信聪明的你一定知道，光显示文字，那这功能太弱爆了吧，现在我们来看下ExtJs给我们带来的表格渲染和复选框等功能。有的人问我了，为什么你们的默认表格样式和我做的效果图不一样呢，呵呵，那是因为我引入了ExtJS4.2的其他样式，并非默认的样式，换样式很简单，只需要更改Link引入的文件就可以很轻松的换各种样式，哇~是不是很给力啊，你敢信？好了，不扯远了，下...
Ext Js 3.2 表格应用复选框
张波的技术积累
08-22 4428
1：代码 <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServ
Extjs 点击复选框在表格中增加相关信息行
11-26
//省份复选框 var $provinceCheckbox01 = new Ext.form.CheckboxGroup({ xtype: 'checkboxgroup', fieldLabel: '省份选择', labelWidth: 60, columns: 9, vertical: true, margin: '10 0 0 15', defaults: { ...
关于extjs treepanel复选框选中父节点与子节点的问题
12-02
extjs 如图，实现带有复选框的树,选中父节点时，选中所有子节点。取消所有子节点时，才能取消根节点。 代码如下: var Fpanel = new Ext.tree.TreePanel({ id:’ptree’, region:’west’, layout:’anchor’, border...
Extjs4.2带复选框下拉树组件
03-11
网上搜索了许久未找到...Extjs4.2 带复选框的下拉树，解决了向下勾选子节点、向上勾选父节点，正选反选获取值等问题，勾选的节点显示displayfield值直接显示在下拉文本框中。需要引用ext-all.js和ext-all-neptune.css
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1084
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1058
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 323
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 142
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
React-useState
weixin_46479909的博客
05-29 199
本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（useState是一个React Hook（函数），它允许我们向组件添加一个。，从而控制影响组件的渲染结果。
KeyExpirationEventMessageListener监听器的使用
最新发布
qq_47910339的博客
05-31 381
KeyExpirationEventMessageListener监听器的使用
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、付费专栏及课程。

余额充值