内容发布更新时间 : 2024/12/30 0:09:47星期一 下面是文章的全部内容请认真阅读。
1. 面向对象
a) 命名空间：Ext.namespace(\); b) 定义类：Ext.OA.Person = Ext.emptyFn;或 Ext.OA.Person = function(_cfg) {Ext.apply(this,
_cfg);}等
c) 定义实体属性，方法：Ext.apply(Ext.OA.Person.prototype, {job: \无\,print: function()
{}}); d) 定义静态方法Ext.OA.Person.print = function(_name, _sex) { }
e) 继承：Ext.extend(Ext.OA.Student, Ext.OA.Person, { job: \学生\ }); f) apply和applyif。applyif不会覆盖相同属性，apply会覆盖相同属性。 2. 常用函数：
a) select和 query。
i. 都是查询方法，如Ext.select(‘div p’)与jquery的选择器一样。返回一个数组。
query返回的是DOM，select返回的是EXTCompositeElement对象。 ii. 元素选择器Ext.select(‘div p’) iii. 属性选择器Ext.select(‘div[foo=’bar’]’)或Ext.select(‘div[@foo=’bar’]’)把属性名为
foo并且值为bar的div元素查出来。 iv. Css值选择器Ext.select(“div{display=none}”);相等,，
Ext.select(“div{display^=none}”); 开始，Ext.select(“div{display$=none}”);结尾 v. 伪类选择器Ext.select(“span:first”);等。可通过API查domquery。 b) decode和encode
i. decode:把json字符串转化成对象 。 eval也可以做到。 ii. encode:把对象转化为json字符串 c) Ext.each(array,function,scope)
i. function(当前数组项，索引，数组) d) 数据格式化
i. Ext.util.Format.ellipsis(String value,Number length,Boolean word)对大于指定长
度的字符串进行裁剪，增加省略号的显示 ii. defaultValue,trim,usMoney,date,dateRender.stripTags,number,undef等 e) Ext.util.TaskRunner是setInterval的封装 f) update方法：局部更新网页内容。如
Ext.get(‘…’).getUpdater().update({url:….script:true})
3. 模板
a) 简单：
var xt = new Ext.Template( \
\\);
xt.append(\xt.compile();
HTML如下：
\
\
xt.append(\”单元格1”}); c) 使用模板的自定义接口
\xt.sexRender=function(value){...} d) XTemplate
i. ii.
iii. iv. v.
4. Panel
如果对象是简单值，循环里可以用.来表示。按照模板循环逐一输出。如
占位符{#}代表循环的索引。从1开始
a) 拖动必须有几个属性floating:true,并且x和y必须设置。draggable里面
insertProxy:false是去掉虚边框,否则拖动时边框还在左上。p.getEl().shadow得到拖动时后面的阴影。s.realign(this.x,this.y,p.getWidth(),p.getHeight());
b) frame:true 设置完全透明和阴影效果。
5. FormPanel
a) 密码框用xtype: \, inputType: \ b) 表单验证
i. Ext.form.Field.prototype.msgTarget = \;//设置验证提示的方式。
allowBlank:false, blankText:\密码不允许为空\
ii. iii.
vtype格式验证 vtype:\,vtypeText:\错误\
高级自定义验证：自定义配置项和自定义vtype。Ext.apply(Ext.form.VTypes,{…})
Ext.apply(Ext.form.VTypes, {
password: function(val, field) { if (field.compareTo) {
var pwd = Ext.get(field.compareTo); return (val == pwd.getValue()); }
return true; } });
iv.
提交 formpanel的monitorValid:true和button的formbind:true配合使用可以验证后再提交。
6. TreePanel
a)
通过beforeLoad时一定要手动render,属性里用el,否则会报找不到root错误。
loader: new Ext.tree.TreeLoader({
dataUrl: \ listeners: {
\ treeLoader.baseParams = { id: node.id, method: \
} } }
})
b) c)
TreeNodeUI:node.getUI().getTextEl()和node.getUI().getIconEl()等 checkbox全选
function mytoggleChecked(node) {
//迭代复选=>父节点影响子节点选择,子节点不影响父节点 if (node.hasChildNodes()) { //eachChild(fn),遍历函数 node.eachChild(function(child) {
child.getUI().toggleCheck(node.attributes.checked);
child.attributes.checked = node.attributes.checked;//上面两句必须结合使用
//child.getUI().checkbox.checked=node.getUI().checkbox.checked;//有其父必有其子 child.on(\ mytoggleChecked(sub); //传递子节点 });
mytoggleChecked(child); //处理子节点(第三级,有点晕阿) }) } }
//根节点
var root = new Ext.tree.AsyncTreeNode({ id: \ text: \根节点\ checked: false, listeners: {
\选中是否切换激发事件 mytoggleChecked(node); //自定义级联选择函数 } },
expanded: true }); 7. 对话框
a) b) c) d)
alert()的回调函数是关闭对话框后触发。function(e) e:ok或cancel confirm的回调函数：function(e){} e有三种值yes,no,cancel prompt有6个参数，比alert方法多一个返回值和是否多行。 show i. ii. iii.
progress:设为true, 显示进度条，但是是死的 wait:设为true,动态显示progress
waitConfig:配置参数，以控制显示progress
iv. v. vi.
可以自定义button如：buttons:{ok:”真的”,cancel:”假的”} Ext.MessageBox.updateProgress(value,”Progress Test”,”msg”) 1.
value为0-1的数，1为满进度 waitConfig:{interval:600}
setTimeout(function(){Ext.MessageBox.hide()},5000); 或者
waitConfig:{interval:600,duration:5000,fn:function(){Ext.MessageBox.hide()}}
8. 布局：
a) b) c) d) e) f) a)
according比较适合菜单导航
borderlayout一般用于主界面布局，一般会结合viewport使用 card
布局会使用在上一步下一步这种情况，用
activeItem
或
panel.getLayout().setActiveItem()表示或设置当前card。 fit布局 如果容器组件中有多个元素，则只会显示第一个元素。
column布局一般会和form布局结合使用。用百分比的话columnWidth,用像素的话width form布局：一个组件占一行
Ext的data处理分成三部分，store是统一对组件或开发的接口，它的数据是通过proxy从服务器端（包含跨域）或本地的客户浏览器中获取原始数据。从原始数据到store的统一格式的中间还有一步，那就是对于不同的形式的原始数据(xml,json等)进行去解析。Reader就是完成解析功能。通过代理，分析，储存三步，完全可以把store看成一个客户端的临时数据库。 store:客户端的数据存储器，里面存储标准格式的record。是以多个record构成的。封装了一
个客户端的record对象的缓存 proxy代理用来存储数据
reader:来解析proxy获取的数据为标准的record格式 。一般不会使用DataReader，而是使用
其三个派生类：ArrayReader,JsonReader,XmlReader
b)
Record:
9. 数据处理
一个Record可以理解为关系数据表中的一行，也可以称为记录。Record对象中即包
含了记录（行中各列）的定义信息（也就是该记录包含哪些字段，每一个字段的数据类型等），同时又包含了记录具体的数据信息（也就是各个字段的值） i. ii. iii.
创建record方法:var myRecord=Ext.data.Record.create([…]);//创建Record var r=new myRecord({…})
获取实例属性方法：r.data.属性名或r.get(“属性名”)
var record = Ext.data.Record.create([{name: \, mapping: \}如果传入的数据是json,mapping可以直接对应那个字段的名称，如果传入的是数组，则是数组下标
iv. c) i.
传入reader时如果属性名全部一致，可以简写record如[“id”,”name”] var myReader = new Ext.data.ArrayReader({
id:0 // 提供数组的下标位置存放记录的ID（可选的） }, Employee);
ii. d) e) i. i.
mapping一定要设，否则如果设置id的话，那么他会自动从0开始映射 new JsonReader({totalProperty:”results”,root:”rows”,id:”id”},myRecord); 取数据 JsonReader Store: ArrayReader:
1. 2. 3. 4.
store.getAt(0).data或store.getById(),要转化成字符串可以用
Ext.util.JSON.encode()
遍历用for循环或者record.each(function(record){})。record是个record对象 store.getRange(0,1)查询前两条记录，返回一个record数组 搜索数据 a) b)
find(“字段名”,”正则”,”从第几个开始”,”是否模糊匹配”,”是否区分大小写”)。返回的是NUMBER类型，是下标值，只要找到就返回。
findBy(function(record,id){},作用域,startIndex)。高级查找。如var index=store.findBy(function(record,id){return
record.data.name==”wang”}。返回的是NUMBER类型，是下标值，只要找到就返回。 c)
ii. iii. iv.
query和queryBy返回的是集合（MixedCollection）
远程数据一定要用proxy,并且需要 load,否则不会自动加载。如proxy: new Ext.data.MemoryProxy(data)
排序：加入配置项sortInfo:{field:\字段名\,direction:\}或store.sort(field:\字段名\,direction:\) 数据DML 1.
添加：store.add ,addSorted,insert
var fnStore_add = function() { new Ext.Button({ renderTo: \ text:\添加\
handler: function() { if (store) {
var r = new record({ id: 4, name: \ sex: \ }); }
store.add(r); showData(store); } }); } 2. 3. 4. 5.
删除remove
修改:store.getAt(1).set(“属性名”,value)。撤销修改store.rejectChanges,提交修改store.commitChanges,提交了后不能够撤销没效果了 getModifiedRecords获得store中修改过的record数组 加载： a) b)
load(params:{start:0,limit:20},callback:…)
如果有一些需要固定传递的参数，也可以使用baseParams参数执行，它是一个JSON对象，里面的数据会作为参数发送给后台处理，如下面的代码所示 store.baseParams.start = 0;