今天,解决了一个困扰了一个多月的问题。就是在VS2010中,无法显示Ext效果。之前,把Ext的代码写在asp.net的代码中,但是都无法显示出来。网上也查询了很多资料,试过修改web.config,也试过添加引用,但是都无济于事。
例如下面的代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Vote_List.aspx.cs" Inherits="EasyCreate.VMS.WebUI.Ext.Ext_Vote" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext中Grid实例</title>
<link href="../Scripts/Ext3.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/Ext3.0/ext-all.js" type="text/javascript"></script>
<script src="../Scripts/Ext3.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var cm = new Ext.grid.ColumnModel([
{ header: '编号', dataIndex: 'id' },
{ header: '名称', dataIndex: 'name' },
{ header: '描述', dataIndex: 'descn' }
]);
var data = [
['1', 'name1', 'descn1'],
['2', 'name2', 'descn2'],
['3', 'name3', 'descn3'],
['4', 'name4', 'descn4'],
['5', 'name5', 'descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: 'id' },
{ name: 'name' },
{ name: 'descn' }
])
});
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm
});
});
</script>
</head>
<body>
<div id="grid">
</div>
</body>
</html>
理论上可以显示出来的是一张简单的Grid的数据列表。但是运行后却都是显示空白页。尝试了无数次之后发现,问题应该是引用的js文件的路径问题。
后来尝试了下,把引用的js文件的位置换了下,把ext-base.js放在ext-all.js文件前面。如下图:
结果居然就行了,你说神奇不神奇啊。显示出来的效果就是:
通过这次的实例,我明白了一个道理:引用的路径不对,或者是引用的顺序不对,都可能引起问题。