EXTJS3.2.1 入门示例-竟然报错

今天闲得蛋疼,从网上当下来 EXTJS3.2.1 ,准备研究下.

照着
[url]http://www.sencha.com/learn/Tutorial:Introduction_to_Ext_%28Chinese%29#.E4.B8.8B.E8.BD.BDExt[/url]
搞了一小会儿,竟然IE8报错,又下了个IETester,竟然与版本没什么关系.
无奈之下,只好凭自己残存的EXTJS记忆去研究了下
/ext-3.2.1/tutorial/ExtStart.html
结果竟然被我碰巧试出了一个无奈的解决方案,到现在还不是太明白.

<title>Introduction to Ext: Starter Page</title>

    <!-- Include YUI utilities and Ext: -->
    <!--
    <script type="text/javascript" src="../adapter/yui/yui-utilities.js"></script>
    <script type="text/javascript" src="../adapter/yui/ext-yui-adapter.js"></script>
    -->
    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all.js"></script>
    <script type="text/javascript" src="ExtStart.js"></script>

把上面两个报错的JS注释提,再引入 ext-base.js,结果竟然成功...


[img]http://dl.iteye.com/upload/attachment/316550/dff672ba-255d-3140-a01c-7df96bf84df8.bmp[/img]

到现在还没弄明白...先写到这...再慢慢研究去.

---
后来发适配这个名字.想了想,是只支持EXT来适配?


---后面还有个GRID的例子,搞了半天不显示出来,还来调试了半天,数据都有啊...真TM奇怪了...到底是没搞过网页...网上搜索半天没答案,只好自己解决了...
我神奇地发现
/ext-3.2.1/tutorial/ExtStart.html
最后一行竟然让这个显示层隐藏...只好删除掉...

<div id="grid-example"; style="width: 535px; height: 125px;border:2px solid #999;margin:20px 50px;visibility:hidden;"></div>

ExtStart.js

Ext.onReady(function() {

	var myData = [
		['Apple',29.89,0.24,0.81,'9/1 12:00am'],
		['Ext',83.81,0.28,0.34,'9/12 12:00am'],
		['Google',71.72,0.02,0.03,'10/1 12:00am'],
		['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
		['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
	];

	var ds = new Ext.data.Store({
		proxy: new Ext.data.MemoryProxy(myData),
		reader: new Ext.data.ArrayReader({id: 0}, [
			{name: 'company'},
			{name: 'price', type: 'float'},
			{name: 'change', type: 'float'},
			{name: 'pctChange', type: 'float'},
			{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
	])
	});

	ds.load();

	var colModel = new Ext.grid.ColumnModel([
		{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
		{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
		{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
		{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
		{header: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
	]);

	var grid = new Ext.grid.GridPanel({el: 'grid-example', ds: ds, cm: colModel});
		  grid.render();
		  grid.autoWidth = true;

});

最后可想而知.

还有个AJAX的例子,用PHP老没数据返回.
换成这样就可以了.

<?php if(isset($_POST['name'])) {
    echo 'From Server: '.$_POST['name'];
}
?>

------
看完入门示例,勉强过关,总结学JS的要点.
1. 太TM灵活, 要有丰富的想象力
2. 标点符号&quot其实是双引号.
3. 编码最好保持与官方一致, 不然看代码很累.
4. 调试是基础中的基础

------
计划写些EXT源码分析的文章, 太晚了, 要睡觉.明天还要上班....杯具!