Ext2.2发布后,demo预览

最新推荐文章于 2024-08-31 11:22:08 发布

bobo744

最新推荐文章于 2024-08-31 11:22:08 发布

阅读量462

点赞数

文章标签： EXT DWR 应用服务器 IE XML

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'}
                    }]
                }
运行效果图：