extjs4學習之配置

時間 2021-08-13

標籤 javascript css html java app 學習測試 this debug 調試欄目 JavaScript 简体版

原文原文鏈接

最近在學習extjs4發現一篇文章中有錯誤，網上不少人都是直接複製粘貼那篇文章，結果每一個人註釋中都是寫的正確的答案，我也是醉了，這些猿麼複製粘貼代碼都不帶檢查的麼，爲啥都變得很浮躁了呢。javascript

現提供能夠調試的代碼：css

html文件很簡單，就引入ext資源和自定義的js文件就能夠了。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試配置</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
    <script type="text/javascript" src="../../ext-all-debug-w-comments.js"></script>
    <script type="text/javascript" src="class2.js"></script>
</head>
<body>
 
</body>
</html>

js文件就是定義了2個類，一個window，一個bottomBar，其中window中包含bottomBar對象，具體代碼以下：java

/**
 * Created by catcher on 2016-3-30.
 */
Ext.define('My.own.Window',{
    /** @readonly */
    isWindow:true,
    config:{
        title:'This title',
        bottomBar:{
            enable:false,
            height:10,
            resizable:false
        }
    },
    constructor:function(config){
        this.initConfig(config);
        return this;
    },
    applyTitle:function(title){
        if(!Ext.isString(title)||title.length==0){
            alert("Error: Title must be a valid non-empty string!");
        }else{
            return title;
        }
    },
    applyBottomBar:function(bottomBar){
        if(bottomBar && bottomBar.enable){
            if(!this.bottomBar){
                return Ext.create('My.own.WindowBottomBar',bottomBar);
            }else{
                this.bottomBar.setConfig(bottomBar);
            }
        }
    }
});
 
Ext.define('My.own.WindowBottomBar',{
    config:{
        enable:true,
        height:10,
        resizable:false
    },
    constructor:function(config){
        this.initConfig(config);
        return this;
    }
});
 
var myWindow = Ext.create('My.own.Window', {
    title: 'Hello World',
    bottomBar: {
        enable: true,
        height: 60,
        resizable: true
    }
});
 
console.log(myWindow.getTitle()); // "Hello World"
myWindow.setTitle('Something New');
console.log(myWindow.getTitle()); // "Something New"
myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string!"
console.log(myWindow.getBottomBar().getHeight());
myWindow.setBottomBar({enable:true,height:100}); // Bottom bar's height is changed to 100
console.log(myWindow.getBottomBar().getHeight());