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

Ext4.2 grid插入复选框,行号,指定顺序

    博客分类:
  • Ext
阅读更多

 

一、行号

var rm = new Ext.grid.RowNumberer({header : '',width : 28}),
或 {xtype: 'rownumberer', header: '', width: 28},

 

二、复选框

//创建checkBox 列
	var selModel = Ext.create('Ext.selection.CheckboxModel',{
		injectCheckbox: 1	  //插入的位置
        //mode: "SIMPLE",     //"SINGLE"/"SIMPLE"/"MULTI"
        //checkOnly: true     //只能通过checkbox选择
	});

 

在Ext4的grid中配置selModel,不是Ext3中的sm了

我选择在grid中配置selType和selModel,我想把配置都写在一起

var gridOrganization = Ext.create('Ext.grid.Panel', {
	    title: '组织机构列表',
	    region: 'center',
	    margins: '3 0 0 0',
	    store: stoOrganization,
	    selType: "checkboxmodel",
	    selModel: {
	        injectCheckbox: 1	//插入的位置
//	        mode: "SIMPLE",     //"SINGLE"/"SIMPLE"/"MULTI"
//	        checkOnly: true     //只能通过checkbox选择
	    },
	    columns: [
	        //new Ext.grid.RowNumberer({header : '',width : 28}),
	        {xtype: 'rownumberer', header: '', width: 28},
	        //selModel,
	        { header: 'id',  dataIndex: 'id', hidden: true},
	        { header: 'parentId', dataIndex: 'parentId', hidden: true, flex: 1 },
	        { header: '代码', dataIndex: 'code'},
	        { header: '名称', dataIndex: 'name' },
	        { header: '排序号', dataIndex: 'sortno' }
	    ],
//	    dockedItems: [{
//	        xtype: 'pagingtoolbar',
//	        store: stoOrganization,   // GridPanel中使用的数据
//	        dock: 'bottom',
//	        displayInfo: true
//	    }]
	    tbar: Ext.create('Ext.toolbar.Toolbar', {
	        items: [
	            {
	                // xtype: 'button', // 默认的工具栏类型
	                text: '新增',
	                id : 'btn_add',
					iconCls : 'addIcon',
					handler : function() {
						initAdd();
					}
	            }, {
	                text: '修改',
	                id : 'btn_modify',
	                iconCls : 'page_edit_1Icon',
					handler : function() {
						initModify();
					}
	            }, {
	                text: '删除',
	                id : 'btn_remove',
	                iconCls : 'page_delIcon',
					handler : function() {
						remove();
					}
	            }
	        ]
	    }),
	    bbar: Ext.create('Ext.PagingToolbar',{
            store: stoOrganization, 
            displayInfo: true, 
            items : ['-', '  ', pagesize_combo]
//            displayMsg: 'Displaying topics {0} - {1} of {2}', 
//            emptyMsg: "No topics to display", 
	    }),
	    listeners: {
	    	//'itemclick' : function(view,record,item,index,e,eOpts){ 
	    	itemdblclick: function(view,record,item,index,e,eOpts){
	    		//alert(record.data.id);
	    		formPanelDetails.getForm().reset();
	    		formPanelDetails.loadRecord(record);
	    		winDetails.show();
	    	}
	    }
	});

 

分享到:
评论

相关推荐

    grid js 例子一个 ext 的

    - **ColumnModel**:定义 Grid 的列模型,其中包括行号、选择复选框以及两列数据(`id` 和 `name`)。 #### 3. Grid 配置详解 让我们进一步分析 Grid 的配置: - **RowNumberer**:为每一行添加一个行号。 - **...

    ExtJs GridPanel双击事件获得双击的行

    本篇文章将深入讲解如何在ExtJs GridPanel中实现双击事件,并获取双击的行以及选中的复选框状态。 首先,我们要了解GridPanel的基本结构。GridPanel由Store(数据存储)和ColumnModel(列模型)组成,它们定义了...

    深入浅出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 在表格...

    精通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 在表格...

    asp.net Ext grid 显示列表

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

    ExtJs_grid.txt

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

    EXT WebUi标签库使用说明

    - **checkBoxGroup**:一组复选框,便于管理多个复选框的选中状态。 - **select**:下拉框,支持编辑和智能填充,提升用户体验。 - **dateEdit**:日期选择器,方便用户输入日期信息。 - **groupBox**:分组容器...

    EXTJS教材,教程

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

    Extjs4 GridPanel 的几种样式使用介绍

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

    ExtAspNet GridPanel的一般用法

    - **ext:CheckBoxField**:用于创建复选框列。 - **ext:LinkButtonField**:用于创建链接样式按钮列。 ##### (四)数据绑定 最后,我们需要在后端代码中实现数据绑定逻辑: ```csharp protected void Page_Load...

Global site tag (gtag.js) - Google Analytics