打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Ext?Designer生成代码的使用

刚开始接触EXT Designer,托了几个控件,生成了代码。问题来了,怎么放入.NET中使用呢?在页面中引入几个JS,和一个CSS。搞定。可以用了果然。结果呢。代码黏贴进去,页面中不显示出来。纠结了很久,终于在网上找到一个帖子,非常好。按照这种方法问题是解决了。是可以显示了。方法如下:

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>

这样做后,可以显示,但是控件上的图片全都显示不出来。。又悲剧了。继续研究。。。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
ext_EasyGrid
Ext 鼠标悬停grid的一行显示该行信息
grid一系列操作比如分组。。4.0
Ext.grid.EditorGridPanel的使用、修改记录的获取及提交方法
利用Ext组件完成Form和Grid之间的数据传输
ExtJS3 - 如何实现多表头Grid
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服