随笔 - 11  文章 - 37  trackbacks - 0
<2008年8月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
31123456

常用链接

留言簿(1)

随笔档案

搜索

  •  

最新评论

阅读排行榜

评论排行榜

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

今天把demo加到服务器上面了,让大家过来看看.

Extjs官方于8月4日下午宣布发布Ext2.2版本。这个版本不但增加了很多新功能,同时也修复了很多前面版本中存的Bug,并在性能上作了很大的改进,下面是我针对该版本整理搜集的一些资料,下面是我针对该版本整理搜集的一些资料,希望对大家有一定帮助。

    新增的组件很多都是从社区中的优秀的Ext扩展应用中集成过来的,主要有下面的内容:

1、增加CheckboxGroup / RadioGroup组件

    只需设置简单的column属性,就能搞定checkbox及radio的扩展,示例代码如下:

{
            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应用中增加了记录访问的Tab历史顺序功能,可以轻松实现在单页面应用中用来进行历史记录导航。如下图所示:

 

3、多选列表框MultiSelect及组合选择框ItemSelector

    MultiSelect是一个可以支持多选择的传统列表框,ItemSelector是由两个MultiSelects 组成并提供包括拖放操作等灵活控制及相关特性的数据选择框。示例代码:

{
            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

    文件上传表单位录入字段,这是一个实用的表单组件的官方扩展示例,提布供丰富的样式选择的自定义功能,完全支持在Form局中的应用。示例代码:

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

效果图:

 


5、XmlTreeLoader

    提供了一个通过加载XML文档数据作为树节点的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文件内容大致如下:

    <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示例集成了这个版本的官方扩展中,从页为大家学习如何以外部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'}
                    }]
                }
运行效果图:


 

 

 

另外,这个版本还有几个功能及性能上的大改进,这些对于实际应用开发是非常重要的,主要包括:

1、对Firefo3完全支持

2、提供了关于拖放处理的高级示例

3、性能的改进,Bug修改及一些其实用东东,具体如下:

针对不同的firefox版本提供新的属性,比如Ext.isGecko2 and Ext.isGecko3等。

在表格中增加表格行的延迟加载,大大提升了表格数据批量渲染的性能。

对EventManager进行了重构,改进了事件处理器的管理,从而避免了IE中的内存泄漏问题。

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

还有其它100多个的改进及修复。

posted on 2008-08-11 14:33 我为我狂 阅读(5493) 评论(2)  编辑  收藏

FeedBack:
# re: Ext2.2发布后,demo预览 2008-08-13 13:43 我不眼红
Ext2.2的发布,会不会在性能上面有所改善呢?  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: