关于VS2010中无法显示ExtJs

  今天,解决了一个困扰了一个多月的问题。就是在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文件前面。如下图:

结果居然就行了,你说神奇不神奇啊。显示出来的效果就是:

通过这次的实例,我明白了一个道理:引用的路径不对,或者是引用的顺序不对,都可能引起问题。


你可能感兴趣的:(关于VS2010中无法显示ExtJs)