EXT学习笔记mq上.docx

斑马线

vargrid=newExt.grid.GridPanel（{

autoHeight:

true,

renderTo:

'grid',

stripeRows:

true,

store:

store,

cm:

cm

}）;

读取数据时的遮罩和提示功能

vargrid=newExt.grid.GridPanel（{

autoHeight:

true,

renderTo:

'grid',

width:

350,

height:

150,

loadMask:

true,

store:

store,

cm:

cm

}）;

自主决定每列宽度

varcm=newExt.grid.ColumnModel（[

{header:

'编号',dataIndex:

'id',width:

35},

{header:

'名称',dataIndex:

'name',width:

80},

{header:

'描述',dataIndex:

'descn',width:

120}

]）;

让每列自动填满grid

vargrid=newExt.grid.GridPanel（{

autoHeight:

true,

renderTo:

'grid',

store:

store,

cm:

cm,

viewConfig:

{

forceFit:

true

}

}）;

让指定列的宽度自动延伸

varcm=newExt.grid.ColumnModel（[

{header:

'编号',dataIndex:

'id',width:

35},

{header:

'名称',dataIndex:

'name',width:

50},

{id:

'descn',header:

'描述',dataIndex:

'descn',width:

200}

]）;

 

vargrid=newExt.grid.GridPanel（{

autoHeight:

true,

renderTo:

'grid',

store:

store,

cm:

cm,

autoExpandColumn:

'descn'

}）;

Grid按列排序

varcm=newExt.grid.ColumnModel（[

{header:

'编号',dataIndex:

'id',sortable:

true},

{header:

'名称',dataIndex:

'name'},

{header:

'描述',dataIndex:

'descn'}

]）;

解决中文排序

Ext.data.Store.prototype.applySort=function（）{//重写applyAssort函数

if（this.sortInfo&&!

this.remoteSort）{

vars=this.sortInfo,f=s.field;

varst=this.fields.get（f）.sortType;

varfn=function（r1,r2）{

varv1=st（r1.data[f]）,v2=st（r2.data[f]）;

if（typeof（v1）=="string"）{

returnv1.localeCompare（v2）;

}

returnv1>v2?

1:

（v1

-1:

0）;

};

this.data.sort（s.direction,fn）;

if（this.snapshot&&this.snapshot!

=this.data）{

this.snapshot.sort（s.direction,fn）;

}

}

};

（可以把以上这段代码加到ext-all.js文件后面，或者HTML页面的最上面）

sortInfo:

{field:

"name",direction:

"ASC"}

显示日期类型数据P46

varcm=newExt.grid.ColumnModel（[

{header:

'编号',dataIndex:

'id'},

{header:

'名称',dataIndex:

'name'},

{header:

'描述',dataIndex:

'descn'},

{header:

'日期',dataIndex:

'date',renderer:

Ext.util.Format.dateRenderer（'Y-m-d'）,}

]）;

vardata=[

['1','name1','descn1','1970-01-15T02:

58:

04'],

['2','name2','descn2','1970-01-15T02:

58:

04'],

['3','name3','descn3','1970-01-15T02:

58:

04'],

['4','name4','descn4','1970-01-15T02:

58:

04'],

['5','name5','descn5','1970-01-15T02:

58:

04']

];

varstore=newExt.data.Store（{

proxy:

newExt.data.MemoryProxy（data）,

reader:

newExt.data.ArrayReader（{},[

{name:

'id'},

{name:

'name'},

{name:

'descn'},

{name:

'date',type:

'date',dateFormat:

'Y-m-dTH:

i:

s'}

]）

}）;

单元格里显示字、图片和按钮

标签被用来组合文档中的行内元素。

functionrenderSex（value）{

if（value=='male'）{

return"

red;font-weight:

bold;'>红男";

}else{

return"

green;font-weight:

bold;'>绿女";

}

}

functionrenderDescn（value,cellmeta,record,rowIndex,columnIndex,store）{

varstr="

"这个单元格的值是：

"+value+"\\n"+

"这个单元格的配置是：

{cellId:

"+cellmeta.cellId+",id:

"+cellmeta.id+",css:

"+cellmeta.css+"}\\n"+

"这个单元格对应行的record是：

"+record+"，一行的数据都在里边\\n"+

"这是第"+rowIndex+"行\\n"+

"这是第"+columnIndex+"列\\n"+

"这个表格对应的Ext.data.Store在这里：

"+store+"，随便用吧。

"+

"\"）'>";

returnstr;

}

varcm=newExt.grid.ColumnModel（[

{header:

'编号',dataIndex:

'id'},

{header:

'性别',dataIndex:

'sex',renderer:

renderSex},

{header:

'名称',dataIndex:

'name'},

{header:

'描述',dataIndex:

'descn',renderer:

renderDescn}

]）;

给grid的行和列设置颜色

varPersonRecord=Ext.data.Record.create（[

{name:

'name',type:

'string'},

{name:

'sex',type:

'int'},

{name:

'color',type:

'string'}

]）;

varstore=newExt.data.Store（{

proxy:

newExt.data.MemoryProxy（data）,

reader:

newExt.data.ArrayReader（{},PersonRecord）

}）;

vargrid=newExt.grid.GridPanel（{

store:

store,

columns:

[

{header:

'name',dataIndex:

'name'},

{header:

'sex',dataInex:

'sex'}

],

autoHeight:

true,

renderTo:

'grid',

viewConfig:

{

forceFit:

true,

enableRowBody:

true,

getRowClass:

function（record,rowIndex,p,ds）{

varcls='white-row';

switch（record.data.color）{

case'#FBF8BF':

cls='yellow-row'

break;

case'#99CC99':

cls='green-row'

break;

case'#F5C0C0':

cls='red-row'

break;

}

returncls;

}

}

}）;

自动显示行号和复选框

varcm=newExt.grid.ColumnModel（[

newExt.grid.RowNumberer（）,

{header:

'编号',dataIndex:

'id'},

{header:

'性别',dataIndex:

'sex'},

{header:

'名称',dataIndex:

'name'},

{header:

'描述',dataIndex:

'descn'}

]）;

如果删除某一行，便不连续了，所以要刷新Grid的视图，重新计算行号。

Ext.get（'remove'）.on（'click',function（）{

store.remove（store.getAt

（1））;

grid.view.refresh（）;

}）;

复选框

varsm=newExt.grid.CheckboxSelectionModel（）;

varcm=newExt.grid.ColumnModel（[

newExt.grid.RowNumberer（）,

sm,

{header:

'编号',dataIndex:

'id'},

{header:

'性别',dataIndex:

'sex'},

{header:

'名称',dataIndex:

'name'},

{header:

'描述',dataIndex:

'descn'}

]）;

vargrid=newExt.grid.GridPanel（{

autoHeight:

true,

renderTo:

'grid',

store:

store,

cm:

cm,

sm:

sm

}）;

选择模型

行选择模型：

RowSelectionModel

如果只希望选择一行

vargrid=newExt.grid.GridPanel（{

renderTo:

'grid',

autoHeight:

true,

store:

store,

cm:

cm,

sm:

newExt.grid.RowSelectionModel（{singleSelect:

true}）

}）;

单元格选择模型：

CellSelectionModel

Tree对象两种选择模型，

DefaultSelectionModel

MultiSelectionModel

表格视图Ext.grid.GridView

Ext.get（'scroll'）.on（'click',function（）{

grid.getView（）.scrollToTop（）;

}）;

Ext.get（'focus'）.on（'click',function（）{

grid.getView（）.focusCell（0,0）;

varcell=grid.getView（）.getCell（0,0）;

cell.style.backgroundColor='red';

}）;

grid.getView（）必须在创建Ext.grid.GridPanel之后调用，它只能获得Ext.grid.GridPanel中创建好的实例

创建GridView时设置初始参数用viewConfig参数

表格分页

如果配置了分页工具条，store.load（）必须在构造grid以后执行

vargrid=newExt.grid.GridPanel（{

renderTo:

'grid',

autoHeight:

true,

store:

store,

cm:

cm,

bbar:

newExt.PagingToolbar（{

pageSize:

10,

store:

store,

displayInfo:

true,

displayMsg:

'显示第{0}条到{1}条记录，一共{2}条',

emptyMsg:

"没有记录"

}）

}）;

store.load（）;

通过后台脚本获得分页数据

jsp文件，需要tomcat服务器运行。

Jsp文件如下：

<%

Stringstart=request.getParameter（"start"）;

Stringlimit=request.getParameter（"limit"）;

try{

intindex=Integer.parseInt（start）;

intpageSize=Integer.parseInt（limit）;

Stringjson="{totalProperty:

100,root:

[";

for（inti=index;i

json+="{id:

"+i+",name:

'name"+i+"',descn:

'descn"+i+"'}";

if（i!

=pageSize+index-1）{

json+=",";

}

}

json+="]}";

//response.getWriter（）.write（json）;

out.print（json）;

}catch（Exceptionex）{

}

%>

varstore=newExt.data.Store（{

proxy:

newExt.data.HttpProxy（{url:

'08_02_01.jsp'}）,

reader:

newExt.data.JsonReader（{

totalProperty:

'totalProperty',

root:

'root'

},[

{name:

'id'},

{name:

'name'},

{name:

'descn'}

]）

}）;

分页工具栏显示在grid的顶部

vargrid=newExt.grid.GridPanel（{

autoHeight:

true,

renderTo:

'grid',

store:

store,

cm:

cm,

tbar:

newExt.PagingToolbar（{

pageSize:

10,

store:

store,

displayInfo:

true,

displayMsg:

'显示第{0}条到{1}条记录，一共{2}条',

emptyMsg:

"没有记录"

}）

}）;

store.load（）;

让Ext支持前台排序

内存分页功能

varstore=newExt.data.Store（{

proxy:

newExt.data.PagingMemoryProxy（data）,

reader:

newExt.data.ArrayReader（{},[

{name:

'id'},

{name:

'name'},

{name:

'descn'}

]）

}）;

后台排序

varstore=newExt.data.Store（{

proxy:

newExt.data.HttpProxy（{url:

'09_01.jsp'}）,

reader:

newExt.data.JsonReader（{

totalProperty:

'totalProperty',

root:

'root'

},[

{name:

'id'},

{name:

'name'},

{name:

'descn'}

]）,

remoteSort:

true

}）;

EditorGrid

varcm=newExt.grid.ColumnModel（[

{header:

'编号',dataIndex:

'id',editor:

newExt.grid.GridEditor（newExt.form.TextField（{

allowBlank:

false

}））},

{header:

'名称',dataIndex:

'name',editor:

newExt.grid.GridEditor（newExt.form.TextField（{

allowBlank:

false

}））},

{header:

'描述',dataIndex:

'descn',editor:

newExt.grid.GridEditor（newExt.form.TextField（{

allowBlank:

false

}））}

]）;

clicksToEditor：

1//单击鼠标就可以编辑单元格

添加删除行

varRecord=Ext.data.Record.create（[

{name:

'id',type:

'string'},

{name:

'name',type:

'string'},

{name:

'descn',type:

'string'}

]）;

store.load（）;

vargrid=newExt.grid.EditorGridPanel（{

autoHeight:

true,

renderTo:

'grid',

store:

store,

cm:

cm,

tbar:

newExt.Toolbar（['-',{

text:

'添加一行',

handler:

function（）{

varp=newRecord（{

id:

'',

name:

'',

descn:

''

}）;

grid.stopEditing（）;

store.insert（0,p）;

grid.startEditing（0,0）;//激活第一行第一列的编辑状态

}

},'-',{

text:

'删除一行',

handler:

function（）{

Ext.Msg.confirm（'信息','确定要删除？

',function（bt

相关搜索

当前位置：首页 > 工程科技 > 能源化工