您的位置：首页 > Web前端 > JavaScript

extjs4学习之配置

2016-04-03 10:47 507 查看

extjs4学习之配置

　　最近在学习extjs4发现一篇文章中有错误，网上很多人都是直接复制粘贴那篇文章，结果每个人注释中都是写的正确的答案，我也是醉了，这些猿么复制粘贴代码都不带检查的么，为啥都变得很浮躁了呢。

现提供可以调试的代码：

html文件很简单，就引入ext资源和自定义的js文件就可以了。

<!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对象，具体代码如下：

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

posted @ 2016-04-03 10:47 catcher92 阅读(...) 评论(...) 编辑收藏

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航