一般的优化技巧
1. 检查你定义的时间监听器
正确的设置事件监听器对性能会有很大的影响。 举例来说， 在定义一个store的时候，设置一个load 的事件去触发从后台读取数据，如果设置single 的值为true的话，则load的事情就只有在第一次取数据的时候会触发了。
listeners: {
load: onFirstLoadData,
single: true
}
给一个完整的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<link href="extjs/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet" type="text/css" />
<script>
var myStore;
Ext.onReady(function(){
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'}
]
});
myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: 'users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true,
listeners:{
single: true,
load: function(){alert("store load event");}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Sample',
store: myStore,
columns: [
{ text: 'SurName', dataIndex: 'lastName' },
{ text: 'Name', dataIndex: 'firstName' }
],
height: 200,
400,
renderTo: Ext.getBody()
});
});
function loadStore()
{
myStore.load();
}
</script>
</head>
<body>
<input type=button value="load Store" onclick="loadStore()">
<div id="my-div"></div>
</body>
</html>
注意 ext 的 js 和 css 文件需要下载导入.
这里实现的效果就是点击 load Store 按钮， 如果加了single: true， 则load 这个事件就不会执行了。
另外一个需要注意的事件是 afterrender, 它在所有的DOM元素存在时触发。在渲染后修改元素会回流和降慢程序。 相反的，可以使用beforerender在渲染之前调整类和设置样式。而一些必须在渲染后运行的代码，在 Ext JS 4.1 中有提供一个新的事件 -- boxready, 它运行在一个组件大小被确定之后。
2. 移除doLayout 和 doComponentLayout 呼叫
尽量移除高代价的呼叫。 在Ext js 4之前的版本中，doLayout 是用来告知框架你已经完成了一个组件或容器，接下来去计算它的布局。 在Ext JS 4.0 中这些呼叫也有时用来处理直接的DOM更新或是解决一些特定的缺陷。
在Ext JS 4.1中， 布局的触发方式改变了，你的代码不需要呼叫 doLayout 或doComponentLayout。 如果你还需要呼叫这个方法来处理缺陷，请提交缺陷报告给sencha吧。
3. 减少容器嵌套
每一个容器都是只需时间去初始化，渲染和布局。嵌套越少，程序的速度就会越快。举例来说：
{
id: 'container1',
items: [{
id: 'container2',
items: [{
id: 'component3'
}]
}]
}
完全可以使用以下方式替换：
{
id: 'container1',
items: [{
id: 'component3'
}]
}
4. 使用 Containers ，而少使用Panels
Ext JS的Panels 比 Containers 功能更强大，当然代价也更高。显示指定 xtype:'container'，避免默认使用 'panel',类似
{
xtype: 'container', // defaultType is 'panel'
items: [ ... ]
}
5. 减少边界布局嵌套
在Ext JS 4.1 中，有很多方法来替代边界布局嵌套。移除这些嵌套可以减少初始化，渲染和布局组件的时间。在Ext JS的早期版本中，有些状况是必须使用嵌套，举例来说，在同一个区块有两个或更多的实例，如果在中心区域上需要两个北边的区域，就需要嵌套边界布局了。 现在，可以直接指定两个北边区域作为一个边界布局的部分。
在Ext JS 4.1 中，区域可以动态的方式添加，而不需要一次把所有区块定义出来，不用的时候，又把他们隐藏起来。还可以使用weight 的属性设置区域的优先级--举例来说，
设置西边的优先级高于北边。
6. 减少DOM的读写
Ext JS 4.1 已经调整了布局和DOM的交互以尽可能的减少DOM的读写。客制的代码也应该尽量遵循这个规则，因为DOM的读写会降低程序的速度， 高的开销和混写导致
回流。 尽量使用beforerender 控制样式和类，避免使用 setStyle,addCls,removeCls或其他DOM元素修改的方式。
作为一般规则， 操纵在DOM读写时分批次的操作会对性能有一定的提升。
使用Ext JS 4.1 提供的两个新的方法 Ext.suspendLayouts 和dExt.resumeLayouts来减少额外的 布局。这两个方法有助于协调更新到多个组件和容器。
Ext JS 页面分析器
Ext JS 4.1 提供了一个新的工具用来分析应用程序的性能。使用它可以快速的测量系统系统并对相关的代码做更改。页面分析器有许多功能还是实验性的，但是布局标签优化是比较有用的性能优化的功能。
可以在开发工具包的以下路径找到这个工具
./examples/page-analyzer/page-analyzer.html因为浏览器安全的原因，页面分析器只允许在同一台服务器上使用， 所以使用时需要把整个 page-analyzer的文件夹复制到应用程序的相关目录下。
另外， 要确保页面分析器的版本和你构建Ext JS版本要匹配，否则它是不能正常运行的。
接下来，看一下如何使用页面分析器：
1. 在浏览器中通过URL打开页面分析器
2. 输入需要分析的页面地址
3. 点击"load "， 展现结果。
4. 点击 Layout 的标签，可以看到：
5. 但单个组件上有多个布局时， 在代码中减少不必要的布局会提升系统的性能。
网格优化
使用Ext JS grid会遇到一个特别的性能问题，特别是在处理大型的数据集的时候。当处理小型的数据，速度不是问题。但当grid 处理"无限滚动"展现时，就会出现性能瓶颈了。因为无限滚动依赖于页面的缓存。
当使用者在滚动时，缓存数据变成可见的接着有消失在页面的顶部并且不再保存在DOM中了。调整这个的主要方法是尽可能的让DOM尽量小，在客户端缓存数据进而减少数据在服务端的往返。
滚动术语
当一个 data store 的buffered 配置成true的时候，一个PagingScroller 的对象会被建立出来用于监控视图的滚动（网格被配置成data views），同时用来为下一步提供快速的数据。
在下图中，用户滚动视图向下查看数据集，PagingScroller维护了滚动方向的一段前面区域的记录和一段后面区域的记录。
PagingScroller 要求data store保证trailingBufferZone和leadingBufferZone都已经在缓存中。
滚动的时候，如果数据已经在缓存中就直接显示，如果不再就要通过ajax 方式获取，这个时候页面会mask 住。如何设定缓存的大小，可以使用 Infinite Grid Tuner这个工具
使用例子像以下这样
