EXT入门

基础的JS说明：
[code]/**
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!");

});[/code]

GridPanel使用说明：
[code]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默认选中第一行
});[/code]