EXT入门

基础的JS说明：

/**
Ext.get();		根据id得到该对象
Ext.select();	根据标签得到该对象
Ext.onReady();	页面加载会自动执行该方法
*/
Ext.onReady(function() {
	/**
	var myDiv = Ext.get('myDiv');
	Ext.select('p').highlight();
	myDiv.highlight();      // The element's background will highlight to yellow then fade back
	myDiv.addClass('red');  // Add a custom CSS class (defined in ExtStart.css)
	myDiv.center();         // Center the element in the viewport
	myDiv.setOpacity(.25);  // Make the element partially-transparent
	*/
	
	//Ext.get().on(事件名，执行的函数);
	Ext.get('myButton').on('click', function(){
        alert("You clicked the button");
	});
	/**
	Ext.select('p').on('click', function() {
		alert("You clicked a paragraph");
	});*/
	/**
	//paragraphClicked函数方法名
	var paragraphClicked = function() {
		alert("You clicked a paragraph");
	}
	Ext.select('p').on('click', paragraphClicked);*/
	var paragraphClicked = function(e) {
		var paragraph = Ext.get(e.target);	//e.target得到事件源对象
		paragraph.highlight();
 
		Ext.MessageBox.show({
			title: 'Paragraph Clicked',
			msg: paragraph.dom.innerHTML,
			width:400,
			buttons: Ext.MessageBox.OK,
			animEl: paragraph
		});
	}
	Ext.select('p').on('click', paragraphClicked);
	// Note: For the purposes of following along with the tutorial, all 
	// new code should be placed inside this method.  Delete the following
	// line after you have verified that Ext is installed correctly.
	
	//alert("Congratulations!  You have Ext configured correctly!");
	
});

GridPanel使用说明：

Ext.onReady(function() {
	var myData = [		//数据源。和myReader格式对应
		['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 myReader = new Ext.data.ArrayReader({}, [		//读取数据源。和myData一一对应
		{name: 'company'},
		{name: 'price', type: 'float'},
		{name: 'change', type: 'float'},
		{name: 'pctChange', type: 'float'},
		{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
	]);
 
	var grid = new Ext.grid.GridPanel({
		store: new Ext.data.Store({		//数据装配
			data: myData,
			reader: myReader
		}),
		columns: [		//header:显示的标题；width:该列的宽度；sortable:可否排序；dataIndex:数据索引（从data中取）
			{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'}
		],
		viewConfig: {
			forceFit: true		//强制适合GridPanel（GridPanel的大小不会改变）。true:没有滚动条；fasle:有滚动条
		},
		renderTo: 'content',	//显示位置（div中的id=“content”）
		title: 'My First Grid',	//标题
		width: 500,		//GridPanel的宽度
		frame: true		//GridPanel的边框
	});
 
	grid.getSelectionModel().selectFirstRow();		//GridPanel默认选中第一行
});

评论

1 楼 caocao12 2008-01-12  

非常不错啊,希望能多看到这样的例子.