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>
