ExtJs简单表格
// grid示例
Ext.onReady(function(){
//示例1的store
/*var store = new Ext.data.Store({
autoLoad :true ,
data : [['姓名1',15], ['姓名2',20]],
reader : new Ext.data.ArrayReader({
},Ext.data.Record.create([{
name : "name"
}, {
name : "age" ,type:'int'
}]))
});*/
var store = new Ext.data.JsonStore({
autoLoad : true,
url : "js/grid.json" ,
fields : ['name','age']
}) ;
var grid = new Ext.grid.GridPanel({
colModel : new Ext.grid.ColumnModel([{
header : "姓名"
},{
header : "年龄"
}]) ,
title : '简单表格' ,
width : 300 ,
height : 200 ,
sm:new Ext.grid.RowSelectionModel({singleSelect : true}) ,
store : store ,
renderTo : Ext.getBody()
}) ;
var form = new Ext.form.FormPanel({
id : 'form' ,
defaultType : 'textfield' ,
renderTo : Ext.getBody(),
title : '简单表单' ,
width : 300,
height : 200 ,
items : [{
fieldLabel : '姓名' ,
labelWidth : 20 ,
name : 'name'
},{
fieldLabel : '年龄' ,
labelWidth : 20,
name : 'age'
}] ,
buttonAlign :'right' ,
buttons:[{
text: "确 定" ,
listeners: {
'click' : function(){
alert("这里待续。。。。。。") ;
}
}
}]
}) ;
})
//以上两个store都可以使用，由此可见要实现不同的数据访问方式只修改store就可以了
//JsonStore中的url对应的内容是如下
/*
[{
'name':'姓名1','age':18
},{
'name':'姓名2','age':25
}]
*/
//注意：必须加上Ext.onReady,否则会报x is null的错误
