`
stoneuu
  • 浏览: 45758 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类：
  • ui
 
阅读更多

显示行号

<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>

 

分享到：
| extjs 数据渲染 枚举 性别 行 单元格
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    精通JS脚本之ExtJS框架.part2.rar

    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 GridPanel双击事件获得双击的行

    在ExtJs中，我们可以使用`viewConfig`配置项中的`selType`来定义选择模型，通常是'checkboxmodel'，以便在每行前添加复选框。然后通过`selModel`配置项设置双击时选中复选框的行为。同时，我们可以监听`itemdblclick...

    深入浅出ExtJS第2版

    3.6　自动显示行号和复选框 42 3.6.1　自动显示行号 43 3.6.2　复选框 44 3.7　选择模型 45 3.8　表格视图--Ext.grid.GridView 46 3.9　表格分页 47 3.9.1　为Grid添加分页工具条 48 3.9.2　通过后台脚本获得分页...

    精通JS脚本之ExtJS框架.part1.rar

    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_grid.txt

    除了基本的显示和交互外，ExtJs Grid还支持多种自定义功能，如添加行号、复选框选择模型、右键菜单等。这些功能的实现通常需要通过扩展`ColumnModel`和监听特定的Grid事件来完成。 以上是对ExtJs Grid组件的详细...

    EXTJS教材，教程

    - **自定义能力**：可以生成行号、支持复选框全选、动态选择显示的列、本地和远程分页、单元格自定义渲染、可编辑网格、添加/删除行、脏数据提示、大小调整和行拖拽等。 - **与其他组件交互**：Grid之间以及与Tree...

    Extjs4 GridPanel 的几种样式使用介绍

    此外，还可以使用`selModel`配置项自定义选择模型的行为，例如启用或禁用复选框选择，或者添加选择事件监听器。 总结，ExtJS4的GridPanel提供了丰富的样式和选择模式，允许开发者根据需求定制表格的外观和交互行为...

    EXT WebUi标签库使用说明

    - **gridWithCheckBox**：复选框网格，包含复选框以选择行。 - **gridWithPagingTool**：分页网格，包含分页工具条。 - **propertyEditor**：属性编辑器，用于编辑属性值。 - **propertyData**：属性数据，存储...

    解析Extjs与php数据交互(增删查改)

    `RowNumberer`生成行号，`CheckboxSelectionModel`提供复选框选择功能。其余列根据Record中的字段定义，如`{header:"ID",dataIndex:"id",width:50,sortable:true,menuDisabled:true}`。 对于数据的增删查改，我们...

    asp.net Ext grid 显示列表

    sm, // 复选框列 new Ext.grid.RowNumberer({ header: "自动显示行号", width: 100 }), // 行号列 { header: '员工编号', dataIndex: 'EmployeeID', sortable: true, width: 100 }, { header: '名字', dataIndex...

Magicbox
Global site tag (gtag.js) - Google Analytics