EXTJS学习方案<一>
s扩充之后的脚本
有三个基本js库(从官网下api)ext-base.js,ext-all.js及一个css文件ext-all.css
常用到得有grid,form,store;
学习extjs之前首先要了解它所采用的数据格式——json
它主要格式是 name:namevalue,前者name表示属性名,后面namevalue表示属性值
一般用大括号为一个包含点
{name:chengrong,sex:nan}这个例子表明它有两个属性(注意}之前是不能以,结尾,否则报错)
同时它支持中括号的嵌套包含[{***},{***},{***}]
接下来就开始讲解extjs了
读者可参阅api实例程序集api文档来学,这样学的更快;
extjs重要的属性store:
store : 数据存储器-保存与管理数据的 (数据以record类型的数据进行存储。)
reader: 数据读取器-解析数据的
proxy: 数据代理-代理各种数据源(db2,oracle)
可以这样写:
new Ext.data.Store({
autoLoad:true,
proxy:new Ext.data.HttpProxy({ //解析远程地址的数据或服务器上的
http://www.cnblogs.com/dalas/admin/'****'
}),
【data:[{name:"zhangna",age:23,sex:"女"}]】//直接获取数据
reader:new Ext.data.JsonReader({
root:"result",
totalProperty:"totalCount",
fields:[{
name:'id',mapping:'id',type:'int'
}]
})
})
store数据得到了就需一个容器去装载它来显示,这里我们用grid
grid有三个重要的属性store,cm<columnmodel>,sm<selectmodel>
store我们已经定义好了
接下来就是cm,我们可以把它想成一个框架就行,它定义了显示哪些数据
new Ext.grid.ColumnModel({
defaults:{sortable:true},
columns:[{
header:'xuliehao',//前台显示名称
dataIndex:'id',//store对应的name叫id的属性
width:220
}]
})
sm就是一种grid的选择模式方案,通常如下:
new Ext.grid.CheckboxSelectionModel({name:'tt'})
这样我们就可以显示出数据出来,我们可以用form进一步完善其功能
form中的bbar,tbar对应为头工具栏和尾工具栏
在bbar中我们加一个分页栏
new Ext.PagingToolbar({
pageSize:15,//以15来分页
store:**,
diplayInfo:true,
displayMsg:'显示记录 {0} - {1} of {2}',
emptyMsg: "没有相关主题"
})