extjs - 自訂vtype

內建的vtype有email、url、alpha、apphanum等等，不過內建的vtype可能不合我們使用，所以我們就需要自訂vtype。 我們必須定義vtype的value、mask、error message以及testing function：

• xxxVal： 輸入內容的正規表示式。
• xxxMask： 輸入的遮罩。
• xxxText： 錯誤訊息。

Ext.onReady(function() {
    Ext.QuickTips.init();
    Ext.form.VTypes['portListVal'] = /^([0-9]+[,\-])*[0-9]+$/;
    Ext.form.VTypes['portListMask'] = /[0-9\-,]/;
    Ext.form.VTypes['portListText'] = 'Invalid Port List';
    Ext.form.VTypes['portList'] = function (v) {
        return Ext.form.VTypes['portListVal'].test(v);
    }

    var form = new Ext.FormPanel({
        renderTo: Ext.getBody(),
        frame: true,
        items: [{
            xtype: 'textfield',
            fieldLabel: 'txt',
            vtype: 'portList'
        }]
    });
});

extjs, ux - Managed iFrame

JavaScript算是被誤解蠻深的語言，很多人都認為JavaScript很容易，卻往往寫出一堆邏輯錯誤，但是功能符合的code，進而造成許多的memory leak，這點我也避免不了，於是就有人想到用iframe來解決，目前我在使用上確實幫我解決了不少memory leak的問題，所以，也安心的讓大家亂寫一通(即便他們很認真的寫還是寫得很亂)。
最簡單的iframe就是指定xtype和defaultSrc即可，而切換頁面則透過iframe的setSrc(url)。

Ext.onReady(function() {
  var viewport = new Ext.Viewport({
    renderTo: Ext.getBody(),
    layout: 'border',
    items: [{
      region: 'west',
      title: 'west',
      collapsible: true,
      width: 100,
      items: [{
        xtype: 'button',
        text: 'google',
        handler: function () {
          viewport.getComponent('center').setSrc('http://www.google.com');
        }
      },
      {
        xtype: 'button',
        text: 'nano chicken',
        handler: function () {
          viewport.getComponent('center').setSrc('http://www.blogger.com');
        }
      }]
    },
    {
      region: 'center',
      title: 'center',
      id : 'center',
      xtype: 'iframepanel',
      defaultSrc: 'http://www.blogger.com'
    }]
  });
});

這樣每一個iframe的網頁都是一個獨立的網頁，即便，parent頁面已經有include extjs了，iframe裡面的網頁如果有用到extjs，還是需要在include一次。
參考資料：
http://www.extjs.com/learn/Extension:ManagedIframe
http://www.extjs.com/forum/showthread.php?t=71961
http://code.google.com/p/managediframe/

ext-doc

解開後在sample目錄下有ext-doc.bat執行檔，以及sample code(sample.js)和configure檔(ext.xml)。可以將js檔加入ext.xml的source裡面，至於document的描述可以參考sample code或者extjs的source file。設定好ext.xml後，直接執行ext-doc.bat就可以產生結果啦，預設的輸出目錄是在output的目錄下。接著把output複製到web server就可以看結果啦。

下載 ext-doc-1.0.131

相關網址：
http://code.google.com/p/ext-doc/downloads/list
http://extjs.com/forum/showthread.php?t=55214
http://groups.google.com/group/ext-doc?pli=1
http://ext-doc.org/docs/