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());