ext

1.ext事件封装在ext.lib.Event下。上一层还有ext.EventObject,它继续封装了ext.lib.Event。一般函数中function(e),这个e就是ext.EventObject对象。而且ext.EventObject还封装了鼠标和键盘的一些操作。

2.element.on('click',fn,this,{single:true,delay:100,testId}).其中single表示第一次，delay延迟，testId是传入fn()的参数。在fn(e(ext.EventObject),el,args)中，可以通过args.testId得到传入的值。

3.调用事件还可以object.fireEvent('fn');而Ext.util.Observable.capture(object,function()),可以为对象的事件设置拦截器。

4,之所以封装事件，是因为浏览器的事件只能有一个句柄，若给一个elements定义了两个事件，则会覆盖

5.layout:'fit'可以让内部pannel随着外部自动填充。否则又出现了什么都不显示。

5.1 慎用系统提供的autoHeight和autoWidth属性。

6.grid可以自动排列每列的宽度。viewConfig{forceFit:true}。

7.grid.getSelectionModel().getSelections().会得到选择到的数据，以行为单位，作为数组返回。

8.用grid左分页是时候注意传的几个参数，注意查看源码，记得sotre.load的顺序。

9.ext.each(array,fn())可以遍历数组，fn()传入的参数为[当前数组项][当前索引][数组array]。

10.e.preventDefault()去掉浏览器默认的鼠标右键事件。

11.表单提交后，后台课根据request.getparameter('fieldname')得到相应元素的值。和struts的映射差不多。

12.form的后台校验，会传回一个json字符串。客户端可以解析，例如{success:false,errors:{text1:'text1 wrong',text2:'text2 wrong'}}，其中的text1和text2对应表单中的元素。客户端可以设置success和failure回调函数来处理结果。

13,combox向后台提交的数据是text，可以用hiddenName得到相应的value。

14.在form表单中，可以用form.getForm().load({url:'servlet|jsp'})来得到相应表单的数据，但是在form中要定义reader:JsonReader。表单数据的填充应该还是name属性来决定，虽然我没试过。

13.store.load()可以传参。通过下面形式，store.load({params:{id:'value',name:'name'}}).这个id，后台还是可以同过request.getParameters('id')得到。

14.对话框中有回调函数。Ext.MessageBox.show({config}).

15.'fit'的layout中items只能放一个子组件，即使放多个，也只会显示第一个。而且aotuHeight属性页不能和fit一起使用。

16.'border'布局方式中，分为东西南北中五个region，其中center是自动计算大小的。而'south','north'只能设置高度，'west','east'只能设置宽度。

17,一个页面中只能有一个viewport。

18，'border'排版中，'north'的高度不能用百分比，我觉得很奇怪，每次我百分比就显示不出来。

19,json数据中{totalProperty:'name',rootName:[]}的一般格式

20，得到grid选择列数据的小例子
xtype: 'grid',
ds: ds,
cm: colModel,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("company-form").getForm().loadRecord(rec);
}
}

21, ajaxRequest的success和failure表示请求传送失败和成功，不表示后台的处理结果。而form的提交函数中的success何failure和后台的处理结果相关。后台的数据传送方式为response.getWriter.write("{success:true,info:'success info'}")或者是response.getWriter.write("{success:false,error:'failure info'}").

22,用apply(a,b)，将b中的属性复制到a中。并且会覆盖b中原来的属性。若是用applyIf()则不会覆盖。

23.record中的修改要用record.set('name',newvalue).然后可以选择对修改进行commit或是reject。

24.使用pagingtoolbar之后，grid的store必须在grid初始化之后load。否则分页工具栏不起作用。分页工具栏的数量总条目来自json的totalProperty属性，分页工具栏不能分页内存中数据，所以第一次只取页面大小的数据。

25.ext常用方法：ownerct:Ext.Container 得到父容器
findByType("textfield"); //获得相应容器下所有xtype为textfield的组件
findField("name"); 获得表单中name属性为name的组件
例子：form.getForm.findField("name");
fly("id").add

var panel = new Ext.Panel({title:"面板",width:400,height:300});
panel.add(new Ext.Button({title::"按钮1"})); //new
panel.add({xtype:"button",text:'按钮1'}); // xtype 要的时候(在组件渲染时创建)，延迟创建
panel.add({text:'按钮1'}); // 默认就是panel
也可以 var panel = new Ext.Panel({title:"面板",itmes:[{xtype:'button',text:'按钮'},{title:'面板'}]});

组件渲染后才会显示：
1.组件.render();
2.属性 applyTo //渲染到某一个节的的父节点
3.属性 renderTo //渲染到某一个节
3.组件.render("test"); //强制渲染某一个节的
4.组件.show();方法渲染显示组件 ，每一个组件只渲染一次
5.组件.hide(); //隐藏组件
6.通过el来设置属性，然后调用 render() 或者是 调用 show() 方法

组件的属性：
1.判断一个组件是否隐藏
Ext中的属性大都是只读的 Read-only
if(panel.hidden){
}
2.得到dom下所有的信息
alert(panel.dom.innerHTML);

3.添加事件 Ext支持事件队列
el.on("click",function(){
});
4.事件延迟
Ext.onReady(function(){
Ext.get("button").on("click",);
});
5方法删除el
Ext.un("click",fn)
Ext.destory(el);


var myDiv=Ext.get("div");
myDiv.highlight(); //黄色高亮显示然后渐退
myDiv.addClass('red'); // 添加自定义CSS类 (在ExtStart.css定义)
myDiv.center(); //在视图中将元素居中
myDiv.setOpacity(.25); // 使元素半透明

获取多个： 其他的请参阅DomQuery API文
// 每段高亮显示
Ext.select('p').highlight();

得到事件：
var paragraphClicked = function(e) {
Ext.get(e.target).highlight(); //e.target == dom节点
}

var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});
这里有些新的概念需要讨论一下。在第一行中我们创建了一个局部变量（Local Variable）来保存某个元素的引用，即被单击的那个DOM节点（本例中，DOM节点指的是段落paragrah,事因我们已经定义该事件与<p>标签发生关联的了）。为什么要这样做呢？嗯...观察上面的代码，我们需要引用同一元素来高亮显示，在MessageBox中也是引用同一元素作为参数使用。
一般来说，多次重复使用同一值（Value）或对象，是一个不好的方式，所以，作为一个具备良好OO思维的开发者，应该是将其分配到一个局部变量中，反复使用这变量！


7.Grid
Ext.onReady(function() {
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];

var myReader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);

var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
renderTo: 'content',
title: 'My First Grid',
width: 500,
frame: true
});

grid.getSelectionModel().selectFirstRow(); //最后，通过SelectionModel告诉Grid高亮显示第一行。
});

8.性能优化：
方法二：
项目中Ext代码优化。
1. 不推荐使用iframe加载的方式，使用autoload。
2. 在完成了组件对象的使用以后必须回收,可以使用对应对象的destroy，beforeDestroy,removeAll等方法销毁对象以及一些孤立节点。
3. 不要把继承层次弄的太深。


ext2能为每个组件自动产生Id,组件的查找可以通过 Ext.CompnonentMGR.get()或者通过Container的findBy("itemId",itemId)[0]等等。

生成你的Field的时候加个id,然后Ext.getCmp('id') 不就行了.


终于是实现了，通过.htaccess 将所有指向js和css的文件都压缩一下，在服务端生成压缩文件，这样下次就不用再压缩了，直接打开生成好的压缩文件就行了。然后比较filemtime和客户端传来的IF_MODIFIED_SINCE以及Etag来决定是否向客户端传送压缩文件。


如果你只想进行在Windows机器上，那就也不用麻烦使用ＡＩＲ技术，直接改成后缀名变成HTA，你的程序就变成单机版了．