ext 积累(收集)

理解EXT Grid的几个关键组件

• Ext.data.Store    为Grid提供数据源，可以来自Record对象也可以是一个通过Ext.data.XmlReader读取的XML流，这些数据可能由HttpProxy、DataProxy、MemoryProxy或ScriptTagProxy提供
• Ext.grid.GridPanel或Ext.grid.EditorGridPanel 为网格布局、组装提供的容器对象，这个对象是一个网格的核心
• Ext.grid.ColumnModel 定义网格的列属性，俗语表头，表体会由Ext.data.Store提供，完成填充。如果你打算为每行提供一个行号，在创建Model时，加入new Ext.grid.RowNumberer()配置即可

如果你计划为可编辑的表格提供新增行操作，建议定义出一个Ext.data.Record的Plant，并在创建Store时与之绑定，这样你就可以使用Store的insert方法，动态创建一个Plant了（一行新记录）。

可以说Ext的Grid已经对各种场景的操作进行了足够封装，基本能够满足复杂场合下的表格应用

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

简介:记录一下ExtJS的一些简单使用的方法.备忘...

开始...

在ExtJS里最常用的,应该就是Ext.onReady这个方法了,而且它也可能是你学习ExtJS所接触的第一个方法,这个方法在当前的DOM 加载完毕后自动调用,保证页面内的所有元素都能被Script所引用.可以尝试在这个方法中添加一条语句,看看页面打开后是什么反映:

Ext.onReady(function() {

    alert('hello world!');

});

上面的代码将在页面加载完毕后弹出一对话框,打印出'hello world!'字样.

获取元素

还有一个常用的方法,就是获取页面上的元素了,ExtJS提供了一个get方法,可以根据ID取到页面上的元素:

var myDiv = Ext.get('myDiv');

会取到页面上ID为'myDiv'的元素.如果使用Element.dom的方法,则可以直接操作底层的DOM节点,Ext.get返回的则是一个Element对象.

在不能使用这种方式来获取多个DOM的节点,或是要获取一些ID不一致,但又有相同特征的时候,可以通过选择器来进行获取,比如要获取页面上所有的

标签,则可以使用:

var ps = Ext.select('p');

这样你就可以对所要获取的元素进行操作了,select()方法返回的是Ext.CompositeElement对象,可以通过其中的each()方法对其所包含的节点进行遍历:

ps.each(function(el) {

    el.highlight();

});

当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于CompositeElement对象上,如:

ps.highlight();

或是:

Ext.select('p').highlight();

当然,select参数还可以更复杂一些,其中可以包括W3C Css3Dom选取器,基本的XPath,HTML属性等,详细情况,可以查看DomQuery API的文档,来了解细节.

事件响应

获取到了元素,则可能会对一些元素的事件进行一些处理,比如获取一个按钮,我们为它添加一个单击事件的响应:

Ext.onReady(function() {

    Ext.get('myButton').on('click', function() {

        alert('You clicked the button!');

    });

});

当然,你可以把事件的响应加到通过select()方法获取到的元素上:

Ext.select('p').on('click', function() {

    alert('You clicked a paragraph!');

});

Widgets

ExtJS还提供了丰富的UI库来供大家使用.

消息窗口

将前面的alert()方法替换一种ExtJS提供的方案:

Ext.onReady(function() {

    Ext.get('myButton').on('click', function() {

        alert('You clicked the button!');

    });

});