ext 实例（转）

ExtJS开发实践之Border布局

Border布局在ExtJS中的应用很常见，可以将整个页面划分成几个区域，该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。

基本代码：

//Border布局的定义
Ext.onReady(function(){
    var vp=new Ext.Viewport({
        layout:"border",
        items:[north,south,east,west,center]
    });
});
//底部
var south=new Ext.Panel({
    border:false,
    region:"south",
    height:40,
    items:[botton]
});

通过定义Viewport，就可以实现Border的布局，将页面划分成东西南北中五个部分，每个部分添加什么，就有自己决定啦，很好理解。

效果：

ExtJS开发实践之Tree控件

对于ExtJS中的树来说，树加载器TreeLoader是一个比较关键的部件，树加载器由Ext.tree.TreeLoader类定义，只有AsyncTreeNode才会使用TreeLoader。

基本代码：

从上面的代码中可以看出，树中显示的内容是从Content/DMenuTree.aspx中Load到的，这里我实现的方法是通过数据库中一个表保存树形结构，然后通过将数据转化成Json输出到页面中。

效果：

ExtJS开发实践之TabPanel控件

个人认为这是ExtJS中提供的最实用绚丽的控件之一，他可以实现Tab的添加和删除，给用户很人性的用户体验。

基本代码：

var center=new Ext.TabPanel({
    //距两边间距
    style:"padding:0 5px 0 5px",
    region:"center",
    //默认选中第一个
    activeItem:0,
    //如果Tab过多会出现滚动条
    enableTabScroll:true,
    //加载时渲染所有
    //deferredRender:false,
    layoutOnTabChange:true,
    items:[{
        xtype:"panel",
        id:"index",
        iconCls:"indexicon",
        title:"Home Page",
        html:"<iframe src='HomePage.aspx'scrolling='no' frameborder=0 width=100% height=100%></iframe>"
    }],plugins: new Ext.ux.TabCloseMenu()
    });

效果：

ExtJS开发实践之数据的获取和显示

ExtJS中的数据交互基本上就是以Ajax的方式进行传递和实现的，也就是可以不用刷新页面，就可以访问服务器的程序进行数据读取或数据保存等操作。

基本代码：

Code

简单说下上面的代码，大家就明白ExtJS是如何获取数据的了。首先定义一个保存数据库字段的数组，然后定义ExtJS中保存数据的核心Ext.data.Store，从CarInfo.aspx中读取数据，并将读取的数据通过JsonReader付给定义好的数组，最后通过Load方法加载参数。而CarInfo.aspx中实现的是对数据的访问操作。从这也可以看出，通过脚本实现数据的交互，从而完成无刷新的操作。

数据的显示：这里要介绍的是ExtJS中的GridPanel

ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。这里不逊色于GridView的功能。

基本代码：

Code

效果：

ExtJS开发实践之Window窗体

ExtJS中窗口是由Ext.Window类定义，该类继承自Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。

基本代码：

var AddCustomerfp=new Ext.form.FormPanel({
            width:375,
            height:280,
            plain:true,
            layout:"form",
            defaultType:"textfield",
            labelWidth:95,
            baseCls:"x-plain",
            //锚点布局-
            defaults:{anchor:"95%",msgTarget:"side"},
            buttonAlign:"center",
            bodyStyle:"padding:0 0 0 0",
            items:[
            {
                    name:"customername",
                    fieldLabel:"客户名称",
                    allowBlank:false,
                    blankText:"客户名称不允许为空"
            },
            {
                    name:"customerstyle",
                    xtype:"combo",
                    fieldLabel:"客户类型",
                    //传入后台真实值value field /value
                    hiddenName:"customerstyle",
                    readOnly:true,
                    mode:"local",
                    displayField:"show",
                    valueField:"value",
                    triggerAction:"all",
                    value:"0",
                    store:new Ext.data.SimpleStore({
                        fields:["show","value"],
                        data:[["个人客户","0"],["企业客户","1"]]
                    })
            },
            {
                    name:"contactor",
                    fieldLabel:"联系人",
                    allowBlank:false,
                    blankText:"联系人不允许为空"
            },
            {
                    name:"contact",
                    fieldLabel:"联系电话",
                    allowBlank:false,
                    blankText:"联系电话不允许为空",
                    regex:/^-?\d+$/,
                    regexText:"请输入数字"
            },
            {
                    name:"address",
                    fieldLabel:"地址",
                    allowBlank:false,
                    blankText:"地址不允许为空"
            },
            {
                    name:"customerintroduce",
                    xtype:"textarea",
                    fieldLabel:"订单说明",
                    regex:/^[\s\S]{1,50}$/,
                    regexText:"订单说明请不要超过50个字符"
            }
            ]});

var AddCustomerWin=new Ext.Window({
            title:"添加客户信息",
            width:410,
            height:290,
            plain:true,
            iconCls:"addicon",
            //不可以随意改变大小
            resizable:false,
            //是否可以拖动
            //draggable:false,
            defaultType:"textfield",
            labelWidth:100,
            collapsible:true, //允许缩放条
            closeAction : 'hide',
            closable:true,
            plain : true,
            //弹出模态窗体
            modal: 'true',
            buttonAlign:"center",
            bodyStyle:"padding:10px 0 0 15px",
            items:[AddCustomerfp],
            listeners:{
                "show":function()
                {
                    //当window show事件发生时清空一下表单
                    AddCustomerfp.getForm().reset();
                }
            },
            buttons:[{
                    text:"保存信息",
                    minWidth:70,
                    handler:function()
                    {
                        if(AddCustomerfp.getForm().isValid())
                            {
                                //弹出效果
                                Ext.MessageBox.show
                                (
                                    {
                                        msg: '正在保存，请稍等

',
progressText: 'Saving

',
                                        width:300,
                                        wait:true,
                                        waitConfig: {interval:200},
                                        icon:'download',
                                        animEl: 'saving'
                                    }
                                );
                                setTimeout(function(){Ext.MessageBox.hide();
                                }, 1000);
                                AddCustomerfp.form.submit({
                                    url:"Content/Customer/AddCustomer.aspx",
                                    method:"POST",
                                    success:function(form,action)
                                    {
                                        //成功后
                                        var flag=action.result.success;
                                        if(flag=="true")
                                        {
                                            AddCustomerWin.hide();
                                            CustomerInfoStore.reload();
                                        }
                                    },
                                    failure:function(form,action)
                                    {
                                        Ext.MessageBox.alert("提示!","保存房管理员信息失败!");
                                    }
                                });
                           }
                    }
            },{
                text:"重置",
                minWidth:70,
                qtip:"重置数据",
                handler:function()
                {
                    AddCustomerfp.getForm().reset();
                }
            },{
                    text:"取消",
                    minWidth:70,
                    handler:function()
                    {
                        AddCustomerWin.hide();
                    }
            }]

    });

效果：

实现起来可以说是相当的容易。很实用。

ExtJS开发实践之换肤

最后我们来说下ExtJS中的换肤功能，这个是有ExtJS内部提供的，实用起来十分方便，我只需定义一个皮肤脚本文件：

通过选择，指定不同的css。

效果：

小结：ExtJS开发实践中的基本应用就介绍到这，通过强大的ExtJS类库，可以很容易的实现炫酷的UI效果，对我们的开发带来很大的帮助，但是，好事的同时也有一些弱势，脚本的调试就是很头疼的问题，一个小小的"，"就可能叫你检查半天。相信合理的使用ExtJS，会给你的开发带来很不错的效果。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。