后都不会重复加蝲Q这L话就不会每次点击都向服务器下载jsQ?br />
q?U方法中Q我个h觉得W?U是比较好用Q它可以在callback里直接用刚加蝲的js?br />
//W?U动态加载js
function GetHttpRequest()
{
if ( window.XMLHttpRequest )
return new XMLHttpRequest() ;
else if ( window.ActiveXObject ) // IE
return new ActiveXObject("MsXml2.XmlHttp") ;
}
function loadJS(jsName) {
var oXmlHttp = GetHttpRequest() ;
oXmlHttp.onreadystatechange = function()
{
if ( oXmlHttp.readyState == 4 )
{
if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 )
{
txt = oXmlHttp.responseText;
var scriptTag = document.getElementById(id);
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript= document.createElement("script");
if (scriptTag)
oHead.removeChild(scriptTag );
oScript.id = "loadJS_id";
oScript.type = "text/javascript";
oScript.src= jsName+".js" ;
oHead.appendChild(oScript);
}
else
{
alert('操作p|:' + oXmlHttp.statusText + '(' + oXmlHttp.status + ')' ) ;
}
}
}
url = '' + jsName + '.js';
oXmlHttp.open('GET', url, true);
oXmlHttp.send(null);
}
//使用Q?/span>
if(true)
{
tbar.push({
text : '新增',
tooltip : '新增一条记?,
iconCls : _addIco,
handler : function()
{
var el = Ext.get("loadJS_id");
if(!el)
{
loadJS("addTest"); //addTest,js文g?/span>
}
add();
}
}, '-');
}
//W?U动态加载js
ScriptLoader = function() {
this.timeout = 30;
this.scripts = [];
this.disableCaching = false;
this.loadMask = null;
};
ScriptLoader.prototype = {
showMask: function() {
if (!this.loadMask) {
this.loadMask = new Ext.LoadMask(Ext.getBody());
this.loadMask.show();
}
},
hideMask: function() {
if (this.loadMask) {
this.loadMask.hide();
this.loadMask = null;
}
},
processSuccess: function(response) {
this.scripts[response.argument.url] = true;
window.execScript ? window.execScript(response.responseText) : window.eval(response.responseText);
if (response.argument.options.scripts.length == 0) {
this.hideMask();
}
if (typeof response.argument.callback == 'function') {
response.argument.callback.call(response.argument.scope);
}
},
processFailure: function(response) {
this.hideMask();
Ext.MessageBox.show({title: 'Application Error', msg: 'Script library could not be loaded.', closable: false, icon: Ext.MessageBox.ERROR, minWidth: 200});
setTimeout(function() { Ext.MessageBox.hide(); }, 3000);
},
load: function(url, callback) {
var cfg, callerScope;
if (typeof url == 'object') { // must be config object
cfg = url;
url = cfg.url;
callback = callback || cfg.callback;
callerScope = cfg.scope;
if (typeof cfg.timeout != 'undefined') {
this.timeout = cfg.timeout;
}
if (typeof cfg.disableCaching != 'undefined') {
this.disableCaching = cfg.disableCaching;
}
}
if (this.scripts[url]) {
if (typeof callback == 'function') {
callback.call(callerScope || window);
}
return null;
}
this.showMask();
Ext.Ajax.request({
url: url,
success: this.processSuccess,
failure: this.processFailure,
scope: this,
timeout: (this.timeout*1000),
disableCaching: this.disableCaching,
argument: {
'url': url,
'scope': callerScope || window,
'callback': callback,
'options': cfg
}
});
}
};
ScriptLoaderMgr = function() {
this.loader = new ScriptLoader();
this.load = function(o) {
if (!Ext.isArray(o.scripts)) {
o.scripts = [o.scripts];
}
o.url = o.scripts.shift();
if (o.scripts.length == 0) {
this.loader.load(o);
} else {
o.scope = this;
this.loader.load(o, function() {
this.load(o);
});
}
};
};
ScriptMgr = new ScriptLoaderMgr();
//使用Q?/span>
{
id : "d_m_sub3",
xtype : "tbbutton",
text : "完成d",
iconCls : "sub2",
handler : function(){
ScriptMgr.load({
scripts: ['/baoa/oaTask/oaTask_task7/oaTask_task7_browse.js','/baoa/oaTask/oaTask_task8/oaTask_task8_browse.js'],
callback: function() {
var n = Ext.getCmp("rightPanelId").getComponent("d_m_sub3");
if (!n)
{ // 判断是否已经打开该面?nbsp;
n = Ext.getCmp("rightPanelId").add
({
id:"d_m_sub3",
title:'完成d',
closable : true,
items :[ {autoScroll : true,border:false,layout:'form',items:[Lbo_oaTask_task7_browse(param).prop.grid,Lbo_oaTask_task8_browse(param).prop.grid]} ]
});
}
Ext.getCmp("rightPanelId").setActiveTab(n);
Ext.getCmp("rightPanelId").doLayout();
}
});
}
}
ScriptMgr.load
({
scripts: ['/baoa/oaTask/oaTask_task/oaTask_task_add.js'],
callback: function() {
showAddForm();
}
});
]]>
var panel3 = new Ext.form.FormPanel({
labelAlign : 'left',
labelWidth:60,
border : false,
bodyStyle : 'padding:4px;',
frame : false,
url : '../ajaxdata/uploadFile.jsp',
autoHeight : true,
fileUpload : true,
items : [{
id : 'file',
autoScroll : false,
xtype : 'textfield'
fieldLabel:'本地上传',
name : 'file',
hideLabel : true,
// inputType : 'file'//按照Ext默认的属性将inputType设ؓfileӞ始终响应不了onchange事gQ结果就以autoCreate的方式，如下Q因U方式相当于html里的input,所以也响应得了啦Q?nbsp;
autoCreate : {
tag : "input",
type : "file",
size : "20",
autocomplete : "off",
onChange : "browseImages(this.value);"
}
}]
,
buttons : [{
text : '上传',
handler : function() {
panel3.getForm().submit({
// waitTitle : "L?,
waitMsg : "正在上传
", success : function(form, action){},
failure : function(form, action) {
Global.alert('上传囄p|Q?);
}
})
}
}]
});
/*
* ~辑
* @date 2008 July 10
*/
l过实践Q还存在一U可以激发change事g的方法；
首先说一下获取form里面的field的三U方法：
1QExt.getCmp('id');
2QFormPanel.getForm().findField('id/name');
3QExt.get('id/name'); //前提是FormPanel在界面上昄出来?nbsp;
应用上面的第1和第2U方法得到的lg均触发不了change事gQ只有第三种Ҏ可以
触发Q前提是FormPanel要在界面上显C出来，所以需要触发show事gQ然后在show
事g里调用Ext.get('id/name')Q由于FormPanell常是放在Ext.Window里的,所
以新的问题又来了Q?nbsp;
1Q调用FormPanel.on('show',fn);//当Window昄出来的时候，事g没有触发
2Q调用FormPanel.getForm().on('show',fn);//情况同上
3Q调用FormPanel.ownerCt.on('show',fn);//OK 一切搞?nbsp;
其中scope也是需要注意的一！
如果再不行的话，可以先调?
FormPanel.ownerCt.on('render',function(){
FormPanel.ownerCt.on('show',fn,this);
},this);
]]>
doLoad:function(C){
var B={},
A=this.paramNames;
B[A.start]=C;
B[A.limit]=this.pageSize;
B['name']=Ext.getCmp("queryNam").getValue();
B['isUse']=Ext.getCmp("queryIsUse").getValue();
B['cpcod']=Ext.getCmp("queryfndcc").getValue();
if(this.fireEvent("beforechange",this,B)!==false){
this.store.load({params:B})
}
}
]]>
var row = grid.store.getById(grid.store.data.items[rowIndex].id);
alert(row.get("unitcode"));
}
grid.addListener('rowdblclick', rowdblclickFn);
Ext2.0是一个javascript框架Q它的Grid控g和其它可以显C数据的控gQ能够支持多U数据类型，如二l数l、Json数据和XML数据Q甚臛_括我们自定义的数据类型。Ext为我们提供了一个桥梁Ext.data.StoreQ通过它我们可以把M格式的数据{化成grid可以使用的Ş式，q样׃需要ؓ每种数据格式写一个grid的实C?/p>
首先Q一个表格应该有列定义，卛_义表头ColumnModelQ?br />
// 定义一个ColumnModelQ表头中有四?br />
var cm = new Ext.grid.ColumnModel([
{header:'~号',dataIndex:'id'},
{header:'性别',dataIndex:'sex'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即ؓ每个列都安上一个可以排序的功能。如果只x些列举有该功能，可以讄Q?br />
{header:'~号',dataIndex:'id',Sortable:true},
现在来看看q个Ext.data.Store是如何{换三U数据的?/p>
1.二维数组Q?br />
// ArrayData
var data = [
['1','male','name1','descn1'],
['2','male','name1','descn2'],
['3','male','name3','descn3'],
['4','male','name4','descn4'],
['5','male','name5','descn5']
];
// ArrayReader
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id',mapping: 0},
{name: 'sex',mapping: 1},
{name: 'name',mapping: 2},
{name: 'descn',mapping: 3}
])
});
ds.load();
ds要对应两个部分：proxy和reader。proxy告诉我们从哪里获得数据，reader告诉我们如何解析q个数据?br />
现在用的是Ext.data.MemoryProxyQ它内存中的数据data作ؓ参数传递。Ext.data.ArrayReader专门用来解析数组Qƈ且告诉我们它会按照定义的规范q行解析Q每行按序d四个数据Q第一个叫idQ第二个叫sexQ第三个叫nameQ第四个descn。这些是?cm定义中的dataIndex对应的。这样cmq道哪列应该显C那条数据了?br />
mapping属性用于标记data中的d后的数据与标头的映射关系Q一般是不用讄的。但如果我们惌sex的数据中name栏中出现Q可以设|mapping倹{即id的mapping?,后者ؓ0?br />
记得要执行一ơds.load()Q对数据q行初始化?/p>
数据的显C显得非常简单：
HTML文gQ?br />
<div id='grid'></div>
JS文gQ?br />
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm
});
grid.render();
其显C结果ؓQ?/p>
2.如何在表gdCheckBox呢？
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//自动行号
sm,//d的地?br />
{header:'~号',dataIndex:'id'},
{header:'性别',dataIndex:'sex'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,//d的地?br />
title: 'HelloWorld'
});
3. 如何做Grid上触发事件呢Q?br />
下面是一个cellclick事g
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('show','当前选中的数据是'+data);
}
4.如何做Grid中做出快捯单效果：
grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分
var rightClick = new Ext.menu.Menu({
id:'rightClickCont', //在HTML文g中必L个rightClickCont的DIV元素
items: [
{
id: 'rMenu1',
handler: rMenu1Fn,//点击后触发的事g
text: '右键菜单1'
},
{
//id: 'rMenu2',
//handler: rMenu2Fn,
text: '右键菜单2'
}
]
});
function rightClickFn(grid,rowindex,e){
e.preventDefault();
rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
Ext.MessageBox.alert('right','rightClick');
}
其Grid如下Q?/p>
5.如何一列中的数据根据要求进行改变呢Q?br />
比如说性别字段Ҏ其male或female改变昄的颜Ԍq种ColumnMode中设计：
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'~号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',renderer:changeSex},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
function changeSex(value){
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>U男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>l女</span>";
}
}
其它两种数据的Grid昄是相同的Q其不同之处在于数据获取的过E：
6.Json数据
至于q种数据的类型请大家自己看Ajax的书c：
//JsonData
var data = {
'coders': [
{ 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': 'brett@newInstance.com' },
{ 'id': '2', 'sex': 'male','name':'Hunter', 'descn': 'jason@servlets.com' },
{ 'id': '3', 'sex': 'female','name':'Harold', 'descn': 'elharo@macfaq.com' },
{ 'id': '4', 'sex': 'male','name':'Harolds', 'descn': 'elhaross@macfaq.com' }
],
'musicians': [
{ 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
{ 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
]
}
//ds使用的MemoryProxy对象和JsonReader对象
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.JsonReader({root: 'coders'}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
ds.load();
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'HelloWorld',
autoHeight: true//一定要写，否则昄的数据会一?br />
});
grid.render();
7.使用XML数据Q?br />
注意Q读取XML数据必须在服务器上进行?br />
XML数据test.xml的内容：
<?xml version="1.0" encoding="UTF-8"?>
<dataset>
<results>2</results>
<item>
<id>1</id>
<sex>male</sex>
<name>Taylor</name>
<descn>Coder</descn>
</item>
</dataset>var ds3 = new Ext.data.Store({
url: 'test.xml', //XML数据
reader: new Ext.data.XmlReader({record: 'item'}, [ //使用XmlReader对象
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
8.从服务器获取数据和数据翻|?br />
从一个服务器文gQ如ASP、JSP或Servlet中获得数据二lArray、JSON或XML数据Q也可以被ExtdQƈ被Grid昄Q?br />
服务器文件data.asp:
<%
start = cint(request("start"))
limit = cint(request("limit"))
dim json
json=cstr("{totalProperty:100,root:[")
for i = start to limit + start-1
json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}")
if i <> limit + start - 1 then
json =json + ","
end if
next
json = json +"]}"
response.write(json)
%>
我们可以看到Q这个页面会Ҏ传入的start和limit的不同，q回不同的数据，其实质是个分늚代码。下面是start=0,limit=10的JSON数据Q?br /> {totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},{'id':'9','name':'name9','descn':'descn9'}]}
我们使用分页控g来控制Grid的数据：
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'~号',dataIndex:'id'},
{header:'性别',dataIndex:'sex'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'data.asp'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
ds.load({params:{start:0,limit:10}});
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'ASP->JSON',
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '昄W?{0} 条到 {1} 条记录，一?{2} ?,
emptyMsg: "没有记录"
}),
tbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '昄W?{0} 条到 {1} 条记录，一?{2} ?,
emptyMsg: "没有记录"
})
});
grid.render();
})
10.如何在Grid的上Ҏ加按钮呢Q?br />
d按钮的关键之处在于tbar或bbar属性设|Toolbar工具条：
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,
title: 'HelloWorld',
tbar: new Ext.Toolbar({
items:[
{
id:'buttonA'
,text:"Button A"
,handler: function(){ alert("You clicked Button A"); }
}
,
new Ext.Toolbar.SplitButton({})
,{
id:'buttonB'
,text:"Button B"
,handler: function(){ alert("You clicked Button B"); }
}
,
'-'
,{
id:'buttonc'
,text:"Button c"
}
]
})
});
11.GridPanel攑օ一个Panel或TabPanel?br />
var tabs = new Ext.TabPanel({
collapsible: true
,renderTo: 'product-exceptions'
,width: 450
,height:400
,activeTab: 0
,items:[
{
title: 'Unmatched'
},{
title: 'Matched'
}
]
});
tabs.doLayout();
var panel = new Ext.Panel({
renderTo: 'panel',
title:'panel',
collapsible:true,
width:450,
height:400,
items:[grid] //理grid
});
Panel必须有DIV存在。其包含的Component有items理?/p>
本文是在学习Ext2.0的基上写的，因此Q参考了许多|上存在的Blog文章。在此表C敬！
本文来自CSDN博客Q{载请标明出处Qhttp://blog.csdn.net/boy00fly/archive/2009/03/20/4008317.aspx
]]>
使用定义样式
.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
.ext-ie8 .x-menu-item-icon,
.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
解决
使用grid的遮|提C时Q一定要设表格的height和width?/p>
enableColumnMove和enableColumnResize为false表示用拖放列和改变列宽度功能?br />
默认情况下一ơ可以选一行或多行?/p>
stripeRows:true昄为斑马线?/p>
问题Q自d定每列的宽度
1.手动指定
cm(columnmudule)支持l每列设|宽?如果不指定则默认的宽度ؓ100px.
var cm=new Ext.grid.columnModel({
{header:'列头',dataIndex:'数据源烦',width:宽度},....});
2.自动填充
var gird=new Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
viewConfig:{forceFit:true}});
会按照设|的宽度之间的比例进行显C，而不是按照设|的宽度?/p>
3.指定自动填充剩余I间的列
也可以指定一列来完成该操作，但该操作要求该列必须定义时指定id倹{?br />
var cm=new Ext.grid.columnModel({
{header:'列头',dataIndex:'数据源烦',width:宽度,id:'id标识属?},....});
接下来设?br />
Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
autoExpandColumn:'id列标?});
问题Q让列支持排?br />
在徏立列模型时指定storable:true
问题Q中文排?br /> 1.为Ext.data.Store讄一个storeInfo:{field:'列名',direction:'ASC|DESC'}属性?/p>
2.重写Ext.data.Store的applySort函数
Ext.data.Store.prototype.applySort = function() {
if (this.sortInfo && !this.remoteSort) {
var s = this.sortInfo, f = s.field;
var st = this.fields.get(f).sortType;
var fn = function(r1, r2) {
var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
if (typeof(v1) == "string") {
return v1.localeCompare(v2);
}
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};
this.data.sort(s.direction, fn);
if(this.snapshot && this.snapshot != this.data) {
this.snapshot.sort(s.direction, fn);
}
}
};
该函数可以加在ext-all.js文g的未。或者放在html面的最上面Q保证在EXT初始化之后，实际代码调用之前执行?/p>
问题Q显C日期类型数据列
1.在store的reader属性中增加type和dataFormat两个属?br />
{name: 'date',type:'date',dateFormat:'Y-j-n H:i:s'}
注意格式化字W串必须要与实际日期的内容相对应?br />
如日期ؓ2009-5-2 12:30:58 则格式化字符串ؓ'Y-j-n H:i:s'
如日期ؓ2009-05-02 12:30:58 则格式化字符串ؓ'Y-m-d H:i:s'
详细字符串的含义见ext api doc之Datec?br />
以保证能够读取到正确的日期倹{?/p>
2.在ColumnModel中新加配|?br />
{header: '日期',dataIndex: 'date',type:'date',renderer:Ext.util.Format.dateRenderer('Yqj月n?)}
其中renderer的格式字W串表示昄的格式是什么?/p>
问题Q如何在单元格时昄U色的字或图片，按钮{?br />
在ColumnModule的相应列的属性中drenderer:渲染函数
?
var cm=new Ext.grid.ColumnModel([
{head:'列头',dataIndex:'数据源烦',renderer:渲染函数}]);
渲染函数Q?br />
function 函数?value){
if(value==|?br />
return html+css代码;
}
else
{
return 其它的html+css;
}
}
问题Q如何设|表格的表头右键提示为汉字内?/p>
Ext.grid.GridPanel可以看作控制器，Ext.data.Store可以看作模型QExt.grid.GridView可以看作视图.在构建Ext.grid.GridPanel实例时添加viewConfig属?br />
var gid=new Ext.grid.GridPanel(
{renderTo:'grid',
store:store,
cm:cm,
viewConfig:{
columnsText:'昄的列',
scrollOffset:30,
sortAscText:'升序',
sortDescText:'降序'
//forceFit:true
}
});
问题Q用grid实现分页昄
Q?为Gridd分页工具?br />
在GridPanel中进行设|?/p>
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight: true,
store: store,
cm: cm,
bbar: new Ext.PagingToolbar({
pageSize:3,
store: store,
displayInfo: true,
displayMsg: '昄W?{0} 条到 {1} 条记录，一?{2} ?,
emptyMsg: "没有记录"
})
});
store.load();
在用分工h之后Qstore.load()必须发生在构造GridPanel之后.而且数据源不能用Ext.data.SimpleStore.Grid每次都会昄数据源中所有的数据.因此数据一定要先在后台分好.
如果要在Grid的头部显C分工hQ可以将bbar改ؓtbar?/p>
Q?后台分页
后台jsp的做法：
①取得开始页号与大?/p>
String start = request.getParameter("start");
String limit = request.getParameter("limit");
②访问数据库取得数据
③将数据输出为json字符?/p>
格式为：{totalProperty:总记录数,root:[?....｝，?....｝，....]),其中root数组存放当前늚数据.
前台面的做法：
①修改Store
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:jsp的url'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
②向服务器传?/p>
store.load({params:{start:0,limit:10}});
Grid每次都会昄全部在root中的数据Q而不论totalProperty的值是多少Q所以分|root数组中的数据由后台jsp控制?/p>
3.前台分页
EXT中的Grid是把得到的数据一ơ性显C在表格里，q没有直接ؓ我们提供内存分页的功能，但是在Ext的examples/locale/PapingMemoryProxy.jsQ它可以从本地数据读取数据同Qƈ实现内存分页?br />
步骤如下Q?br />
①将PagingMemoryProxy.js导入html
②把以前的MemroryProxy换成PagingMemoryProxy
③调用store.load({params:{start:0,limit:3}});昄最开始的3条记录?/p>
4.后台排序
在默认的情况下，Grid只能对当前页的数据进行排序，如果Ҏ有的数据排序Q则需要将排序信息提交到后収ͼ由后台将信息l装到SQL里，然后再由后台处理好的数据返回给前台?br />
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'09_01.jsp'}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root'
}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
]),
remoteSort: true
});
其中remoteSort: true表示允许后台排序Q这样在排序时就会有变化Q不会立xC出排序的结果，而是向后台提交两个参敎ͼ分别是sort和dirQ表C排序的字D与升序或降序?/p>
jsp则进行相应的处理
String start = request.getParameter("start");
String limit = request.getParameter("limit");
String sort = request.getParameter("sort");
String dir = request.getParameter("dir");
再进行数据库分页Qƈq回json格式的分|据?/p>
本文来自CSDN博客Q{载请标明出处Qhttp://blog.csdn.net/hfy211/archive/2009/06/29/4306357.aspx
]]>
if (this.sortInfo && !this.remoteSort) {
var s = this.sortInfo, f = s.field;
var st = this.fields.get(f).sortType;
var fn = function(r1, r2) {
var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
// d:修复汉字排序异常的Bug
if (typeof(v1) == "string") { // 若ؓ字符Ԍ
// 则用 localeCompare 比较汉字字符? Firefox 与IE 均支?/span>
return v1.localeCompare(v2);
}
// dl束
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};
this.data.sort(s.direction, fn);
if (this.snapshot && this.snapshot != this.data) {
this.snapshot.sort(s.direction, fn);
}
}
};
]]>