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的日曆，可以禁止使用某些日期，還支援Regex，如

   {

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是用於匹配的Regex；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判斷所在的哪一行