EXTJS学习笔记

基本配置
<link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.2.1/ext-all.js"></script>
<script type="text/javascript" src="ext-lang-zh_CN.js"></script>


findParent()
在某个节点及父节点中查找匹配传入的选择符的元素，从当前节点开始,如
Ext.get('left').findParent("div");
其结果就是，如果id=left的是一个div，则返回此div,否则查找上一级元素

findParentNode()
这个同上，区别就是从父节点开始

up()
其为findParentNode的shortcut其返回Ext.Element

Ext.select()返回Element的数组
Ext.query()返回DOM的数组

next()指同一级的，如
<div>a</div><div>b</div>

last()子级,如果
<div><div>a</div></div>

事件用Ext.EventManager来管理

Ext.EventManager.on('div','click',function(){},scope,{
delegate:'#id'只有在此id上点才起作用
})



setX与setLeft()的区别
前者会把Element自动设置成relative,后者只是在样式中加上，有时候可能不起作用

ghost与slideIn区别
前者有一个fadeIn效果

更复的动画加Element中的anmimate


Ext.Ajax是一个单例模式，可以设置其属性,这样子在Ext.Ajax.request（）的时候就不用设置了



Ext.isIE
.ext-ie等，是Ext设定的一个值，用于不同的浏览器


Ext.TaskMgr.start({
run: function(){
},
interval: 1000
});
可以自动执行一些操作，其是Ext.util.TaskRunner()的实例

延迟个一个方法用
DelayedTask

关于ext中对应的事件，一定要在对象的构造函数中加上
this.addEvents(
'nameChange'
);
然后在需要触发的时候用,这个类要继承Ext.util.Observable
this.fireEvent('nameChange','其它参数');

在对象是加上handler
_p.on('nameChange',function(a,b){
alert(a)
});

下边是一段比较简单的完整的代码
Ext.namespace('Office.tech');
Office.tech.Person = Ext.emptyFn;

Office.tech.Person = function(cfg){
Ext.apply(this,cfg);
this.addEvents(
'nameChange'
);
}

Ext.extend(Office.tech.Person,Ext.util.Observable,{
setName:function(_name){
if(this.name != _name){
this.fireEvent('nameChange','a','b');
}
}
});

var _p = new Office.tech.Person({name:"terry",age:30});
_p.on('nameChange',function(a,b){
alert(a)
});
_p.setName('tt');



Panel组件中tools的用法
tools:[
{id:"save"},
{id:"help"},
{id:"up"},
{
id:"close",
handler:function()...{
Ext.MessageBox.alert("工具栏按钮","工具栏的关闭按钮事件")
}
}
],


bodyStyle:'padding:10px 0px 0px 10px',指定Panel,Window等的内部pad


为组件指明事件可以用
listeners:{
'render':function(_win){
_win可以引入刚生成的对象做为参数
}
}


Panel
addButton设计时方法
为面板添加按钮。注意必须在渲染之前才可以调用该方法

renderTo直直嵌入
applyTo? 融和


Ext.DomHelper.append()第三个参数为true是，返回Ext.element
Ext.element.child(),查找子元素


Panel等Ext.Container的items属性可以返回一个mixedCollection集合，用于访问元素


Panel中tool在面板头部加
tbar在面板上部加? bbar 在面板底部加

tarbar中的item，如果不加xtype默认为xbbutton


Window组件，可以带一个WindowGroup，属于这个WindowGroup的Window
可以统一管理,具体见WindowGroup的方法
new Ext.Window({'manager':'WindowGroup实例'});


Ext.Message详解

Ext.Msg.prompt('tips','password',null,this,true);多行文本框
更详细的解析看这里
http://chenjumin.javaeye.com/blog/668398

Window中显示背景色用
plain:true
Panel中显示背景色用
baseCls:'x-plain'

Window在render中可以调用生成的变量_win,查在buttons中的button的handle的函数中不能用_win
此时可以用this.ownerCt.ownerCt得到与_win同等的对象

关于datefield
不能手机输入editable:false
事件blur:function(_df)这里的参数就是datefiled本身
可以用_df.getValue()返回一个时间即Date

象textfield等 为什么要获得dom的时候要用_c.getEl().dom?
因为textfield是一个Component要转成Element才可以,.dom就Element的属性

extjs3.2版中combo绑定数据更容易
store:[[1,'boy'],[2,'girl']]
triggerAction:'all'


表单验证
用vtype，错误提示用
Ext.QuickTips.init();//支持tips提示
Ext.form.Field.prototype.msgTarget='under';


自定议验证,vtype:'name'
xxxText指有错时的提示
xxxMask指只能输入什么

Ext.applyIf(Ext.form.VTypes,{
'name':function(_v){
return _v == 'name'
},
'nameText':'name is wrong',
'nameMask':/\d/
});

如果在表单中出现灰色提示?
emptyText:'tips'



ajax返回xml,php服务器角本中的写法
<?php
header ("content-type: text/xml");
echo "<gen><root>";
echo "<name>name</name>";
echo "<age>32</age>";
echo "<you>cloudrainwind@163.com</you>";
echo "</root></gen>";
当然也可以用其它phpxml类生成



gridPanel加载数据时显示动画
loadMask:'loading'


gridPanel有几个要点：
数据 store
列?? ColumnModel
选择 RowSelectionModel

如果要得以选择的列，就是 _grid.getSelectionModel().getSelected()
选择列是的事件是rowselect




Extjs? core 这次看英文的文档
http://www.sencha.com/products/core/manual/index.php
一天看完，收获得蛮大
----------------------------------------分隔线--------------------------

组件在构造时会注册到Ext.ComponentMgr，所以可以通过Ext.ComponentMgr.get('id')得到
Ext.getCmp()是它的一个缩写


Ext.ToolBar设置产生的效果
->? 会把后边的对象推到面板的右边
-?? 在面板的对象与对象间加上???? |


table布局，象使用table一样，可以用rowspan,colspan来布局

GridPanel中要排序
sortable:true,
必须要加上
dataIndex:'xxx'

宣染自定议内容
renderer:function(value){
return value;
}

Record中getField获得字段的信息

xmlReader中用record表示根
jsonReader中用root表示根

用jsonStore是
reader就是jsonReader,只接用
fields:[]配置Record.create([])即可

jsonReader中的配置可以在服务器上写上。用metaData


关于tree
treeNode及asynctreenode不错

menu:new Ext.menu.DateMenu()
DateMenu要做为一个菜单用

动态显示菜单menu.showAt(_e.getXY())



Extjs中模板类方法，实例方法，构造函数，及自定议事件
//命名空间
Ext.namespace('Dayouhui.Tech');

// 构造方法
Dayouhui.Tech.Person = function(_cfg){
alert('constructor');
Ext.apply(this,_cfg);
};

//静态方法
Dayouhui.Tech.Person.say = function(){
alert('say')
}

//实例属性，实例方法
Ext.apply(Dayouhui.Tech.Person.prototype,{
name:'terry',
sex:'boy',
print:function(){
alert(this.name + '' + this.sex);
}
})

//类继承
var Meigong = Ext.extend(Dayouhui.Tech.Person,{
constructor:function(){
Meigong.superclass.constructor.call(this,{
work:'div+css'
})
},
job:function(){
alert(this.work)
}
});

//调用构造方法
//Dayouhui.Tech.Person.say();
//调用实例方法
//var p = new Dayouhui.Tech.Person({name:'tom'});
//p.print();
//调用子类
//m = new Meigong();
//m.job();

//另外，命名空间别名，首字母大写，类别名，全部大写

//给person类添加事件

Ext.extend(Dayouhui.Tech.Person,Ext.util.Observable,Ext.apply(Dayouhui.Tech.Person.prototype,{
addE:function(){
this.addEvents(
'namechange',
'sexchange'
);
},
fireE:function(){
this.fireEvent('namechange','otherparams');
}
})

);

_p = new Dayouhui.Tech.Person()
//添加事件
_p.addE();

//事件处理
_p.on('namechange',function(_o){
alert(_o);
})
//触发事件
_p.fireE();
//原来加的方法也可以用
//extend有三个参数是，第三个参数为一个对象，其会加的子类的prototype上,
//which are copied into the subclass's prototype
//所以上边我用的Ext.apply(),这样子原来加到子类prototype上的东西还在
_p.print();


})


在容器组件中，写items时，如果不指定xtype，则默认为panel,有几个例外;
Ext.menu.Menu中默认为menuitem
Ext.Toolbar,ExtButton中默认button


Ext.BLANK_IMAGE_URL = 's.gif';这个要设置
要不会去www.extjs.com找这个图


在Formpanel中用
waitMsgTarget:true
设置出来一个等待的动画

至于出现什么字用FormBasic中的submit或load时的配置参数
waitMsg:'waiting'
waitTitle:'xx',

Ext.form.FormPanel,提交表单
.getForm().submit();

监听
listeners:{
actioncomplete:function(_f,_a){
alert(_a.response.responseText);
}
},

另外必须有一个
errorReader:new Ext.data.XmlReader({
record:''
},[]),
否则监听中无返回,并且在ie中会返回一个
char: 102830
错主：语法错误
代码:0的
提示


关于这个errorReader,是在提交表单时用，提交表单数据后在服务器上验证

如果服务器返回这种
echo "<root success=\"false\">";
echo "<field>";
echo "<id>name</id>";
echo "<msg>error</msg>";
echo "</field>";
echo "</root>";

则id为name的表单会标为验证不通过
这时候写法为
errorReader:new Ext.data.XmlReader({
record:'field',
success:'@success'
},[]),


如果获得FormPanel中所有的字段的值，及如何获得gridPanel中已选中的行
var _r = Ext.getCmp('view_grid').getSelectionModel().getSelected();
var _v = this.ownerCt.ownerCt.getForm().getValues();

判断表单值是否都通过验证
getForm().isValid()


与服务器交互，插入数据
_main.form.getForm().submit({
url:'insert.php',
waitTitle:'保存',
waitMsg:'数据保存中',
success:function(_form,_action){
_r.set('id',_action.result.id)
_main.fireEvent('commit',_r);
_main.close();
},
failure:function(_form, _action){
alert(Ext.util.JSON.encode(_action.result));???
}
});
服务器要返回以下，才算成功
{
"success":true, // note this is Boolean, not string
"msg":"Consignment updated"
}

gridPanel如何加loadmask?
在配置选项里用loadMask:{msg:'正在加载数据...'},
说明:
loading效果出现的时间是GridPanel的store对象从服务器端加载数据时，即对象加载到Ext.data.Store时，而不是数据从 store加载进GridPanel时，所以store.load()要写在GridPanel显示代码的后面，否则将不会出现loading效果。


自已定义什么时候，在哪出现mask
_mask = new Ext.LoadMask(_main.getEl(), {msg:"Please wait..."});
_mask.show()


Ext.Ajax.request({
jsonData:{a:'aaaaa'}
})
这种写法，在php中服务器上要获得要用
file_get_contents("php://input")

另外用ajax提交上来的数据中，双引号前都是 \" 在php中用json_decode将得不到结果
所以要先用stripslashes处理下提交上来的数据

store.recordType 返回store中记录集的构造，就是new record.create({})中的那些


store中得到修改后的记录
store.modified,这时候的问题是，添加一个记不，没有提交到服务器保存，然后删除
这个记录也存在于 modified中，要注意


如何分页？
要点：
PagingToolbar
要有store,pageSize
另外store中要有baseParams:{start:0,limit:3},


arrayReader中
idIndex 指定第几个字段是id
idProperty 指定中个字段时id，如果返回的是['name','age']这种
没有字段的，意思是不是{id:'id',name:'name'}的形式，需要用idIndex来指定

loadRecord时checkboxgroup radiogroup并不能自动选中，只能用setValue(true),有无更好办法？
经研究
对于checkgroup用SetValue([true,false,true])
radiogroup用setValueForItem('girl')
用loadRecord，则配置如下
var r = new Ext.data.Record({name:'terry',aaa:'girl',chk:[true,true,true,false]});
_form.loadRecord(r);
其中aaa是一个radiogroup的id，其中有一个radio值为girl
chk为一个checkboxgroup的id,其下边有四个checkbox




================================================
例子学习

_win.show(el)如果有el，从el处滑出来窗口
cmargins，是border布局中被Collapse时候的margin,

tabPanel中
defaults:{autoScroll:true},用于每个Tab中文字过多时出现滚动条
每人tab中还可以加closable:true以关闭此tab
tab中有form时，尽量加在tabPanel的配置中加上
deferredRender:false,意思是每个tab不是在点的时候才render,那样子可能得不到表单的值

fieldSet中可以设置
checkboxToggle:true
出来一人checkbox，点击可以折叠，打开fieldset

formPanel中可以设置
labelAlign: 'top', 把label放到字段的上边

basicForm的load,submit实际是对应的Action.Submit,Action.Load的实例
Submit时
submitEmptyText决定默认文本是否提交


Record.create中的{}中可以加一个convert，其可以对应没有的字段，用于对其它字段处理，返回一个值

RadioGroup整个组可以用allowBlank:false,强制必须选一个

让textfield显示图片
inputType：'image'


文件上传在ux命名空间中，其是一个扩展，用法：
引入css,及js

xtype:'fileuploadfield',
fieldLabel:'上传',
width:140,
name:'file',
buttonText: '',
buttonCfg: {
iconCls: 'upload-icon'
}
定义一个upload-icon的class,背景用一个小图
要用文件上传
FormPanel中要加上
fileUpload: true,

然后getForm().submit即可,服务器上返回是一个json里边有success:true才可以
前边提过了



slierfield的用法
xtype:'sliderfield',
fieldLabel:'成功率',
maxValue:100,
id:'slider',
height:200,
increment:2,
vertical : true,
tipText:function(_v){
return _v.value()
}


compositefield把items中的字段放在一行，内部用的hbox布局
{
xtype: 'compositefield',
labelWidth: 120,
combineErrors: false,//每一个单独显示错误信息
items: [
{
xtype???? : 'textfield',
fieldLabel: 'Title',
width???? : 20
},
{
xtype???? : 'textfield',
fieldLabel: 'First',
flex????? : 1
},
{
xtype???? : 'textfield',
fieldLabel: 'Last',
flex????? : 1
}
]
}

其中可以加上flex:1，这个属性相当于水平把整个区按每个flex指定的比例来分配

hbox
align:stretch
可以把无素拉伸

说来说去xtype:'button'中可以加菜单
iconCls,改变buttons的背景图

要使用各种各样的button及菜单，看examples/button/buttons.html

buttongroup可以带一个title