通往RIA的第一步, JavaScript对象基础
读 YUI ,EXT等源码的时候看JS天旋地转,那可不是51JS上那种挪挪位置就能理解的,此刻如果没有JavaScrip的基础,更是像没有星光的黑夜.......
自以为觉得Js对象是很好理解的东东,然而真实践起来却一片糊涂。
通过查阅经典书籍《Professional JavaScript For Web Developers》稍微有些理解了
JavaScript的基本类型
原始类型如: Undefined Null Boolean Number String 等 用 typeof方法能辨别之
引用类型如: Object Function Array Boolean Number String Date等,用insanceof方法辨别之
严格来讲,JavaScript没有对象(Object),但是由于和OO术语对应,所以也称之为对象。所以Array,Function,基本类型,引用类型,函数,以及函数的属性 等等这些都是对象。
而对象分类,则可以分为内置对象(Built-in Object) 和宿主对象(host object)。
内置对象如 Math,Data啊。
宿主对象则如 BOM,DOM之类.
重新回顾了下这些基本概念之后,在做简单实践就有些理解了。
因此对象的使用,创建方式不尽相同,最简单的归类如下:
1 基本创建方式
[code]
function Class() {
window.alert("Hello Class!");
}
var clz= new Class();
[/code]
2 访问对象成员
[code]
function Class(){
this.x = " this is x";
this.y = "this is y";
this.z = viewXY;
function viewXY(){
alert("x+","+y);
}
}
var clz= new Class();
clz.viewXY();
[/code]
3 对象继承
[code]
function Parent() {
this.type= "human!";
}
function Child(){
this.age = "26";
this.sex ="male";
this.say= myInfo;
function myInfo(msg){
alert(msg+this.type+ ","+this.age+","+this.sex);
}
}
Child.prototype = new Parent();
var clild = new Child();
clild.say("I'm ");
[/code]
4.重用原对象 (书上的例子太好了,搬来了)
[code]
Funcion.prototype.toString() = function(){
return "Function code hidden";
}
function sayHi(){
alert("hi");
}
alert(sayHi.toString());
[/code]
Ext 解说(二)
关于YUI-EXT 变为 EXT的话题让人纷说已久,而又过了短短几日,EXT 又紧锣密鼓的发行了Alpha 3。<从YUI-EXT0.40 到 EXT1.0Alpha2,Jack向YUI挑战 ,EXT lib支持JQuery,可以完全可以独立于YUI了。不过这次,Jack似乎又一次开始新一轮的自我挑战。1.0Alpha3版本开始增加了Prototype 和ScriptAculous,真是让人迫不及待。
好,还是先看看 的例子。 这次不用帖代码了,官方出的指南已经很详细了。
教程:http://www.extjs.com/en/tutorial/introduction-ext
毕竟是个入门性的,要玩些花样还得看API (可惜JACK的API-DOC还没来得及更新到最新) 。
教程中:Grid实现
{
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.Grid('grid-example', {ds: ds, cm: colModel});
grid.render();
grid.getSelectionModel().selectFirstRow();
});
Grid变化很大,从这里可以看出它和0.33,0.40的差别了。整个数据的是通过DataStore对象来完成的,数据读取通过XXXReader完
成,(这里是ArrayReader,还有JsonReader,XHReader等)变单元格格式设置ColumnModel完成(任何数据源都一
样),较原来稍有清晰(不然Jack也不会花那么大力气去改了,但真正的出发点是否还有其他??)
那这里也可以很方便的通过通过reader来实现。其他什么超连接啊,input啊都可以那么做。
增加一个function
function renderCheckBox(id){
return String.format(' type="checkbox" id={0} );
// 然后,增加红色部分。这样就会下在 Company每列前面多了个CheckBox
colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 120, sortable: true, dataIndex: 'company',renderer: renderCheckBox},
{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'} ]);
另外我们还可能会用到分页(在官方的Example里面 可以看到例子)。在1.0中,Jack是努力简化了Grid的操作,这里对分页处理也比以前简单了。
var gridFoot = grid.getView().getFooterPanel(true);
var pagbar = new Ext.PagingToolbar(gridFoot, ds, {pageSize: 20});
pagbar.add('-', {pressed: true, enableToggle:true, text: 'Detailed
View',cls: 'x-btn-text-icon details', toggleHandler: toggleCheckBox
});
ds.load({params:{start:0, limit:20}});
可以在官方的例子中看到更详细的。
http://www.yui-ext.com/deploy/ext-1.0-alpha3/examples
如果再玩复杂一点就是一些自定的操作, grid.on的事件操作啊,通篇一律的JS回调操作。
数据更新采用 Ext.data.Connection(); 表单采用 = Ext.form; /
这样几本能完成一个企业级的Grid应用了,分页编辑,提交。 稍微酷一些可结合 GridEditor
Ext 的代码质量也非常不错,可惜大的方面玩玩能揣度个八九不离十,但真要西子到每个API如何使用,为什么这么写,光凭自己现在的JS水平,后面还有很长一段路....先扯到这继续关注。