Linux日志文件系统(EXT4、XFS、JFS)及性能分析
自上一篇《》 发布以来，社会各界纷纷来电来函，给出了“Ext4
我看行”，“Ext4 牛牛牛”，“用了
Ext4，嘿，还真对得起这块盘”，“Ext4，碎片去无踪，性能更出众”等等热情洋溢的评论，兄弟我深受鼓舞。在对 Ext4
颇不低俗的性能进行表扬的同时，人民群众还提出了新的要求，希望看到与现有同类文件系统性能横向比拼的结果。为了满足广大群众的热切需求，今天做了
Ext2、Ext3、Ext4、XFS、JFS、ReiserFS 和 Btrfs 的全面性能测试，对比结果如下：
real 27m23.545s
user 0m9.184s
sys 4m40.925s
real 27m26.675s
user 0m9.323s
sys 6m43.199s
real 26m15.771s
user 0m9.609s
sys 5m36.096s
real 28m43.957s
user 0m9.899s
sys 6m4.268s
real 26m53.990s
user 0m9.096s
sys 4m39.691s
real 28m16.075s
user 0m10.134s
sys 7m38.726s
real 59m41.974s
user 0m10.382s
sys 18m40.804s
Kbytes/sec
本次测试所使用的 Linux kernel 版本为 2.6.29-rc3，文件系统性能测试工具为 IOzone
从 测试结果可以看出，Ext4 的综合性能位居现有文件系统之首，JFS、ReiserFS 在读性能方面亦有不俗表现。Btrfs
的小块数据读写性能与平均水平相差甚远，是导致其本次测试总时间超出平均时间两倍的主要原因。较之其它成熟的文件系统，Btrfs
投入生产系统运作可能尚需时日。
至于一小撮不明真相别有用心的群众提出还要测 NTFS、 Vfat、MSDOS 等“文件系统”，恕时间有限，不予受理。
/content/11/31_.shtml
-----------------------------------------------------------
/showWeb/0/0/.aspx
Linux kernel 自 2.6.28 开始正式支持新的文件系统 Ext4。 Ext4 是 Ext3 的改进版，修改了
Ext3 中部分重要的数据结构，而不仅仅像 Ext3 对 Ext2 那样，只是增加了一个日志功能而已。Ext4
可以提供更佳的性能和可靠性，还有更为丰富的功能：
1. 与 Ext3
执行若干条命令，就能从 Ext3 在线迁移到 Ext4，而无须重新格式化磁盘或重新安装系统。原有 Ext3
数据结构照样保留，Ext4 作用于新数据，当然，整个文件系统因此也就获得了 Ext4 所支持的更大容量。
更大的文件系统和更大的文件。
较之 Ext3 目前所支持的最大 16TB 文件系统和最大 2TB 文件，Ext4 分别支持 1EB（1,048,576TB，
1EB=1024PB， 1PB=1024TB）的文件系统，以及 16TB 的文件。
无限数量的子目录。
Ext3 目前只支持 32,000 个子目录，而 Ext4 支持无限数量的子目录。
Ext3 采用间接块映射，当操作大文件时，效率极其低下。比如一个 100MB 大小的文件，在 Ext3 中要建立 25,600
个数据块（每个数据块大小为 4KB）的映射表。而 Ext4 引入了现代文件系统中流行的 extents 概念，每个 extent
为一组连续的数据块，上述文件则表示为“该文件数据保存在接下来的 25,600 个数据块中”，提高了不少效率。
多块分配。
当写入数据到 Ext3 文件系统中时，Ext3 的数据块分配器每次只能分配一个 4KB 的块，写一个 100MB 文件就要调用
25,600 次数据块分配器，而 Ext4 的多块分配器“multiblock allocator”（mballoc）
支持一次调用分配多个数据块。
延迟分配。
Ext3 的数据块分配策略是尽快分配，而 Ext4 和其它现代文件操作系统的策略是尽可能地延迟分配，直到文件在 cache
中写完才开始分配数据块并写入磁盘，这样就能优化整个文件的数据块分配，与前两种特性搭配起来可以显著提升性能。
以前执行 fsck 第一步就会很慢，因为它要检查所有的 inode，现在 Ext4 给每个组的 inode
表中都添加了一份未使用 inode 的列表，今后 fsck Ext4 文件系统就可以跳过它们而只去检查那些在用的 inode
日志校验。
日志是最常用的部分，也极易导致磁盘硬件故障，而从损坏的日志中恢复数据会导致更多的数据损坏。Ext4
的日志校验功能可以很方便地判断日志数据是否损坏，而且它将 Ext3
的两阶段日志机制合并成一个阶段，在增加安全性的同时提高了性能。
9. “无日志”（No
Journaling）模式。
日志总归有一些开销，Ext4 允许关闭日志，以便某些有特殊需求的用户可以借此提升性能。
在线碎片整理。
尽管延迟分配、多块分配和 extents 能有效减少文件系统碎片，但碎片还是不可避免会产生。Ext4 支持在线碎片整理，并将提供
e4defrag 工具进行个别文件或整个文件系统的碎片整理。
相关特性。
Ext4 支持更大的 inode，较之 Ext3 默认的 inode 大小 128 字节，Ext4 为了在 inode
中容纳更多的扩展属性（如纳秒时间戳或 inode 版本），默认 inode 大小为 256 字节。Ext4
还支持快速扩展属性（fast extended attributes）和 inode 保留（inodes
reservation）。
持久预分配（Persistent preallocation）。
软件为了保证下载文件有足够的空间存放，常常会预先创建一个与所下载文件大小相同的空文件，以免未来的数小时或数天之内磁盘空间不足导致下载失败。Ext4
在文件系统层面实现了持久预分配并提供相应的 API（libc 中的
posix_fallocate()），比应用软件自己实现更有效率。
13. 默认启用
磁盘上配有内部缓存，以便重新调整批量数据的写操作顺序，优化写入性能，因此文件系统必须在日志数据写入磁盘之后才能写 commit
记录，若 commit 记录写入在先，而日志有可能损坏，那么就会影响数据完整性。Ext4 默认启用 barrier，只有当
barrier 之前的数据全部写入磁盘，才能写 barrier 之后的数据。（可通过 "mount -o barrier=0"
命令禁用该特性。）
------------------------------------------------------------
/content/11/31_.shtml
北京时间1月15日消息，据国外媒体报道，谷歌正在将EXT2文件系统转到新的EXT4（the fourth extended file
system）文件系统。
来自谷歌的麦克-罗宾（Michael
Rubin）透露消息说，谷歌正考虑将EXT2系统升级，最终确定为EXT4系统。
他表示，他们还考虑过XFS和JFS。结果显示，EXT4和XFS的表现类似，不过从EXT2升级到EXT4比升级到XFS容易。
而Btrfs太具实验性，谷歌目前不会考虑。
分析称，EXT4最初的表现非常好，但是在某些内核条件下表现力降低。比如在Linux2.6.32内核条件下，EXT4的表现力降低，而Btrfs的表现力提高。
同时，谷歌雇佣了知名的Linux内核开发者Ted Ts'o，他对EXT4文件系统的开发起到了主要作用。
EXT4介绍：
--------------------------------------------------------------------------
/forum/5/topic/5453380
在Microsoft
Winsows的世界，硬盘可以格式化成NTFS、FAT32、FATl6等等不同的格式。同樣地，在GNU/Linux底下也是有很多不同的文件系统格
式可供选择。当前在GNU/Linux底下，比较常用的有这几种格式：Ext2／Ext3、ReiserFS、XFS和JFS等数种。
　　除了Ext2以外，其它几种都是日誌型文件系统。那什麼是日誌型文件系统呢?
就是系统会多用一些额外的空间纪錄硬盘的数据状态，因而在不正常开关机后，不需整个硬盘重新扫描来恢复正常的系统状态。
　　●
Ext2：此为一非常老旧且不支持日誌系统的文件系统格式，早期的Linux玩家应该还记得吧，在每次不正常关机后，重新开机时错误检查会需要很久，而且在不正常关机下，常常会让你一次不见很多文件，现在已经很少人使用这类文件系统了。
　 　●
Ext3：为Ext2个改良版，所以Ext2可以直接升级成为Ext3而不必重新格式化，这也可以让旧的Ext2系统更加稳定。而主要和Ext2的差別是
增加了日誌系统(metadata)，所以在不正常开关机后，可以迅速使系统恢复。而因为它与旧有的文件系统兼容，因此很多发行版都缺省使用Ext3。但
是在实际测试上，它的硬盘使用率其实不佳，大概只有真正空间的93％会被使用到，至於其它性能测试表现则为中等。在格式化与创建文件系统的时间也是其它文
件系统的数十倍。
　　● ReiserFS：：採用日誌型的文件系统，为Hans
Reiser所创，因此以他的名字来命名。技术上使用的是B*-tree为基础的文件系统，其特色为从处理大型文件到眾多小文件都可以用很高的效率处理。
实务上ReiserFS
在处理文件小於1k的小文件时，效率甚至可以比Ext3快約10倍，所以ReiserFS专长是在处理很多小文件。而在一般操作上，它的性能表现也有中上
　　● XFS： /&不错的表现。
　　●
JFS：：为全球最大计算机供应商IBM为AIX系列设计的日誌型文件系统，技术上使用的是B+-tree为基础的文件系统和ReiserFS使用
B*-tree不同。IBM
AIX服务器在很多金融机构上使用，所以稳定性是沒话說的。而它最重要的特色是在处理文件I/O的时候是所有文件系统里面最不佔CPU资源的，也就是
CPU使用率最低。而且在这樣节省使用CPU的情況下，它的效率表现还有中上以上的程度。
　　虽然Ext3性能不好(在日誌型文件系统中 效率上算是最糟糕的)
，那为何还有那麼多人使用?那是因为当时Ext3可以直接从Ext2升级，而不需要先备份数据，然后格式化后再把文件复制回去，所以使用人数最多。但这也
不能全然怪它，因为它为了和Ext2兼容，所以背负了很多的历史包袱。若是以性能为考虑，则可以选择ReiserFS或XFS。若是系统资源不多，要使用
最低的CPU使用率，那麼可以选择JFS，因为它有著最好的性能资源比。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。extjs - EXT js beforeedit - Stack Overflow
to customize your list.
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
J it only takes a minute:
Join the Stack Overflow community to:
Ask programming questions
Answer and help your peers
Get recognized for your expertise
i have now another big question, i paste my code and i asked then my question
var gridTablaConsulta = Ext.create('Ext.grid.GridPanel', {
title:'Consulta Tabla lotes',
id:'gridTabla',
store: storeTabla,
columns: [
Ext.create('Ext.grid.RowNumberer'),
{text: "NRBE", width: 60, sortable: true, dataIndex: 'NRBE'},
{text: "APLIC", width: 60, sortable: true, dataIndex: 'APLIC'},
{text: "FORM", width: 60, sortable: true, dataIndex: 'FORM'},
{text: "VERFOR", width: 60, sortable: true, dataIndex: 'VERFOR'},
{text: "FECLOT", width: 60, sortable: true, dataIndex: 'FECLOT'},
{text: "HORLOT", width: 60, sortable: true, dataIndex: 'HORLOT'},
{text: "TIPPAPLO", width: 60, sortable: true, dataIndex: 'TIPPAPLO'},
{text: "TAMPAP", width: 60, sortable: true, dataIndex: 'TAMPAP'},
{text: "FECINIIM", width: 60, sortable: true, dataIndex: 'FECINIIM'},
{text: "FECINIOB", width: 60, sortable: true, dataIndex: 'FECINIOB',editor:
{xtype:'textfield', allowBlank:true}},
{text: "ESTLOT", width: 60, sortable: true, dataIndex:'ESTLOT',editor:{xtype:'textfield', allowBlank:true}},
{text: "TOTPAGGE", width: 60, sortable: true, dataIndex: 'TOTPAGGE'},
{text: "TOTPAGIM", width: 60, sortable: true, dataIndex: 'TOTPAGIM'},
{text: "DESLOT", width: 60, sortable: true, dataIndex: 'DESLOT'},
{text: "TIPDIF", width: 60, sortable: true, dataIndex: 'TIPDIF'},
{text: "DIADIF", width: 60, sortable: true, dataIndex: 'DIADIF'},
{text: "FECALT", width: 60, sortable: true, dataIndex: 'FECALT'},
{text: "FECMOD", width: 60, sortable: true, dataIndex: 'FECMOD'},
{text: "TERMOD", width: 60, sortable: true, dataIndex: 'TERMOD'},
{text: "HORMOD", width: 60, sortable: true, dataIndex: 'HORMOD'}
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
listeners: {
beforeedit: function(editor, e, eOpts) {
var grid = Ext.getCmp('gridTabla'); // or e.grid
if (e.record.data.ESTLOT === '02') {
e.cancel = //no permite
e.cancel = //permite
if (e.record.data.ESTLOT === '01') {
e.cancel = //no permite
edit: function(e, context){
var record = context.
var recordData = record.getData();
recordData.Funcionalidad = 'Modificar';
alert(JSON.stringify(recordData));
Ext.Ajax.request({
url: 'http://localhost:8080/MyMaver/ServletTablaLotes',
method: 'POST',
// merge row data with other params
params: recordData
Ok, now my question, the problem is that in my beforeedit, i need to check a condition that allow me to change the field "ESTLOT" to another value depens of the previous value, for example, if ESTLOT value is 04 and 05, in that field ESTLOT could be 01 or 03, but if the value is 06 or 03 it could be 04 or 05. My problem is that i dont know who to evaluated that kind of condition because in beforeedit i have the previous value but in edit i have the value changed...
Anyboby can help me? Thanks for all.
You have a both values, you just don't know where they are: e.value, e.originalValue
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabledExt4.0学习札记（4~9章 MVC、高级组件、布局以及图表） - VC/MFC当前位置:& &&&Ext4.0学习札记（4~9章 MVC、高级组件、布局以及图Ext4.0学习札记（4~9章 MVC、高级组件、布局以及图表）&&网友分享于：&&浏览：538次Ext4.0学习笔记（4~9章 MVC、高级组件、布局以及图表）
第四章 MVC学习
从这个图中我们可以很清楚的看到M 、V、C在ExtJS4.0里面所对应数据类型。
靠右边是对应的代码结构。
下描述一下这model、store、view、controller以及application这几者之间的关系。
（1）application：它是MVC的入口，用来告诉ExtJS到那里去找对应js文件以及启动加载controller与view连个模块的代码。
//打开动态加载js功能
Ext.Loader.setConfig({
enabled:true
Ext.application({
name : 'AM',//应用的名字 (根) 利用MVC时这时定义的包路径需要与命名空间的层次关系一致
appFolder : "app",//应用的目录
launch:function(){//当前页面加载完成执行的函数
Ext.create('Ext.container.Viewport', { //简单创建一个试图（填充整个浏览器）
layout:'auto',//自动填充布局
xtype: 'userlist', //引用已经定义的别名进行初始化类
title: 'Users',
html : 'List of users will go here'
controllers:[
（2）controller：这一层主要是用来处理业务逻辑，即View上一些动作所触发要执行的操作都在此实现。同时它也是关联view、store以及model的地方。
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
'userlist button[id=delete]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var data = gird.getSelectionModel().getSelection();
if(data.length == 0){
Ext.Msg.alert("提示","您最少要选择一条数据");
//1.先得到ID的数据(name)
var st = gird.getStore();
var ids = [];
Ext.Array.each(data,function(record){
ids.push(record.get('name'));
//2.后台操作(delet)
Ext.Ajax.request({
url:'/extjs/extjs!deleteData.action',
params:{ids:ids.join(",")},
method:'POST',
timeout:2000,
success:function(response,opts){
Ext.Array.each(data,function(record){
st.remove(record);
//3.前端操作DOM进行删除(ExtJs)
'List' //必须是文件名称
"Users" //
"User" //这个就是store里面引用的model，所在js文件的名字，保持和定义model的类名一样。eg:AM.model.User
//（这个主要是给store层用的，当store在当前缓存中找不到指定命名空间定义的model时，再去加载User.js文件，
//再根据文件内容初始化定义model。如果缓存中已经有了model的定义，其实这个是可以不要的。）
//同样views、store都可以通过各种各样的工厂生成，来去掉。
（3）model、store：它们俩主要做为模型数据层。主要是给view层提供数据展示的。
//User数据集合
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
storeId: 's_user',
type:'ajax',
url:'/extjs/extjs!getUserList.action',
type: 'json',
root: 'topics'
},writer:{
type:'json'
autoLoad: true //很关键
（4）view：这一层主要负责页面展示，也是确确实实能看见的一层。
Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',//别名定义
frame : true,//面板渲染
width : 600,
height: 280,
columns : [ //列模式
{text:"Name",dataIndex:'name',width:100},
{text:"age",dataIndex:'age',width:100},
{text:"email",dataIndex:'email',width:350,
xtype:'textfield',
allowBlank:false
{xtype:'button',text:'添加',iconCls:'table_add'},
{xtype:'button',id:'delete',text:'删除',iconCls:'table_remove'},
{xtype:'button',text:'修改',iconCls:'table_edit'},
{xtype:'button',text:'查看',iconCls:'table_comm'}
dockedItems :[{
xtype:'pagingtoolbar',
store:'Users',
dock:'bottom',
displayInfo:true
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2
selType:'checkboxmodel',//设定选择模式
multiSelect:true,//运行多选
store : 'Users',
initComponent:function(){
this.callParent(arguments);
第五章 Grid组件
1. 表格面板类Ext.grid.Panel基本属性。（两个别名xtype:gridpanel, grid）
重要的配置参数：
（1）columns : Array 列模式(Ext.grid.column.Columnxtype: gridcolumn)
列里面的常用配置参数：
text : String 列的标题 默认是""
dataIndex : String 和Model的列一一对应的
field: {} //配合插件使用，告诉插件在那一列起作用
xtype:默认为gridcolumn
renderer : function(value) //可以列里面值显示之前，做一些改变。
//参数value就是列的值，我可以在函数处理后，返回其改变后的值。
（2）title : String 表格的标题，如果不写默认表格是没有头标题那一栏。
（3）renderTo : Mixed 把表格渲染到什么地方，即展示到那个元素里面。
（4）width : Number 宽
（5）height: Number 高
（6）frame : Boolean 是否填充渲染这个Panel（渲染的比较好看）
（7）forceFit : true 设定表格列的长度是否自动填充
（8）store : store 数据集合
（9）tbar: [] 头部工具栏，里面可以放置各种按钮
（10）bbar：[] 底部操作栏，一般放分页面板
（11）dockedItems : Object/Array 更具有位置的灵活性,当你用这个属性时,
可以指定工具条停靠在表格中上下左右位置；可以用来替换tbar与bbar。
（12）selType : 'checkboxmodel'/'rowmodel'/'cellmodel',
选择模式即选中记录方式：选择框/鼠标单击或双击行选择/鼠标单击或双击单元格选择
（用多选框模式时,forceFit属性最好不启用，或则样式不好看）
（13）multiSelect :true,//允许多选 与上面属性联合属性
（14）plugins :[] 插件的形式，为表格添加一些特殊的功能（eg：单元格编辑、行编辑以及行拖拽等）
例子可以参考上面MVC里面view层里面的grid定义。
2. 常用表格的列都有哪些类型。
（1）Ext.grid.column.Column xtype: gridcolumn 普通列
（2）Ext.grid.column.Action xtype: actioncolumn
在表格中渲染一组图标按钮,并且为他赋予某种功能，类似于链接
altText : String 设置应用image元素上的alt
handler : function(view,rowindex,collndex,item,e);
: 图标资源地址
iconCls : 图标样式
: 多个图标的数组
//在使用MVC的时候建议不要用
如果大家有好得放大请与uspcat联系
function(o,item,rowIndex,colIndex ,e)
stopSelection : 设置是否单击选中不选中
（3）Ext.grid.column.Boolean xtype: booleancolumn
falseText,
（4）Ext.grid.column.Date xtype: datecolumn
format:'Y年m月的日'
（5）Ext.grid.column.Number xtype: numbercolumn
format:'0,000'
（6）Ext.grid.column.Template xtype: templatecolumn
xtype:'templatecolumn',
tpl :"${字段的名称}"
可以进行动态的组合字段的值，作为该字段的值。
（7）Ext.grid.RowNumbererxtype: rownumberer
//显示行号
Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',
frame : true,//面板渲染
width : 1000,
height: 280,
columns : [ //列模式
Ext.create("Ext.grid.RowNumberer",{}),
{text:"Name",dataIndex:'name',width:100},
{text:"age",dataIndex:'age',width:100},
{text:"email",dataIndex:'email',width:200,
xtype:'textfield',
allowBlank:false
text:'sex',
dataIndex:'sex',
DDName:'sy_sex',
renderer:function(value){
if(value){
if(value == "女"){
return "&font color='green'&"+value+"&/font&"
}else if(value == "男"){
return "&font color='red'&"+value+"&/font&"
text:'isIt',
dataIndex:'isIt',
xtype : "booleancolumn",
trueText:'是',
falseText:'不是'
text:'birthday',
dataIndex:'birthday',
xtype : "datecolumn",
width:150,
format:'Y年m月d日'
text:'deposit',
dataIndex:'deposit',
xtype:'numbercolumn',
width:150,
format:'0,000'
text:'描述',xtype:'templatecolumn',
tpl:'姓名是{name} 年龄是{age}',
text:'Action',xtype:'actioncolumn',
id:'delete',
icon:'app/view/image/table_delete.png',
width:50//,
handler:function(grid,row,col){
alert(row+" "+col);
{xtype:'button',text:'添加',iconCls:'table_add'},
{xtype:'button',id:'delete',text:'删除',iconCls:'table_remove'},
{xtype:'button',text:'修改',iconCls:'table_edit'},
{xtype:'button',text:'查看',iconCls:'table_comm'}
dockedItems :[{
xtype:'pagingtoolbar',
store:'Users',
dock:'bottom',
displayInfo:true
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2 //单击几下
selType:'checkboxmodel',//设定选择模式
multiSelect:true,//运行多选
store : 'Users',
initComponent:function(){
this.callParent(arguments);
3. 选择模型Ext.selection.Model的用法（嵌套在一些高级组件使用）以及表格的一些特性功能。
选择模型Ext.selection.Model的用法
（1）选择模式的根类Ext.selection.Model (通过选择模式里面提供的方法进行操作行的选择)
重要方法：
撤销选择 deselect( Ext.data.Model/Index records, Boolean suppressEvent ) : void
得到选择的数据getSelection( ) : Array
得到最后被选择数据getLastSelected( ) : void
判断你指定的数据是否被选择上isSelected( Record/Number record ) : Boolean
选择你指定的行selectRange( Ext.data.Model/Number startRow, Ext.data.Model/Number endRow, [Boolean keepExisting], Object dir ) : void
keepExisting true保留已选则的项,false重新选择，不保留已选则的项
（2） 隐藏了一个单元格的选择模式 selType: 'cellmodel'
(从这发现的Ext.grid.plugin.CellEditing)
得到被选择的单元格getCurrentPosition() Object
Ext.JSON.encode()
itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object options )
selectByPosition({"row":5,"column":6}) 很实用，选中你要特殊处理的数据单元格
（3） Ext.selection.CheckboxModel 多选框选择器
（4）Ext.selection.RowModel
rowmodel 行选择器（通过鼠标单击表的行记录进行选择）
multiSelect 允许多选
simpleSelect 单选选择功能
enableKeyNav 允许使用键盘上下键选择
表格的一些特性功能
（1）Ext.grid.feature.RowBody
表格的行体（在行的下面来一个空白行，显示你所需要的信息）
getAdditionalData( Object data, Number idx, Ext.data.Model record, Object orig ) : void
如果你要展示这个面板那么必须复写这个方法
features: [
Ext.create("Ext.grid.feature.RowBody",{
getAdditionalData:function(data,idx,record,orig){
2.必须返回行体的对象
var headerCt = this.view.headerCt,
= headerCt.getColumnCount();
rowBody: "",
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
（2）Ext.grid.feature.AbstractSummary negative 能够在表格数据的最后做一些统计功能。
（eg：统计某一列的平局值等）
Ext.grid.feature.Summary
实用方法是在
features: [{
ftype: 'summary'
columns中配置summaryType: 'count', (count,sum,min,max,average)
summaryRenderer: function(value, summaryData, dataIndex) {
return Ext.String.format(' : '+value);
用于对某一列，进行求平均值等。
（3）Ext.grid.feature.Grouping
在store中设置可以分组的属性
groupField : ' '
在view中增加代码
Ext.create("Ext.grid.feature.Grouping",{
groupByText : "职业分组",
groupHeaderTpl : "职业{name}
一共{rows.length}人",
showGroupsText : "展示分组",
startCollapsed : true
（4）其它功能:
groupclick
groupdblclick
groupcontextmenu
groupexpand
groupcollapse
（5）Ext.grid.feature.GroupingSummary
（6）Ext.grid.feature.Chunking
Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',
frame : true,//面板渲染
width : 1100,
height: 450,
features: [
Ext.create("Ext.grid.feature.RowBody",{
getAdditionalData: function(data, idx, record, orig) {
var headerCt = this.view.headerCt,
= headerCt.getColumnCount();
rowBody: record.get('email'),
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
ftype: 'summary'
},Ext.create("Ext.grid.feature.Grouping",{
groupByText : "性别分组",
groupHeaderTpl : "性别{name}
一共{rows.length}人",
showGroupsText : "展示分组"
columns : [ //列模式
Ext.create("Ext.grid.RowNumberer",{}),
{text:"Name",dataIndex:'name',width:100},
{text:"age",dataIndex:'age',width:100,
summaryType:'average',
summaryRenderer: function(value, summaryData, dataIndex) {
return Ext.util.Format.number(value,"00.0")
{text:"email",dataIndex:'email',width:200,
xtype:'textfield',
allowBlank:false
text:'sex',
dataIndex:'sex',
DDName:'sy_sex',
renderer:function(value){
if(value){
if(value == "女"){
return "&font color='green'&"+value+"&/font&"
}else if(value == "男"){
return "&font color='red'&"+value+"&/font&"
text:'isIt',
dataIndex:'isIt',
xtype : "booleancolumn",
trueText:'是',
falseText:'不是'
text:'birthday',
dataIndex:'birthday',
xtype : "datecolumn",
width:150,
format:'Y年m月d日'
text:'deposit',
dataIndex:'deposit',
xtype:'numbercolumn',
width:150,
format:'0,000'
text:'描述',xtype:'templatecolumn',
tpl:'姓名是{name} 年龄是{age}',
text:'Action',xtype:'actioncolumn',
id:'delete',
icon:'app/view/image/table_delete.png',
width:50//,
handler:function(grid,row,col){
alert(row+" "+col);
{xtype:'button',text:'添加',iconCls:'table_add'},
{xtype:'button',id:'del',text:'删除',iconCls:'table_remove'},
{xtype:'button',text:'修改',iconCls:'table_edit'},
{xtype:'button',text:'查看',iconCls:'table_comm'},
{xtype:'button',id:'selection',text:'selection',iconCls:'table_comm'}
dockedItems :[{
xtype:'pagingtoolbar',
store:'Users',
dock:'bottom',
displayInfo:true
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2
//selType:'rowmodel',//设定选择模式
selType:'cellmodel',
//multiSelect:true,//运行多选
//enableKeyNav :true,
store : 'Users',
initComponent:function(){
this.callParent(arguments);
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
'userlist':{
itemclick:function(View,
options ){
var sm = View.getSelectionModel();//.getSelection();
//alert(Ext.JSON.encode(sm.getCurrentPosition()));
sm.selectByPosition({"row":1,"column":2});
'userlist button[id=selection]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var sm = gird.getSelectionModel();
//sm.deselect(0);
//alert(sm.getLastSelected().get('name'))
//alert(sm.isSelected(0));
//sm.selectRange(1,2,true);
sm.selectByPosition({"row":2,"column":3});
'userlist button[id=del]':{
click:function(o){
var gird = o.ownerCt.ownerCt;
var data = gird.getSelectionModel().getSelection();
if(data.length == 0){
Ext.Msg.alert("提示","您最少要选择一条数据");
//1.先得到ID的数据(name)
var st = gird.getStore();
var ids = [];
Ext.Array.each(data,function(record){
ids.push(record.get('name'));
//2.后台操作(delet)
Ext.Ajax.request({
url:'/extjs/extjs!deleteData.action',
params:{ids:ids.join(",")},
method:'POST',
timeout:2000,
success:function(response,opts){
Ext.Array.each(data,function(record){
st.remove(record);
//3.前端操作DOM进行删除(ExtJs)
"userlist actioncolumn[id=delete]":{
click : function(o,item,rowIndex,colIndex ,e){
alert(rowIndex+" "+colIndex);
4.插件使用以及其它的特性使用。
（1）可编辑插件的根 Ext.grid.plugin.Editing
Ext.grid.plugin.Editing
Ext.grid.plugin.CellEditing
这个不讲(之前课程讲过)
保存修改的两种办法：
a、设立保存按钮,用户单击的时候保存数据
st.sync(); //数据与后台进行同步，一般不用，他会把整个记录传到后台
//如果不写这句，下面的语句是得不到数据的
var records = st.getUpdatedRecords();
Ext.Array.each(records,function(model){
mit(); //前台的小红点会消失
我们可以selectModel来获得修改的数据，组装后在往后台传入。
b.注册edit事件
mit(); //前台的小红点会消失
Ext.grid.plugin.RowEditing
使用方法:(有Bug推荐4.0.1a版本还是不要用这个功能)
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
（2）Ext.grid.plugin.DragDrop 表格拖拽
主意:配置有变化
viewConfig:{
Ext.create('Ext.grid.plugin.DragDrop', {
ddGroup:'ddTree', //拖放组的名称
dragGroup :'userlist', //拖拽组()名称
dropGroup :'userlist'
//释放租名称
enableDrag:true, //是否启用
enableDrop:true
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var st = this.getStore();
for(i=0;i&st.getCount();i++){
st.getAt(i).set('index',i+1);
（3）Ext.toolbar.Paging 分页组件
//第一种常用分页
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
//第二种分页的形式(条状，拨动分页)
Ext.Loader.setPath('Ext.ux', '../../../extjs4/examples/ux');
Ext.require([
'Ext.ux.data.PagingMemoryProxy',
'Ext.ux.SlidingPager'
bbar: Ext.create('Ext.PagingToolbar', {
pageSize: 10,
store: store,
displayInfo: true,
plugins: Ext.create('Ext.ux.SlidingPager', {})
---- 重点是这
（4）Ext.grid.property.Grid
属性配置框面板
当通过页面自动配置一些属性时候了可以考虑用
（5）列锁定
{text:"age",dataIndex:'age',width:100,locked:true},类似于excel里的冻结功能
（6）复杂表头
列里面又包含列(不能和字段过滤一起使用)
columns：{
text:'other',columns:[
{text:"age",dataIndex:'age',width:100,locked: true},
{text:"int",dataIndex:'index',width:100}]
（7）字段过滤
Ext.require([
'Ext.ux.grid.FiltersFeature'
Ext.define("AM.class.filters",{
alias: 'widget.filters',
ftype: 'filters',
encode: false,
local: true,
filters: [{
type: 'boolean',
dataIndex: 'visible'
features: [Ext.create("AM.class.filters")],
列中添加配置{filterable: true,text:"age",dataIndex:'age',width:100,filter: {type: 'numeric'}}
Ext.define("AM.util.filters",{
alias: 'widget.filters',
ftype: 'filters',
encode: false,
local: true,
filters: [{
type: 'boolean',
dataIndex: 'visible'
Ext.define("AM.view.List",{
extend:'Ext.grid.Panel',
title : 'Grid Demo',//标题
alias: 'widget.userlist',
frame : true,//面板渲染
width : 500,
height: 380,
columns : [ //列模式
//{text:"Name",dataIndex:'name',width:100,locked:true},
{text:"Name",dataIndex:'name',width:100},
//{text:'others',columns:[
{text:"age",dataIndex:'age',width:100,filterable: true,filter: {type: 'numeric'}},
{text:"email",dataIndex:'email',width:250,
xtype:'textfield',
allowBlank:false
text:'index',dataIndex:'index',width:100
features: [Ext.create("AM.util.filters")],
{xtype:'button',text:'添加',iconCls:'table_add'},
{xtype:'button',id:'delete',text:'删除',iconCls:'table_remove'},
{xtype:'button',text:'修改',iconCls:'table_edit'},
{xtype:'button',text:'查看',iconCls:'table_comm'},
{xtype:'button',text:'save',id:'save',iconCls:'table_comm'}
dockedItems :[{
xtype:'pagingtoolbar',
store:'Users',
dock:'bottom',
displayInfo:true,
plugins: Ext.create('Ext.ux.SlidingPager', {})
//plugins:[
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit : 2
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
viewConfig:{
Ext.create('Ext.grid.plugin.DragDrop', {
ddGroup:'ddTree', //拖放组的名称
dragGroup :'userlist', //拖拽组名称
dropGroup :'userlist',
//释放租名称
enableDrag:true, //是否启用
enableDrop:true
listeners: {
drop: function(node, data, dropRec, dropPosition) {
var st = this.getStore();
for(i=0;i&st.getCount();i++){
st.getAt(i).set('index',i+1);
//selType:'checkboxmodel',//设定选择模式
//multiSelect:true,//运行多选
store : 'Users',
initComponent:function(){
this.callParent(arguments);
第六章 Tree
Ext.panel.Panel
Ext.panel.Table
Ext.tree.Panel --- 他是和grid完全一样的
2. 主要配置项
title 标题
renderTo 渲染到什么地方
root 控制根节点(Ext.data.Model/Ext.data.NodeInterface)
animate : Boolean 控制收起和展开是发有动画效果
store: store 数据集合
rootVisible : false,//控制显隐的属性
itemclick:function(tree,record,item,index,e,options)
collapseAll
getChecked
appendChild
3. Ext.data.TreeStore
defaultRoodId
//指定根节点
4. 树形的拖拽（插件）
Ext.tree.ViewDDPlugin
alias ：'plugin.treeviewdragdrop'
需要在tree的panel下面加
viewConfig:{
ptype :'treeviewdragdrop',
appendOnly:true //加上这个叶子节点之间拖拽时，会弹出图形警告。
listeners:{
drop: function(HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition)
beforedrop: function(HtmlElement node, Object data, Ext.data.Model overModel, String dropPosition, Function dropFunction)
5. 关于节点的拷贝与粘贴
updateInfo（把更新的节点属性值，更新显示的界面）
6. 关于删除节点操作
remove（节点的方法）
7. 多列树的配置
主要配置项
columns（与表格一样）
8. 级联选中，以及级联不选中
9. 关于Store的Proxy里的api应用
Ext.define("AM.store.deptStore",{
extend:'Ext.data.TreeStore',
defaultRoodId:'root',
//Proxy里面的api属性，可以存放crud的后台url，通过前台就可以取到
update:"/extjs/extjs!updateDept.action",
remove:"/extjs/extjs!delDept.action"
type:'ajax',
url:'/extjs/extjs!getDept.action',
reader:'json',
autoLoad:true
Ext.define("AM.view.deptView",{
extend:'Ext.tree.Panel',
alias: 'widget.deptTree',
title : '部门树形',
width : 250,
height: 300,
padding : '5 3 3 10',
rootVisible : false,//控制显隐的属性
copyNodes:'' //充当剪切板的作用,临时存放树节点
//里面得配置与表格类似
xtype:'treecolumn',
text:'text',
width:150,
dataIndex:'text'
text:'info',
dataIndex:'info'
viewConfig:{
ptype :'treeviewdragdrop',
appendOnly:true //加上这个叶子节点之间拖拽时，会弹出图形警告。
listeners:{
drop:function(node,data,voerModel,dropPosition,options){
alert("把："+data.records[0].get('text')+"移动到："+overModel.get('text'));
beforedrop:function(node,data,overModel,dropPosition,dropFunction){
if(overModel.get("leaf")) //如果把一个节点拖到一个叶子节点下面时，这时我可以把叶子节点修改为费叶子节点，就可以放了。
overModel.set('leaf',true);
dockedItems:[{
xtype:'toolbar',
dock:'left',
//ui:'footer',
{xtype:'button',text:'add',id:'add'},
{xtype:'button',text:'copy',id:'copy'},
{xtype:'button',text:'delete',id:'delete'}
{xtype:'button',text:'delete',id:'paste'}
xtype:'toolbar',
xtype:'button',
id:'allopen',
text:'展开全部'
xtype:'button',
id:'allclose',
text:'收起全部'
store:'deptStore'
Ext.define('AM.controller.deptController', {
extend: 'Ext.app.Controller',
init:function(){
this.control({
"deptTree":{
checkchange:function(node,checked,options){
if(node.data.leaf == false)
if(checked){
//先展开节点
node.expand();
//遍历子节点，如果遇到非叶子节点，将递归遍历
node.eachChild(function(n){
n.data.checked =
n.updateInfo({checked:true});
//先展开节点
node.expand();
//遍历子节点，如果遇到非叶子节点，将递归遍历
node.eachChild(function(n){
n.data.checked =
n.updateInfo({checked:false});
//只要有一个叶子节点没有选中,父节点都不应该选中
if(!checked){
node.parentNode.data.checked =
node.parentNode.updateInfo({checked:false});
var tree = b.ownerCt.ownerCt;
//得到选中数据集合
var nodes = tree.getChaecked();
for(i=0;i&nodes.i++)
nodes[i].remove(true); //删除该节点
"deptTree button[id=delete]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
//得到选中数据集合
var nodes = tree.getChaecked();
for(i=0;i&nodes.i++)
nodes[i].remove(true); //删除该节点
//通过ajax向后台提交删除数据
//通过这种方式也是可以自动提交到后台的，不过数据可能不是你所需要的。
//tree.getStore().getProxy().update(new Ext.data.Operation(
//{action:'remove'} //你写什，它就会提交那个url，eg：{action:'update'}
//自己组装参数Ajax的提交（常用）
Ext.Ajax.request({
//通过这种方式就可以直接获取到store里面配置的url
//避免url到处乱写
//其实就是利用了store的proxy里面已经有的api属性来存放url集合
url: tree.getStore().getProxy().api['remove'],
id: nodes[i].data.id
success: function(response){
var text = response.responseT
// process server response here
"deptTree button[id=copy]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
//得到数据集合
var nodes = tree.getChaecked();
if(nodes.length&0){
//把数据放到剪切板中
tree.setCopyNodes(Ext.clone(nodes));
for(i=0;i&nodes.i++)
nodes[i].data.checked = //这个只是更新节点的属性值，并没有更新显示到页面
nodes[i].updateInfo();//更新显示到页面
"deptTree button[id=paste]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
//获得被追加孩子的节点集合
var checkNodes = tree.getChecked();
//去剪切板中取数据
var nodes = tree.getCopyNodes();
if(checkNodes.length == 1 && nodes.lenght & 0){
// 被追加孩子的节点
= checkNodes[0];
for(i=0;i&nodes.i++){
var el = nodes[i].
//在这里可以进行组装数据传入后台
node.appendChild(el);
alert("剪切板中没有数据或没有选中节点");
"deptTree button[id=allopen]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
tree.expandAll();
"deptTree button[id=allclose]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
tree.collapseAll();
"deptTree button[id=add]":{
click:function(b,e){
var tree = b.ownerCt.ownerCt;
var nodes = tree.getChecked();
if(nodes.length == 1){
var node = nodes[0];
node.appendChild({
checked:true,
text:'技术架构组',
id : '0103',
alert("请您选择一个节点");
"deptTree":{
itemclick:function(tree,record,item,index,e,options){
alert(record.get('id'));
'deptView'
'deptStore'
第七章 Form组件
Ext.form.Basic
提供了表单组件,字段管理,表单提交,数据加载的功能
2.表单的容器
Ext.form.panel
容器自动关联 Ext.form.Basic的实例对象,更方便的进行字段的配置
defautType : "" （设置默认子项的xtype）
3.数据交互和加载
Ext.form.action.Action（两种表单自身的提交方式）
Ext.from.action.Submit Ajax方式提交
Ext.form.action.StandardSubmit 原始鼻癌单提交方法
Ext.form,action.DirectLoad
Ext.form.action.DirectSubmit 类似于dwr的方式提交
4.字段的类型
Ext.form.field.Base 根类
混入了的类[Ext.form.field.Field]得到表单的处理功能
混入了的类[Ext.form.Labelable]得到表单标签错误信息提示功能
Ext.form.field.Text 文本框方式的如下：
Ext.form.field.TextArea 富文本域
Ext.form.field.Trigger 触发器
Ext.form.field.Picker 触发器子类（选择器）
Ext.form.field.Time
Ext.form.field.Date
Ext.form.field.Number
Ext.form.field.file 文件上传
Ext.boBox 选择框
Ext.form.field.Checkbox 选择框方式的
Ext.form.field.Radio 单选框
Ext.form.field.Hidden 特殊的--隐藏字段（数据页面不显示，但后台需要）
Ext.form.field.HtmlEditor 特殊的--文本编辑框
5.其中夹杂布局的类
Ext.form.FieldContainer
Ext.form.CheckboxGroup
Ext.form.RadioGroup
Ext.form.Label
Ext.form.Labelable
Ext.form.FieldSet
Ext.form.fieldContainer (里面可以放多个表单项，进行统一布局)
6.常用的组件配置
Ext.form.Panel
重要的配置项
bodyStyle:'',
frame:true,
height:122,
width:233,
renderTo:'',
defaultType:'',
defaults:{
allowBanlk:true,
msgTarget:'side',
pageSize:4
//配置这个参数即可在下拉框内一分页的形式操作数据
由于混入了Ext.form.labelable所以可进行如下配置；
labelSeparator 字段的名称与值直之间的分隔符
labelWidth 标签宽度
Ext.form.field.Text 文本框(xtype:textfield)
重要配置项
width:156,
allowBlank:false,//不能为空
labelAlign:'left',
msgTarget:'side' //在字段的幼斌展示提示信息
grow:false,//是否在这个表单字段规定长度内，自动根据文字的内容进行伸缩
selectOnFocus：true, //当字段的内容得到焦点的时候，选择所有文本
regex : /\d+/g,
regexText : '请输入数字',
inputType:'password',//其它类型：email、url等。默认text
//vType:'IPAddress'用于数据校验,Ext.form.field.VTypes
//如果校验不是你想要的，可以自定义，如下：
//custom Vtype for vtype:'IPAddress'
Ext.apply(Ext.form.field.VTypes, {
IPAddress:
function(v) {
return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
IPAddressText: 'Must be a numeric IP address',
IPAddressMask: /[\d\.]/i //不符合正则的，键盘整么输入，都不起作用
Ext.form.field.Number
重要的配置项
allowDecimals：false,//不能输入小数
hideTrigger:true,//隐藏框帮边的调节按钮
decimalPrecision : 3,//自动四舍五入,保留小数位为3位。
emptyText：'请输入小数'//默认框内灰色提醒
//指定范围
minValue:10,
maxValue:100,
baseChars:'01',//表示框内只能输入0和1
step:'0.8',//指定步长
Ext.view.BoundList 约束列表
listConfig：{
//规划下拉框到底是什么样的样式
//这里面的值是根据BoundList里面的属性进行初始化的
getInnerTpl:function()
return "&div style='color:red'&${name}&/div&";//动态改变下拉框内容样式
queryMode:'remot', //local(本地数据)|remot(远程数据)
valueFiled:'id',//后台需要
displayField:'name'//页面显示的
forceSelection:true, //必须选中数据集合中有的数据
minChars:2,//表示输入2个字符的的时候，就到后台请求数据
queryDelay:400,
queryParam:'name',//指定往后台传入的参数名称,对应的参数值是你输入的参数
multiSelect:true, //允许多选
typeAhead:true,
//自动补全
Ext.form.field.Date
disableDays:[0,6] //周日与周六不能选为灰色
7.常用事件
当字段类型为xtype:'triggerfield',它具有onTriggerClick事件，
经常用于从其它弹出表格中选择某个值。
8.常用操作
获取表单中某项的值
var fieldValue = Ext.getCmp('表单id').getForm().findField('字段名称').getValue();
自动填充表单的各项值
loadRecord( Ext.data.Model record) : Ext.form.Basic
Loads an Ext.data.Model into this form by calling setValues with the record data. See also trackResetOnLoad.
第八章 layout
Ext.AbstractComponent
Ext.container.AbstractContainer
Ext.container.Container
Ext.panel.AbstractPanel
Ext.panel.Panel
(2)常见子类
Ext.window.Window
Ext.form.panel
---form的panel
Ext.panel.Table ---grid的panel
Ext.tab.Panel
---标签页的panel
Ext.menu.Menu
Ext.tip.Tip
Ext.container.ButtonGroup
(3)组成面板的部件
底部工具栏,顶部工具栏,面板头部,面板底部,面板体
(1) Auto自动布局(Ext.layout.container.Auto)
默认为自动布局，采用布局布局的模式与HTML流式排版类似
(2) Fit自适应布局(Ext.layout.container.Fit)
面板里有且只有一个其它面板资源元素，并且填满整个body
(3) Accordion折叠(即手风琴)布局(Ext.layout.container.Accordion)
同时会初始化多个面板，当一个面板处于打开状态时，其它面板会处于收起状态
(4) Card卡片布局(Ext.layout.container.Card)
它和手风琴布局类似，也有多个面板；不同之处在于他用按钮来切换（常用于导航）
(5) Anchor描点布局[Ext.layout.container.Anchor]
根据容器的大小，自适应来为容器的子元素进行布局和定位
C.参考离边的距离定位
多选框布局[Ext.layout.container.CheckboxGroup]
(7) Column列布局[Ext.layout.container.Column]
列风格的布局，每一列的宽度可以根据百分比或固定数据来控制
(8) Table表格布局[Ext.layout.container.Table]
和传统的HTML的Table布局方式一样，同样具有跨列，跨行的属性。
(9) Absolute绝对布局[Ext.layout.container.Absolute]
格局容器X、Y轴的方式绝对定位
(10) Border边界布局[Ext.layout.container.Border]
可以控制上、下、左、右、中 (通常用于页面框架的规划)
(11) 盒子布局
Ext.layout.container.Box
Ext.layout.container.HBox 竖排
Ext.layout.container.VBox 横排
flex 具有配置flex的子项，会根据占有剩余总量的比值，来决定自己的大小
pack 控制子元素展示的位置(start左面--这时候flex生效，center中间，end后面)
padding 边距
align[top,middle,stretch,stretchmax]
align[left,center,stretch,stretchmax]
3.面板常用的配置属性
Ext.panel.Panel
(1) closable:true //启用关闭功能
(2) closeAction:'destroy' //设置关闭窗口后的对象处理[destroy销毁面板|hide隐藏面板]
(3) hideCollapsible:true
//启用面板隐藏面板体功能
(4) collapsible:true
//是否展开面板体
4.Ext.tab.Panel标签页，一种特殊的布局方式
setActiveTab( ponent card) 设置当前显示的标签页
第九章 chart
1.关于图表
图表的轴(axes)
(1) 数值轴 Ext.chart.axis.Numeric
(2) 时间轴 Ext.chart.axis.Time
(3) 分类轴 Ext.chart.axis.Category
(4) 仪表轴 Ext.chart.axis.Gauge
图表的类型
(1) 折线图 Ext.chart.series.Line
(2) 柱形图 Ext.chart.series.Column
(3) 饼状图 Ext.chart.series.Pie
(4) 条形图 Ext.chart.series.Bar
(5) 面积图 Ext.chart.series.Area
(6) 雷达图 Ext.chart.series.Radar
(7) 散点图 Ext.chart.series.Scatter
(8) 仪表图 Ext.chart.series.Gauge
highlight高亮，label标题，tips提示，renderer格式化
最后 : 学习笔记到这里就要告一段落了
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有