刚开始接触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>
<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>
</body>
</html>
这样做后,可以显示,但是控件上的图片全都显示不出来。。又悲剧了。继续研究。。。
联系客服