<html>
<head>
<title>Introduction to Ext 2.0: Starter Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript" >
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel({
hanlerMouseDown: Ext.emptyFn,
singleSelect: true //只能单选
});
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header: '编号', dataIndex:'id', sortable: true},
{header: '名称', dataIndex:'name', sortable: true},
{header: '描述', dataIndex:'description', sortable: true}
]);
var data = [
['1', 'name1','desc1'],
['2', 'name2','desc2'],
['3', 'name3','desc3'],
['4', 'name4','desc4'],
['5', 'name5','desc5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
//proxy: new Ext.data.ScriptTagProxy({url: 'http://www.baidu.com/index.json'}),
reader: new Ext.data.ArrayReader({},[
{name: 'id'},
{name: 'name'},
{name: 'description'}
]) });
var grid = new Ext.grid.GridPanel({
renderTo: 'tabs',
store: store,
cm: cm,
sm: sm,
width: 300,
height: 200,
stripeRows: true,
loadMask: true,
viewConfig:{ forceFit: true}
});
grid.on('click', function(){
var selections = grid.getSelectionModel().getSelections();
for(var i = 0; i < selections.length; i++){
var record = selections[i];
Ext.Msg.alert('提示', record.get('id') + "," + record.get('name') + "," + record.get('description'));
}
});
store.load();
Ext.get('remove').on('click', function(){
store.remove(store.getAt(1));
grid.view.refresh();
});
});
</script>
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ExtStart.css">
<style>
#actions li {
margin:.3em;
}
#actions li a {
color:#666688;
text-decoration:none;
}
</style>
</head>
<body>
<div id="test">test</div>
<input type="text" id="text" />
<input type="button" value="删除第2行" id="remove" />
<div id="tabs"></div>
</body>
</html>
