国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

Border布局在ExtJS中的應(yīng)用很常見，可以將整個(gè)頁面劃分成幾個(gè)區(qū)域，該布局把容器分成東南西北中五個(gè)區(qū)域，分別由east，south, west，north, cente來表示，在往容器中添加子元素的時(shí)候，我們只需要指定這些子元素所在的位置，Border布局會(huì)自動(dòng)把子元素放到布局指定的位置。

基本代碼：

Code
//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，就可以實(shí)現(xiàn)Border的布局，將頁面劃分成東西南北中五個(gè)部分，每個(gè)部分添加什么，就有自己決定啦，很好理解。

效果：

對(duì)于ExtJS中的樹來說，樹加載器TreeLoader是一個(gè)比較關(guān)鍵的部件，樹加載器由Ext.tree.TreeLoader類定義，只有AsyncTreeNode才會(huì)使用TreeLoader。

基本代碼：

Code
var root=new Ext.tree.AsyncTreeNode({
        id:rootsid,
        text:"車輛調(diào)度管理系統(tǒng)",
        loader:new Ext.tree.TreeLoader({
            url:"Content/DMenuTree.aspx",
            listeners:{
                "beforeload":function(treeloader,node)
                {
                        treeloader.baseParams={
                        id:node.id,
                        method:'POST'
                        };
                }
            }
        })
    });  
   
    
var treenode=new Ext.tree.TreePanel({
    //如果超出范圍帶自動(dòng)滾動(dòng)條
    autoScroll:true,
    animate:true,
    root:root,
    //默認(rèn)根目錄不顯示
    rootVisible:false,
    border:false,
    animate:true,
    lines:true,
    enableDD:true,
    containerScroll:true,
    listeners:
    {
        "click":function(node,event)
        {
            //葉子節(jié)點(diǎn)點(diǎn)擊不進(jìn)入鏈接
            if (node.isLeaf()) {
                // 顯示葉子節(jié)點(diǎn)菜單
                event.stopEvent();
                ALLEvents(node);
            } else {
                    //不是葉子節(jié)點(diǎn)不觸發(fā)事件
                    event.stopEvent();
                    //點(diǎn)擊時(shí)展開
                    node.toggle();
           }
            
        }
    }
    
});

//加載時(shí)自動(dòng)展開根節(jié)點(diǎn)
treenode.expandAll();

從上面的代碼中可以看出，樹中顯示的內(nèi)容是從Content/DMenuTree.aspx中Load到的，這里我實(shí)現(xiàn)的方法是通過數(shù)據(jù)庫中一個(gè)表保存樹形結(jié)構(gòu)，然后通過將數(shù)據(jù)轉(zhuǎn)化成Json輸出到頁面中。

效果：

個(gè)人認(rèn)為這是ExtJS中提供的最實(shí)用絢麗的控件之一，他可以實(shí)現(xiàn)Tab的添加和刪除，給用戶很人性的用戶體驗(yàn)。

基本代碼：

Code
var center=new Ext.TabPanel({
    //距兩邊間距
    style:"padding:0 5px 0 5px",
    region:"center",
    //默認(rèn)選中第一個(gè)
    activeItem:0,
    //如果Tab過多會(huì)出現(xiàn)滾動(dòng)條
    enableTabScroll:true,
    //加載時(shí)渲染所有
    //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中的數(shù)據(jù)交互基本上就是以Ajax的方式進(jìn)行傳遞和實(shí)現(xiàn)的，也就是可以不用刷新頁面，就可以訪問服務(wù)器的程序進(jìn)行數(shù)據(jù)讀取或數(shù)據(jù)保存等操作。

基本代碼：

Code
var CarInfoStore;
CarInfoManage=function(node){
    //分頁每頁顯示數(shù)量     
    var pageSize = 12;
    //指定列參數(shù)
    var fields = ["carid","carmodel","carbrand","driver","carcolor","cartaken","carsitnum","carnumber","carfuel","addtime","carstate"];
    
    CarInfoStore = new Ext.data.Store({
         
         proxy:new Ext.data.HttpProxy(
           {
                url:"Content/Car/CarInfo.aspx",
                method:"POST"
           }),
           reader:new Ext.data.JsonReader(
              {
                fields:fields,
                root:"data",
                id:"carid",
                totalProperty:"totalCount"
           })
    });
    
    //加載時(shí)參數(shù)
     CarInfoStore.load({params:{start:0,limit:pageSize}}); 

簡單說下上面的代碼，大家就明白ExtJS是如何獲取數(shù)據(jù)的了。首先定義一個(gè)保存數(shù)據(jù)庫字段的數(shù)組，然后定義ExtJS中保存數(shù)據(jù)的核心Ext.data.Store，從CarInfo.aspx中讀取數(shù)據(jù)，并將讀取的數(shù)據(jù)通過JsonReader付給定義好的數(shù)組，最后通過Load方法加載參數(shù)。而CarInfo.aspx中實(shí)現(xiàn)的是對(duì)數(shù)據(jù)的訪問操作。從這也可以看出，通過腳本實(shí)現(xiàn)數(shù)據(jù)的交互，從而完成無刷新的操作。

數(shù)據(jù)的顯示：這里要介紹的是ExtJS中的GridPanel

ExtJS中的表格功能非常強(qiáng)大，包括了排序、緩存、拖動(dòng)、隱藏某一列、自動(dòng)顯示行號(hào)、列匯總、單元格編輯等實(shí)用功能。這里不遜色于GridView的功能。

基本代碼：

Code
    //--------------------------------------------------列選擇模式
    var sm = new Ext.grid.CheckboxSelectionModel({
        dataIndex:"carid"
    });
    //--------------------------------------------------列頭
    
    var cm = new Ext.grid.ColumnModel([
        sm,{
        header:"車輛ID",
        width:100,
        dataIndex:"carid",
        tooltip:"車輛唯一標(biāo)識(shí)",
        //可以進(jìn)行排序
        sortable:true
    },
    {
        header:"車輛類型",
        width:100,
        tooltip:"車輛類型",
        dataIndex:"carmodel",
        sortable:true
    },
    {
        header:"車輛品牌",
        width:100,
        tooltip:"車輛品牌",
        dataIndex:"carbrand"
    },
    {
        header:"駕駛員",
        width:100,
        tooltip:"駕駛員",
        dataIndex:"driver"
    },
    {
        header:"車輛顏色",
        width:100,
        tooltip:"車輛顏色",
        dataIndex:"carcolor"
    },
    {
        header:"承載量",
        width:100,
        tooltip:"車輛承載量",
        dataIndex:"cartaken"
    },
    {
        header:"車輛座位數(shù)",
        width:120,
        tooltip:"車輛座位數(shù)",
        dataIndex:"carsitnum"
    },
    {
        header:"車牌號(hào)",
        width:100,
        tooltip:"車牌號(hào)",
        dataIndex:"carnumber"
    },
    {
        header:"使用燃料",
        width:100,
        tooltip:"使用燃料",
        dataIndex:"carfuel"
    },
    {
        header:"添加時(shí)間",
        width:100,
        tooltip:"添加時(shí)間",
        dataIndex:"addtime"
    },
    {
        header:"車輛當(dāng)前狀態(tài)",
        width:150,
        tooltip:"車輛當(dāng)前狀態(tài)",
        dataIndex:"carstate"
    }
    ]);
    
    //----------------------------------------------------定義grid
    var CarInfogrid = new Ext.grid.GridPanel({
        id:"CarInfogrid",
        ///id:"Carid";
        store:CarInfoStore,
        sm:sm,
        cm:cm,
        loadMask:true,
        //超過長度帶自動(dòng)滾動(dòng)條
        autoScroll:true,
        border:false,
        viewConfig:{
            columnsText:"顯示/隱藏列",
            sortAscText:"正序排列",
            sortDescText:"倒序排列",
            forceFit:true
        },
        //分頁
        bbar:new Ext.PagingToolbar({
            store:CarInfoStore,
            pageSize:pageSize,
            //顯示右下角信息
            displayInfo:true,
            displayMsg:'當(dāng)前記錄 {0} -- {1} 條 共 {2} 條記錄',
            emptyMsg:"No results to display",
            prevText:"上一頁",
            nextText:"下一頁",
            refreshText:"刷新",
            lastText:"最后頁",
            firstText:"第一頁",
            beforePageText:"當(dāng)前頁",
            afterPageText:"共{0}頁"
        
        }),
        tbar:[
        '','','<b>查找:</b> ', ' ',
        {
            xtype:'textfield',
            width:220,
            id:'message',
            name:'message'
            
        },'','-','',{
            text:'搜 索',
            pressed:true,
            tooltip:"關(guān)鍵字：車輛ID",
            iconCls:'serchopenroomrecord',
            handler:SerachCarRecord
        },'',
        new Ext.Toolbar.Fill()
        ,"","-","",{
            text:"編輯",
            tooltip:"編輯管理員信息",
            iconCls:"editicon",
            handler:EditCarInfoFn
        },"","-","",{
            text:"刪除",
            tooltip:"刪除管理員信息",
            iconCls:"deleteicon",
            handler:DelCarInfoFn
        },"-"],listeners:{
            'contextmenu':function(e)
            {
                e.stopEvent();
            }
        }
    });
    
    //傳入icon樣式
    GridMain(node,CarInfogrid,"totalicon");
}

效果：

ExtJS中窗口是由Ext.Window類定義，該類繼承自Panel，因此窗口其實(shí)是一種特殊的面板Panel。窗口包含了浮動(dòng)、可拖動(dòng)、可關(guān)閉、最大化、最小化等特性。

基本代碼：

Code
var AddCustomerfp=new Ext.form.FormPanel({
            width:375,
            height:280,
            plain:true,
            layout:"form",
            defaultType:"textfield",
            labelWidth:95,
            baseCls:"x-plain",
            //錨點(diǎn)布局-
            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:"客戶類型",
                    //傳入后臺(tái)真實(shí)值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:[["個(gè)人客戶","0"],["企業(yè)客戶","1"]]
                    })
            },
            {
                    name:"contactor",
                    fieldLabel:"聯(lián)系人",
                    allowBlank:false,
                    blankText:"聯(lián)系人不允許為空"            
            },
            {
                    name:"contact",
                    fieldLabel:"聯(lián)系電話",
                    allowBlank:false,
                    blankText:"聯(lián)系電話不允許為空",
                    regex:/^-?\d+$/,
                    regexText:"請(qǐng)輸入數(shù)字"
            },   
            {
                    name:"address",
                    fieldLabel:"地址",
                    allowBlank:false,
                    blankText:"地址不允許為空"
            },
            {
                    name:"customerintroduce",
                    xtype:"textarea",
                    fieldLabel:"訂單說明",
                    regex:/^[\s\S]{1,50}$/,
                    regexText:"訂單說明請(qǐng)不要超過50個(gè)字符"            
            }
            ]});

 var AddCustomerWin=new Ext.Window({
            title:"添加客戶信息",
            width:410,
            height:290,
            plain:true,
            iconCls:"addicon",
            //不可以隨意改變大小
            resizable:false,
            //是否可以拖動(dòng)
            //draggable:false,
            defaultType:"textfield",
            labelWidth:100,
            collapsible:true, //允許縮放條
            closeAction : 'hide',
            closable:true,
            plain : true,
            //彈出模態(tài)窗體
            modal: 'true', 
            buttonAlign:"center",
            bodyStyle:"padding:10px 0 0 15px",
            items:[AddCustomerfp],
            listeners:{
                "show":function()
                {
                    //當(dāng)window show事件發(fā)生時(shí)清空一下表單
                    AddCustomerfp.getForm().reset();
                }
            },
            buttons:[{
                    text:"保存信息",
                    minWidth:70,
                    handler:function()
                    {
                        if(AddCustomerfp.getForm().isValid())
                            {
                                //彈出效果
                                Ext.MessageBox.show
                                (
                                    {
                                        msg: '正在保存，請(qǐng)稍等

',
                                        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:"重置數(shù)據(jù)",
                handler:function()
                {
                    AddCustomerfp.getForm().reset();
                }
            },{
                    text:"取 消",
                    minWidth:70,
                    handler:function()
                    {
                        AddCustomerWin.hide();
                    }
            }]
    
    });

效果：

實(shí)現(xiàn)起來可以說是相當(dāng)?shù)娜菀?。很?shí)用。

最后我們來說下ExtJS中的換膚功能，這個(gè)是有ExtJS內(nèi)部提供的，實(shí)用起來十分方便，我只需定義一個(gè)皮膚腳本文件：

Code
function changecss(name)
    {
       var date=new Date();
       date.setTime(date.getTime()+30*24*3066*1000);
       document.getElementsByTagName("link")[3].href="Ext/resources/css/"+name;
       document.cookie="css="+name+";expires="+date.toGMTString();//設(shè)置cookies
    }
  var cookiesArr=document.cookie.split(";");
  var css;
  for(var i=0;i<cookiesArr.length;i++)
  {
       var arr=cookiesArr[i].split("=");
       if(arr[0]=="css")
       {
          css=arr[1];
          break;
       }
  }
  document.getElementsByTagName("link")[3].href="Ext/resources/css/"+css;
  
   var skinID = "0";
            function setSkin(i)
            {
                var pattern = /[0-4]/;
                if(pattern.test(i))
                {
                    
                    for(j=0;j<5;j++)
                    {
                        var imgkin = document.getElementById("imgkin"+j);
                        imgkin.src = "images/skin/c"+j+"_0.gif"; 
                    }
                    var imgkin = document.getElementById("imgkin"+i);
                    imgkin.src = "images/skin/c"+i+"_1.gif";
                     if(i==0)
                    {
                        changecss('');
                    }
                     if(i==1)
                    {
                       changecss('xtheme-olive.css');
                       
                    }
                     if(i==2)
                    {
                       changecss('xtheme-gray.css');
                    }
                    if(i==3)
                    {
                        changecss('xtheme-purple.css');
                    }
                    if(i==4)
                    {      
                        changecss('xtheme-darkgray.css');
                    } 
                     
                    
                }
            }

通過選擇，指定不同的css。

效果：

小結(jié)：ExtJS開發(fā)實(shí)踐中的基本應(yīng)用就介紹到這，通過強(qiáng)大的ExtJS類庫，可以很容易的實(shí)現(xiàn)炫酷的UI效果，對(duì)我們的開發(fā)帶來很大的幫助，但是，好事的同時(shí)也有一些弱勢，腳本的調(diào)試就是很頭疼的問題，一個(gè)小小的"，"就可能叫你檢查半天。相信合理的使用ExtJS，會(huì)給你的開發(fā)帶來很不錯(cuò)的效果。