Ext Designer生成代码的使用

最新推荐文章于 2019-01-08 03:00:45 发布

chenweishaoxing

最新推荐文章于 2019-01-08 03:00:45 发布

阅读量142

点赞数

分类专栏： EXTJS 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/chenweishaoxing/article/details/83953818

版权

EXTJS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

Ext Designer生成代码的使用

Ext Designer是一个生成Javascript代码的桌面程序。这些代码基于Ext JS库，描述了浏览器客户端界面。
它的作用相当于Visual Studio的资源编辑器。

新手一般都不知道Ext Designer生成的代码怎么用，下面给出一个具体的例子。

1. 添加对Ext JS库的引用。注意路径必须使用正确的相对路径。[紫色部分]
2. 添加一个Javascript块。把Ext Designer生成的代码粘贴过来。
3. 添加红色的代码。
4. 在body中添加占位符代码，注意div的id必须和renderTo的值一样。【绿色部分】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ExtJS</title>
    <link rel="stylesheet" type="text/css" href="../ext-3.2.0/resources/css/ext-all.css" />
    <script type="text/javascript" src="../ext-3.2.0/adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="../ext-3.2.0/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
MyTabsUi = Ext.extend(Ext.TabPanel, {
renderTo: "placeholder",
activeTab: 2,
width: 400,
height: 250,
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'Tab 1',
items: [
{
xtype: 'textarea',
fieldLabel: 'Label',
width: 399,
height: 222
}
]
},
{
xtype: 'panel',
title: 'Tab 2',
items: [
{
xtype: 'listview',
columnSort: false,
columns: [
{
xtype: 'lvcolumn',
header: '名称',
dataIndex: 'string',
width: 0.25
},
{
xtype: 'lvcolumn',
header: '文件类型',
dataIndex: 'string'
},
{
xtype: 'lvcolumn',
header: '大小',
dataIndex: 'string'
}
]
}
]
},
{
xtype: 'panel',
title: 'Tab 3',
items: [
{
xtype: 'treepanel',
title: 'My Tree',
root: {
text: 'Root Node'
},
loader: {

}
}
]
}
];
MyTabsUi.superclass.initComponent.call(this);
}
});
var ui = new MyTabsUi();
});
</script>
</head>
<body>
<div id=" placeholder ">
 </div>
</body>
</html>

chenweishaoxing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext Designer生成代码的使用

Ext Designer生成代码的使用 Ext Designer是一个生成Javascript代码的桌面程序。这些代码基于Ext JS库，描述了浏览器客户端界面。它的作用相当于Visual Studio的资源编...
复制链接

扫一扫