隨筆檔案

http://www.vifir.com/plugins/extjs/ext-2.2/examples/samples.html

今天把demo加到服務(wù)器上面了,讓大家過來看看.

Extjs官方于8月4日下午宣布發(fā)布Ext2.2版本。這個版本不但增加了很多新功能，同時也修復(fù)了很多前面版本中存的Bug，并在性能上作了很大的改進(jìn)，下面是我針對該版本整理搜集的一些資料，下面是我針對該版本整理搜集的一些資料，希望對大家有一定幫助。

　　　　新增的組件很多都是從社區(qū)中的優(yōu)秀的Ext擴(kuò)展應(yīng)用中集成過來的，主要有下面的內(nèi)容：

1、增加CheckboxGroup / RadioGroup組件

　　　　只需設(shè)置簡單的column屬性，就能搞定checkbox及radio的擴(kuò)展，示例代碼如下：

{
            xtype: 'checkboxgroup',
            fieldLabel: 'Multi-Column (horizontal)',
            columns: 3,
            items: [
                {boxLabel: 'Item 1', name: 'cb-horiz-1'},
                {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
                {boxLabel: 'Item 3', name: 'cb-horiz-3'},
                {boxLabel: 'Item 4', name: 'cb-horiz-4'},
                {boxLabel: 'Item 5', name: 'cb-horiz-5'}
            ]
        }

 如下圖所示：

2、歷史History

　　　　在Tab應(yīng)用中增加了記錄訪問的Tab歷史順序功能，可以輕松實現(xiàn)在單頁面應(yīng)用中用來進(jìn)行歷史記錄導(dǎo)航。如下圖所示：

3、多選列表框MultiSelect及組合選擇框ItemSelector

　　　　MultiSelect是一個可以支持多選擇的傳統(tǒng)列表框，ItemSelector是由兩個MultiSelects 組成并提供包括拖放操作等靈活控制及相關(guān)特性的數(shù)據(jù)選擇框。示例代碼：

{
            xtype:"multiselect",
            fieldLabel:"Multiselect<br />(Required)",
            name:"multiselect",
            dataFields:["code", "desc"],
            valueField:"code",
            displayField:"desc",
            width:250,
            height:200,
            allowBlank:false,
            data:[[123,"One Hundred Twenty Three"],
                ["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
                ["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
            tbar:[{
                text:"clear",
                handler:function(){
                        msForm.getForm().findField("multiselect").reset();
                    }
            }]
        }
 

效果圖：

4、FileUploadField

　　　　文件上傳表單位錄入字段，這是一個實用的表單組件的官方擴(kuò)展示例，提布供豐富的樣式選擇的自定義功能，完全支持在Form局中的應(yīng)用。示例代碼：

{
            xtype: 'fileuploadfield',
            id: 'form-file',
            emptyText: 'Select an image',
            fieldLabel: 'Photo',
            name: 'photo-path',
            buttonCfg: {
                text: '',
                iconCls: 'upload-icon'
            }
        }
 

效果圖：

5、XmlTreeLoader

　　　　提供了一個通過加載XML文檔數(shù)據(jù)作為樹節(jié)點的XmlTreeLoader。示例代碼：

{

            xtype: 'treepanel',

            id: 'tree-panel',

            region: 'center',

            margins: '2 2 0 2',

            autoScroll: true,

            rootVisible: false,

            root: new Ext.tree.AsyncTreeNode(),

                 loader: new Ext.ux.XmlTreeLoader ({

                  dataUrl:'xml-tree-data.xml'

            }),

…}

XML文件內(nèi)容大致如下：

    <authors>
        <author first="Fyodor" last="Dostoevsky" gender="m">
            <book title="Crime and Punishment" published="1866" url="http://...">
                Raskolnikov, a destitute and desperate former student...
            </book>
            ...
        </author>
        ...
    </authors>
 

效果圖如下：

6、GMapPanel

　　　　把以前寫在blog中的一個google map示例集成了這個版本的官方擴(kuò)展中，從頁為大家學(xué)習(xí)如何以外部API交互提供了一個實用的示例。代碼如下：

{
                    xtype: 'gmappanel',
                    region: 'center',
                    zoomLevel: 14,
                    gmapType: 'map',
                    mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                    mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
                    setCenter: {
                        geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
                        marker: {title: 'Fenway Park'}
                    },
                    markers: [{
                        lat: 42.339641,
                        lng: -71.094224,
                        marker: {title: 'Boston Museum of Fine Arts'},
                        listeners: {
                            click: function(e){
                                Ext.Msg.alert('Its fine', 'and its art.');
                            }
                        }
                    },{
                        lat: 42.339419,
                        lng: -71.09077,
                        marker: {title: 'Northeastern University'}
                    }]
                }
運行效果圖：

另外，這個版本還有幾個功能及性能上的大改進(jìn)，這些對于實際應(yīng)用開發(fā)是非常重要的，主要包括：

1、對Firefo3完全支持

2、提供了關(guān)于拖放處理的高級示例

3、性能的改進(jìn)，Bug修改及一些其實用東東，具體如下：

針對不同的firefox版本提供新的屬性，比如Ext.isGecko2 and Ext.isGecko3等。

在表格中增加表格行的延遲加載，大大提升了表格數(shù)據(jù)批量渲染的性能。

對EventManager進(jìn)行了重構(gòu)，改進(jìn)了事件處理器的管理，從而避免了IE中的內(nèi)存泄漏問題。

修正了 “small PNG’s can cause performance issues in IE7″ 問題。

還有其它100多個的改進(jìn)及修復(fù)。