EXTJS学习2

1 extjs对话框中的图标
   要在对话框中加个图片，很容易，首先加个样式：
<style>
.milton-icon { background: url(images/milton-head-icon.png) no-repeat; }
</style>
然后在对话框中设置
Ext.Msg.show({
title:'Milton',
msg: 'Have you seen my stapler?',
buttons: {yes: true, no: true, cancel: true},
icon: 'milton-icon',
   这里设置icon，指出其CSS样式就可以了。

2 对话框的选择，包括点不同按钮的反应
   Ext.onReady(function(){
Ext.Msg.show({
title:'Milton',
msg: 'Have you seen my stapler?',
buttons: {yes: true, no: true, cancel: true},
icon: 'milton-icon',
defaultButton: 'no',
fn: function(btn) {
switch(btn){
case 'yes':
Ext.Msg.prompt('Milton', 'Where is it?', function

(btn,txt) {
if (txt.toLowerCase() == 'the office') {
Ext.get('my_id').dom.innerHTML = 'Work

Sucks';
}else{
Ext.get('my_id').dom.innerHTML = txt;
}

});
break;
case 'no':
Ext.Msg.alert('Milton', 'Im going to burn the building

down!');
break;
case 'cancel':
Ext.Msg.wait('Saving tables to disk...','File Copy');
break;
}
}
});
});

3 ext对某个DIV ID的引用，可以使用Ext.get('myid')来设置
4  EXT的日历，可以禁止使用某些日期，还支持正则表达式，如
   {
xtype: 'datefield',
fieldLabel: 'Released',
name: 'released',
disabledDays: [1,2,3,4,5]
    }]
   上面的是禁止周6，日以外的所有日期，0为周日，6为周6

5 设置验证样式，比如：
   {
xtype: 'textfield',
fieldLabel: 'Director',
name: 'director',
vtype: 'alpha'
}
  vtype设置了验证样式，比如alpha只好允许字母和数字，还有email,url等

6 创建自定义验证方式
    比如要创建一个验证，要输入的字符串之间有空格，则
  {
xtype: 'textfield',
fieldLabel: 'Director',
name: 'director',
vtype: 'name'
    }
   Ext.form.VTypes.nameVal  = /^([A-Z]{1})[A-Za-z\-]+ ([A-Z]{1})[A-Za-z\-]+/;
Ext.form.VTypes.nameMask = /[A-Za-z\- ]/;
Ext.form.VTypes.nameText = 'In-valid Director Name.';
Ext.form.VTypes.name = function(v){
return Ext.form.VTypes.nameVal.test(v);
};
 
其中xxxxVal是用于匹配的正则表达式；xxxMask，屏蔽限制用户的输入；xxxxText:用于错误信息

7 表单中，监听回车按键的事件
  items: [{
xtype: 'textfield',
fieldLabel: 'Title',
name: 'title',
allowBlank: false,
listeners: {
specialkey: function(frm,evt){
if (evt.getKey() == evt.ENTER) {
movie_form.getForm().submit();
}
}
}
8 GRID中的单元格显示函数
   在某列中使用HTML和图形，比如：
  {header: "Cover", dataIndex: 'coverthumb', renderer: cover_image},
function cover_image(val){
return '<img src=images/'+val+'>';
}
9 GRID中监听某行被选择；
  sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: {
fn: function(sm,index,record) { Ext.Msg.alert('You

Selected',record.data.title); }
}
}
}),
注意第一行为0序号

10 做一个按钮，单击时可以编辑某一行的数据
   tbar: [{
                // changes the title of the currently selected row usign a messagebox
text: 'Change Title',
handler: function(){
var sm = grid.getSelectionModel();
                    // get the selected row (if exists)
var sel = sm.getSelected();
                    // has something been selected?
if (sm.hasSelection()){
Ext.Msg.show({
title: 'Change Title',
prompt: true,
buttons: Ext.MessageBox.OKCANCEL,
value: sel.data.title,
fn: function(btn,text){
if (btn == 'ok'){
                                    // set a new value for one of the
                                    // columns in our selected row
sel.set('title', text);
}
}
});
}
}

11 在editorgrid中，判断某些行不可编辑，采用afteredit事件就可以了
  listeners: {
afteredit: function(e){
if (e.field == 'director' && e.value == 'Mel Gibson'){
Ext.Msg.alert('Error','Mel Gibson movies not allowed');
e.record.reject();
}else{
e.record.commit();
}
}

注意，e.filed是判断所在的列，e.value判断所在的哪一行