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: "没有相关主题"
})

posted @ 2010-01-08 14:15  小09牛  阅读(326)  评论(0编辑  收藏  举报