- 浏览: 844226 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (530)
- Java编程 (64)
- C/C++/D (6)
- .Net/C# (9)
- Ruby (12)
- JavaScript (77)
- XML (1)
- JSON (1)
- Ajax (17)
- ExtJs (81)
- YUI (1)
- JQuery (7)
- DWR (1)
- HTML (7)
- CSS (7)
- Database (6)
- PowerDesigner (23)
- DB2 (2)
- Oracle (57)
- MS SQL Server (8)
- MySQL (6)
- JSP/Servlet/JSTL/TagLib (3)
- Spring (1)
- Hibernate (0)
- iText (0)
- Struts (0)
- Struts2 (0)
- iReport (0)
- FreeMarker (0)
- HttpClient (1)
- POI (6)
- FckEditor (15)
- Eclipse / MyEclipse (10)
- IntelliJ IDEA (0)
- NetBeans (0)
- Tomcat (11)
- WebLogic (1)
- Jboss (3)
- jetty (4)
- IIS (2)
- CVS/VSS (1)
- FTP (1)
- Windows/DOS (6)
- Linux/Unix (0)
- 软件建模 UML (0)
- Design Pattern & Thinking In Programming (10)
- 数据结构与算法 (12)
- 软件项目管理 (9)
- 行业应用解决方案 (3)
- 电脑软件与故障解决 (13)
- 编程语言 (1)
- 十万个为什么 (3)
- JBPM (2)
- sysbase (2)
- JDBC (8)
- Ant (2)
- Case-计算机辅助软件工程 (1)
- WebService (4)
- 浏览器 (1)
最新评论
-
gaoqiangjava:
同一楼,还请大手帮解决
JAVA读取word文件 -
hyl523:
// 判断数组中的第一个值是否未定义,如果未定义,便定义为空对 ...
javascript面向对象之二 命名空间 -
ping12132200:
ping12132200 写道我抱着个错不是因为:body标签 ...
extjs在IE报对象不支持此属性或方法 -
ping12132200:
我抱着个错不是因为:body标签内的第一个元素不能为文本tex ...
extjs在IE报对象不支持此属性或方法 -
fireinjava:
呀,不错,转走了,谢谢啦~
利用OpenOffice将word转换成PDF
Ext.grid.EditorGridPanel
可编辑数据表格
Config {
clicksToEdit : Number //点几次开始编辑,默认为2
}
方法
EditorGridPanel()
构造,应为 EditorGridPanel(Object config)
startEditing( Number rowIndex, Number colIndex ) : void
stopEditing() : void
开始停止编辑
事件
afteredit : ( Object e )
beforeedit : ( Object e )
validateedit : ( Object e )
下面我们扩展一下刚才的示例应用一下EditorGridPanel
//定义数组
var arr=[
['Bill', 'Gardener','2007-01-02',-10,true],
[ 'Ben', 'Horticulturalist','2007-01-03',-20.1,false],
['你', 'Gardener','2007-02-02',0,true],
['他', 'Gardener','2007-01-04',13,false],
[ '我', 'Horticulturalist','2007-01-05',15.2,false]
];
var reader = new Ext.data.ArrayReader(
...{},
//定义数组到record的映射关系
[
...{name: 'name'},
...{name: 'occupation', mapping: 1},
...{name:'date',type: 'date',dateFormat: 'Y-m-d'}, //用指定的格式转换日期
...{name:'float',type:'float'},
...{name:'bool',type:'bool'}
]
);
//生成元数据
var store=new Ext.data.Store(...{
reader:reader
});
store.loadData(arr);
//自定义可编辑列,从ext的示例抄的,但是却要init郁闷
Ext.grid.CheckColumn = function(config)...{
Ext.apply(this, config);
if(!this.id)...{
this.id = Ext.id();
}
this.renderer = this.renderer.createDelegate(this);
};
//重写了三个方法,捕捉mousedown修改数据
Ext.grid.CheckColumn.prototype =...{
init : function(grid)...{
this.grid = grid;
this.grid.on('render', function()...{
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onMouseDown, this);
}, this);
},
onMouseDown : function(e, t)...{
if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1)...{
e.stopEvent();
var index = this.grid.getView().findRowIndex(t);
var record = this.grid.store.getAt(index);
record.set(this.dataIndex, !record.data[this.dataIndex]);
}
},
renderer : function(v, p, record)...{
p.css += ' x-grid3-check-col-td';
return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
}
//绑定到bool字段
var checkColumn=new Ext.grid.CheckColumn(...{
header: "布尔值",
dataIndex: 'bool'
});
/**//*
现在配置列信息,为了本地化日期选择器,请包含ext-lang-zh_CN.js,并修改Date.dayNames = ["日","一","二","三","四","五","六"];
在Ext.apply(Ext.DatePicker.prototype, {...})中加入okText:"确定",cancelText:"取消";
*/
var col=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(...{header:'序号',width:30}),
...{header:'姓名',sortable: true,dataIndex:'name'},
...{header:'职业',sortable: true,dataIndex:'occupation'},
...{
id:'datacol',
header:'日期',
sortable:true,
dataIndex:'date',renderer: Ext.util.Format.dateRenderer('Y年m月d日'),//格式化显示
editor:new Ext.form.DateField()
},
...{header:'数值',sortable:true,dataIndex:'float',renderer:formatFloat,align: 'right',editor:new Ext.form.NumberField()}, //自定义显示方式,右对齐
checkColumn //这个"选择框列"看起来的确漂亮些,其实是通过修改背景图片实现的
]);
//配置视图信息
var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
view.columnsText='列显示/隐藏';
//现在我们看看可编辑的数据表格能用了吗
var grid=new Ext.grid.EditorGridPanel(...{
el:Ext.getBody(),
height:200,
width:400,
store:store,
cm:col,
view:view
});
//为什么原例不需要init?
checkColumn.init(grid);
grid.render();
function formatFloat(val)...{
var bgcolor;
if(val>0)...{
bgcolor='#FF0000';
}else if(val<0)...{
bgcolor='#00FF00';
}
else...{
bgcolor='#000000';
}
return( ['<span style="color:',bgcolor,'">',val,'</span>'].join(''));
}
Ext.grid.PropertyGrid
属性表格.继承自EditorGridPanel,用习惯ide的用户都会喜欢这个简单的属性表格,
config{
customEditors : Object //自定义属性编辑器
source : Object //数据源
}
方法
PropertyGrid( Object config )
构造
getSource() : Object
setSource( Object source ) : void
得到和设置数据源
事件
beforepropertychange : ( Object source, String recordId, Mixed value,
propertychange : ( Object source, String recordId, Mixed value, Mixed
同样用一个简单的示例来完成PropertyGrid的学习
var grid=new Ext.grid.PropertyGrid(...{
el:Ext.getBody()
,height:200
,width:400
,viewConfig : ...{forceFit:true}
,customEditors:...{
'年龄':new Ext.grid.GridEditor(new Ext.form.NumberField())
}
,source:...{
'姓名':'blackant'
,'年龄':100
}
});
grid.source['性别']='男';
grid.customEditors['性别']=new Ext.grid.GridEditor(new Ext.form.ComboBox(...{
editable:false
,triggerAction: 'all'
,store: new Ext.data.SimpleStore(...{
fields: ['gender'],
data : [['男'],['女']]
})
,displayField:'gender'
,forceSelection:true
,mode:'local'
}));
grid.render();
选择模式都很容易使用,略过,至于其它的扩展,有时间再慢慢研究了,第一步先以学会使用为主
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/blackant2/archive/2007/12/19/1953956.aspx
发表评论
-
extjs在IE报对象不支持此属性或方法
2010-10-06 13:28 2634ExtJS在Firefox里面显示正常,但是用IE打开的时候报 ... -
Ext.grid.EditorGridPanel
2010-10-06 11:38 1619<HTML> <HEAD> ... -
国内首个基于Ext开发开源企业级框架,免费下载!!
2010-07-02 19:47 1817http://www.17ext.com/showforum- ... -
Ext.form.*使用技巧
2010-05-03 12:20 1130设置表单控件为只读: setFieldRead ... -
Ext JS高级插件开发教程
2010-05-03 12:19 1786当创建一个跨浏览器 ... -
项目中常使用的Ext插件
2010-05-03 12:12 1982http://bbs.ajaxjs.com/viewthrea ... -
Ext.ux.DataDrop.js
2010-05-03 12:10 1099http://code.google.com/p/ext-ux ... -
ExtJs 中 xtype 与组件类的对应表
2010-04-26 12:25 2453原文地址:http://blog.sina ... -
iframe in a tab panal
2010-04-11 13:25 1259http://www.extjs.com/forum/show ... -
ext中autoLoad页面中js的问题记录
2010-04-11 12:33 15301.增加script属性,如: var n = this.ad ... -
EXT card布局
2010-01-25 17:17 1581Ext.onReady(function(){ /// ... -
EXT window中加入照片
2010-01-25 17:15 1226Ext.onReady(function(){ ... -
Ext的Card布局示例
2010-01-25 17:14 1274//这个代码就有点通用性了 var navH ... -
Ext card布局
2010-01-25 17:13 1435Ext.layout.CardLayout扩展自Ext.lay ... -
实现Ext.TabPanel中tab内容的更新
2010-01-25 13:19 3091Ext.TabPanel中,如果一个tab项使用了autoLo ... -
Ext.TabPanel中autoLoad实现页面内容加载
2010-01-25 13:18 4016Ext.TabPanel中autoLoad属性可以实现异步加载 ... -
extjs中TabPanel中tab引用页面刷新导致这个页面刷新的问题
2010-01-25 13:16 5574Ext.getCmp('maintab').getActive ... -
SSH+Extjs分页小例子
2010-01-25 13:13 2296刚学,只做了简单的分 ... -
ExtJs是通过Ext.ToolTip和Ext.QuickTips两个组件来实现浮动提示功能的
2010-01-24 23:07 3771Ext.QuickTips QuickTips代码示例:只需 ... -
程序设置Extjs树中CheckBox的选中和取消选中设置
2010-01-22 14:11 4428在Extjs中treepanel中树节点为checkbox类的 ...
相关推荐
- **新特性**:重点介绍了Ext2中新增的特性,如新的布局方式、Grid组件的增强等。 - **下载指南**:提供了Ext2的下载链接及安装指南。 #### 22. 组件模型ComponentModel - **模型概念**:ComponentModel是Ext中用于...
- **组件库**: `Ext.widgets`包含了大量预定义的UI组件,如按钮、表单元素、菜单和工具栏等。 - **按钮**: `Button`、`SplitButton`和`CycleButton`等提供了丰富的按钮样式和功能。 - **表单**: `form`组件提供了...
2. **使用Ext的Grid, Form, Dialog来实现分页列表、创建、修改、删除功能**: - Grid:展示数据,支持分页、排序、选择行等操作。 - Form:用于数据输入和编辑,可以包含各种表单字段,如文本框、复选框、下拉框等...
- **Grid**是EXT中重要的数据展示组件,支持分页、排序、过滤等功能,适用于大量数据的展示和管理。 #### 3.3 更多Widgets - EXT拥有丰富的Widget库,包括Menu、Form、TabPanel等,满足多样化的UI需求。 ### 使用...
- **表单及元素组件**:`Ext.Editor`(编辑器)、`Ext.grid.EditorGridPanel`(可编辑的表格)等。 EXTJS 的强大之处在于它提供了丰富的组件库和灵活的布局机制,使得开发者可以轻松构建复杂的应用程序界面,同时...
这部分内容将详细讲解如何使用Ext.grid来创建表格,如何配置列、排序、过滤和分页功能,以及如何实现行编辑、拖拽列等功能。 十、Ext类的常用方法 文章最后提到了Ext类的一些常用方法,如addBehaviors、apply、...
2. **Ext Util**:工具集模块包含一系列实用函数,用于解决开发中遇到的各种问题。比如,`Ext.util.Format`提供了字符串格式化方法,如`date`可以用于日期的格式化,`number`则能帮助处理数字格式。`Ext.util....
- **Widgets**: Ext提供了一系列预构建的UI控件,如按钮、网格等,大大提高了开发效率。 - **示例组件**: - **MessageBox**: 显示对话框或警告信息。 - **Grid**: 创建数据表格。 - **更多组件**: 还有更多的UI...
Ext JS is a mature JavaScript web application framework that provides modern UI widgets and an advanced MVC architecture. It helps you manage tedious boilerplate and minimize hand-coded ...
renderTo: 'grid-example' }); ``` ##### 还有更多的.. 除了以上提到的MessageBox和Grid之外,EXT还提供了大量的其他组件,如Form、TabPanel、Tree等,满足多样化的用户界面需求。 #### 使用Ajax Ajax是现代Web...
- **使用 Widgets**:Ext 提供了多种预定义的 UI 组件(Widgets),如 MessageBox、Grid 等。 - **使用 Ajax**:通过 `Ext.Ajax.request` 方法发起 Ajax 请求,并处理服务器端返回的数据。 #### 3. EXT 源码概述 ...
控件,或称作小部件(widgets),是EXT中的可视化组件,如窗口、面板、表格等,它们构成了EXT应用的主体。实用工具 Utils 包含各种辅助函数,帮助开发者更高效地编写代码。 EXT的核心组件包括但不限于以下几种: 1. ...
- **分页栏 (Toolbar)**: 可以通过配置Grid的底部工具栏来实现分页功能,例如:`grid.bbar = new Ext.PagingToolbar({ store: store, displayInfo: true, displayMsg: '显示 {0} - {1} 条记录,共 {2} 条记录', ...
- **使用Widgets**: 介绍了EXT提供的各种小部件,如MessageBox、Grid等。 - **使用Ajax**: 指导如何使用EXT进行Ajax调用,包括与不同服务器端技术的集成。 - **EXT源码概述**: 对EXT的源代码进行了初步解析。 - **...
extend: 'Ext.grid.Panel', ... }); ``` #### EXT的布局(Layout) 布局是ExtJS中用于管理UI组件排列的关键特性。ExtJS提供了多种布局策略,如`fit`、`vbox`、`hbox`等,可以根据需要选择合适的布局策略。 #### ...
### EXT中文手册 Grid Form #### EXT简介 EXT是一款强大的JavaScript框架,主要用于开发Web应用程序的前端界面。它提供了丰富的用户界面组件、数据管理功能以及与服务器端进行交互的能力。本手册旨在帮助开发者...