<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </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>
</head>
<body>
<br>
<script>
Ext.onReady(function(){
//定义表格
var grid = new Ext.grid.PropertyGrid({
title:'属性表格',
renderTo: 'grid',
width:300,
autoHeight: true,
source: {
"名字":"张三",
"创建时间":new Date(Date.parse('12/15/2007')),
"是否有效":false,
"版本号": .01,
"描述":"descn"
}
});
//可选的。用来控制VALUE是不是可修改的
grid.on("beforeedit",function(e) {
e.cancel = true;
return false;
});
});
//为了取消NAME那一列的默认排序
Ext.grid.PropertyGrid.prototype.initComponent = function () {
this.customEditors = this.customEditors || {};
this.lastEditRow = null;
var store = new Ext.grid.PropertyStore(this);
this.propStore = store;
var cm = new Ext.grid.PropertyColumnModel(this,store);
// store.store.sort('name','ASC');
this.addEvents(
'beforepropertychange',
'propertychange'
);
this.cm = cm;
this.ds = store.store;
Ext.grid.PropertyGrid.superclass.initComponent.call(this);
this.selModel.on('beforecellselect',function(sm,rowIndex,colIndex) {
if(colIndex == 0) {
this.startEditing.defer(200,this, [rowIndex,1]);
return false;
}
},this);
};
</script>
<table border="1" align="center">
<tr>
<td><font color="red">PropertyGrid表格样式如下:</font></td>
</tr>
<tr>
<td><div id="grid" > </div></td>
</tr>
<tr>
<td><input type="submit" id="remove" value="提交内容"/></td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
1. **自定义样式**:首先,我们需要定义一个Grid的样式,其中包含用于表示表格线的边框。在Resources部分,创建一个新的Style,针对Grid的RowDefinition和ColumnDefinition属性设置边框样式。例如,我们可以为每行和...
在处理大量数据时,为了提高可读性,我们经常会在`Grid`中实现隔行换色的效果,就像电子表格那样。这种效果可以使用户更容易区分和识别数据行,提升用户体验。以下将详细讲解如何在WPF中实现`Grid`隔行换色。 首先...
`GroupPropertyGrid`是基于`ExtJS`框架构建的一个组件,它扩展了原生的`PropertyGrid`功能,尤其在数据展示和管理方面提供了更高级别的定制化能力。`PropertyGrid`通常用于显示和编辑一系列属性或配置项,每个属性都...
在.NET框架中,DataGrid控件是用于展示表格数据的重要组件,常被广泛应用于Windows Forms或WPF应用程序中。在实际应用中,我们往往需要根据设计需求对DataGrid的外观进行定制,包括改变表头的样式。本篇将详细介绍...
属性表格 - PropertyGrid 窗口应用 窗口 - Window 对话框 - Dialog 消息窗口 - Messager 表单相关 表单 - Form Demo 日历 - Calendar 下拉选择框 - Custom Combo 下拉组合框 - ComboBox 数据...
- **PropertyGrid**:属性表格,采用两列布局,专门用于展示对象的属性。 - **SortableTable**:支持多列排序功能的表格。 - **FilterableTableModel**:可过滤的表模型,允许针对每一列进行过滤设置。 - **...
3. **grid.js**:这个名字可能暗示这是一个表格数据的管理模块,用于处理表格的展示和交互,比如分页、排序、过滤等功能。在jQuery中,可以使用`$.ajax`进行异步数据获取,`$.each`遍历数据并生成表格行。 4. **...
ListView由多个视图模式支持,如List、Grid、Details等。默认情况下,ListView采用Details视图,显示带有列标题的表格形式。在WPF中,我们可以利用XAML语言,通过DataTemplate和ControlTemplate来定制ListView的外观...
2. 表格布局:通过表格相关的属性(如`display: table`)来实现类似表格的布局。 3. 浮动布局:利用`float`属性实现元素的左右浮动,常用于创建多列布局。 4. 定位布局:使用`position`属性(如`relative`、`...
在开发过程中,数据呈现是关键一环,而DataGrid控件则是展示表格数据的标准组件。在Silverlight应用中,通过自定义DataGrid表头样式,可以提升用户界面的美观度和用户体验。 首先,我们要理解DataGrid的基本结构。...
在"PropertyGrid"和"ListControl"这两个文件中,我们可以推测"PropertyGrid"可能对应属性控件的实现,而"ListControl"可能对应报表控件的实现。这些源代码可能包含了以下内容: - 数据结构:用于存储和管理控件中...
在WPF中,GridView是最常见的ListView视图,它将数据项组织成表格形式。 要实现标题描述中的"2个grid的实例",我们需要创建两个独立的GridView,并将它们配置在同一个ListView中。以下步骤将指导你完成这个过程: ...
此外,CSS3的Flexbox或Grid布局也可能被用来更好地对齐和组织表格内的元素。 Bootstrap的按钮组件(Button)提供了多种风格和大小的选择,可以轻松地调整按钮的外观。在悬停时,CSS3的过渡效果可以平滑地改变按钮的...
在创建可调整列宽的表格时,我们需要为每个 `<th>` 或 `<td>` 添加一个拖动柄(通常是一个CSS样式处理的小竖线),用户可以通过拖动这个柄来改变列宽。 在"moveTab.js"中,我们可能会看到以下关键代码片段: 1. **...
在C#或.NET Framework中,可以使用`System.Windows.Forms.PropertyGrid`类来实现。 2. **组合框(ComboBox)**:组合框是Windows Forms中的一种控件,它结合了文本输入框和下拉列表的功能。用户可以手动输入文本,...
9.4 PropertyGrid属性表格控件 9.4.1 PropertyGrid简介 9.4.2 只读的PropertyGrid 9.4.3 对name列强制排序并获得value 9.4.4 自定义编辑器 9.5 分组表格控件——Group 9.5.1 分组表格简介 9.5.2 Ext.grid....
9.4 PropertyGrid属性表格控件 9.4.1 PropertyGrid简介 9.4.2 只读的PropertyGrid 9.4.3 对name列强制排序并获得value 9.4.4 自定义编辑器 9.5 分组表格控件——Group 9.5.1 分组表格简介 9.5.2 Ext.grid....
1. **EXTJS组件**:EXTJS的核心是它的组件模型,包括GridPanel、TreePanel、PropertyGrid、EditorGridPanel、TabPanel、FormPanel、Panel、Window、ToolTip和FieldSet等。这些组件可以组合起来创建复杂的用户界面,...
Grid Table是一种数据呈现方式,它以网格布局显示表格数据,每个单元格对应于数据模型的一个属性。它的核心优势在于可以轻松地调整列宽、添加列头以及处理排序和分页等操作。 创建一个基于Grid Table的报表涉及以下...
4. propertygrid - xtype: 'propertygrid', 描述: 属性表格 5. dataview - xtype: 'dataview', 描述: 数据显示视图 6. listview - xtype: 'listview', 描述: 列表视图 工具栏组件 1. pagingtoolbar - xtype: '...