初试extjs
最近老师的项目需要对一些网页做页面改动，想想如果单纯只是改改页面，对自己的技术水平没什么促进作用。所以花了几天时间拿extjs练了下手，也算稍稍了解了extjs。之前在yui和extjs之间犹豫了一下，两个都没接触过，不过听说extjs的中文资料会比较多，所以嘛...
实现了一个学习活动管理页面，主要包括查询、分页浏览和创建功能。功能比较简单，没什么复杂逻辑，还没做完，慢慢完善吧，先把代码记录下来，不然以后又没兴趣写了。对extjs的一些功能和api不大了解，中间绕了很多弯路，代码写得有点杂乱。
/**
* 作者：garlic 日期：2010-07-29 版本：1.0 博客地址：http://wisesooner.iteye.com/
* 功能描述：学习活动管理页面，主要包括查询、分页浏览、创建 备注：extjs版本为3.2.1
*/
Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.init();
// 活动类别
var aTypeCode = [['all', '全部类别'], ['forum', '讨论交流'], ['work', '上传作品'],
['vote', '投票调查'], ['question', '提问答疑']];
var typeNames=new Ext.data.Record(
{all:'全部类别',
forum:'讨论交流',
work:'上传作品',
vote:'投票调查',
question:'提问答疑'}
);
var store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : "/lc/extjs/getData.jsp"
}),
autoLoad : {
params : {
start : 0,
limit : 9
}
},
baseParams : {
type : 'all'
},// 公共参数，pagingBar和grid可以共用
reader : new Ext.data.JsonReader({// 读取json数据
root : 'activities',
totalProperty : 'count'
}, Ext.data.Record.create(['aId', 'aTitle', 'aType', 'aDes',
'aTime', 'aViewUrl', 'aEditUrl', 'aDelUrl', 'uId',
'uName', 'auth']))
});
/* 以下是中间面板，包括顶部的查询和创建，底部的分页和中间的分页面板 */
// 底部工具条（分页工具条），注：把分页工具条加在分页面板中，看起来有点不好看，所以就把它放在中间面板中了
var pagingBar = new Ext.PagingToolbar({
pageSize : 9,
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg : '没有记录',
store : store
});
// 顶部工具条——创建活动按钮
var createBtn = new Ext.Button({
iconCls : 'create-btn',
text : '+ 创建活动',
handler:function(){aCreatePage.show();}
});
// 顶部工具条——查询——活动类别选择框
var combo = new Ext.form.ComboBox({
displayField :'text' ,
valueField:'type',
typeAhead : false,
mode : 'local',
triggerAction : 'all',
emptyText : '请选择类别',
selectOnFocus : false,
editable : false,
store : new Ext.data.SimpleStore({
fields : ['type','text'],
data : aTypeCode
}),
width : 100
});
// 顶部工具条——查询——搜索按钮
var searchBtn = new Ext.Button({
iconCls : 'search-btn',
handler:checkForm
});
searchBtn.setTooltip('查询');
// 顶部工具条——查询——文本输入框
var searchTxt = new Ext.form.TextField({
id : 'search-name',
width : 250,
selectOnFocus : true,
regex : /^.*\S+.*$/, // 不能为空
regexText : '活动名称不能为空'
});
// 顶部工具条——查询（包含活动类别选择框、搜索按钮、文本输入框）
var searchBar = new Ext.Toolbar({
id : 'search-bar',
autoHeight : true
});
searchBar.add('活动名称： ', searchTxt, ' ', combo, ' ', searchBtn, '->',
createBtn, ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ' // 试了几种方式，都没办法很好地为“创建活动”按钮设置右边距，只好用这个土方法，看起来很不爽，如果大家有什么好建议，可以推荐
);
// 中间分页面板——构造不带分页工具栏的grid
var grid = new Ext.grid.GridPanel({
store : store,
trackMouseOver : true,
disableSelection : true,
loadMask : true,
autoHeight : true,
columnLines : true,
border : false,
// grid的列
columns : [{
header : "类别",
dataIndex : 'aType',
align : 'center',
sortable : true,
width : 75
}, {
header : "标题",
dataIndex : 'aTitle',
sortable : true,
width : 150,
renderer : renderTitle
}, {
header : "简介",
dataIndex : 'aDes',
width : 500,
renderer : renderDes
}, {
header : "创建时间",
dataIndex : 'aTime',
sortable : true,
align : 'center',
width : 80
}, {
header : "创建者",
dataIndex : 'uName',
align : 'center',
sortable : true,
renderer : renderUserLink
}, {
header : "操作",
dataIndex : 'aId',
renderer : renderAction,
align : 'center',
width : 115
}],
viewConfig : {
forceFit : true
}
});
// 生成中间面板
var centerForm = new Ext.form.FormPanel({
id : 'centerForm',
region : 'center', // a center region is ALWAYS required for
// border layout
deferredRender : false,
activeTab : 0, // first tab initially active
margins : '0 5 0 0',
title : '活动列表 - 全部类别',
autoScroll : true,
bbar : pagingBar,
tbar : searchBar,
items : grid
});
// body视图
var viewport = new Ext.Viewport({
layout : 'border',
items : [new Ext.BoxComponent({
region : 'north',
id : 'page-title',
margins : '0 5 3 5',
autoEl : {
tag : 'div',
html : '<h1>学习活动管理页面</h1>'
}
}), {
region : 'west',
id : 'west-panel',
title : '按类别浏览',
collapsible : true,
margins : '0 0 0 5',
autoScroll : true,
width : 160,
margins : '0 5 3 5',
contentEl :'typeNav'
}, centerForm]
});
//创建活动的页面
var aCreatePage= new Ext.Window({
contentEl:'a_c_n',
modal:true,
draggable :false,
width:700,
height:400,
border :false,
resizable :false,
plain:true,
closeAction :'hide'
});
var aCreateForm = new Ext.form.FormPanel({
labelWidth: 55,
frame:true,
labelSeparator:':',
defaults: {
xtype: 'textfield'
},
items: [{
fieldLabel: '标题',
width:450,
emptyText : '请输入活动名称',
regex : /^.*\S+.*$/, // 不能为空
regexText : '活动名称不能为空'
}, {
xtype: 'textarea',
fieldLabel: '简介',
width:450,
height:200,
emptyText : '请输入活动简介',
regex : /^.*\S+.*$/, // 不能为空
regexText : '活动简介不能为空'
}]
});
var aCreateWindow = new Ext.Window({
title: '创建活动',
draggable :true,
bodyStyle: 'padding:5px;',
buttonAlign: 'center',
items: aCreateForm,
border :false,
resizable :false,
closeAction :'hide',
buttons: [{
text: '确定'
},{
text: '取消',
handler:function(){aCreateWindow.hide();}
}]
});
void function() {
Ext.addBehaviors({
'#typeNav a@click':function(e,t){getData(Ext.get(this).getAttribute('value'));},
'#a_c_n dd@click':function(e,t){showCreateForm(Ext.get(this).getAttribute('value'));},
'#a_c_n dd@mouseenter':function(e,t){Ext.get(this).addClass('over');},
'#a_c_n dd@mouseleave':function(e,t){Ext.get(this).removeClass('over');}
});
}();
//显示创建活动窗口
function showCreateForm(){
aCreatePage.hide();
aCreateWindow.show();
}
//显示选择活动类型的页面
function leadToCreatePage(){
aCreatePage.show();
}
function renderTitle(value, p, record) {
return String
.format(
'<a class="alink" title="查看" href="{1}" target="_blank">{0}</a>',
value, record.data.aViewUrl);
}
function renderAction(value, p, record) {
var viewStr, editStr, delStr;
viewStr = String
.format(
'<a class="alink" title="查看" href="{1}" target="_blank">查看</a>',
value, record.data.aViewUrl);
editStr = String
.format(
'<a class="alink" title="编辑" href="{1}" target="_blank">编辑</a>',
value, record.data.aEditUrl);
delStr = String
.format(
'<a class="alink" title="删除" href="{1}" target="_blank">删除</a>',
value, record.data.aDelUrl);
return viewStr + editStr + delStr;
}
function renderDes(value, cell) {
cell.attr = 'style="white-space:normal"';
return value;
}
function renderUserLink(value, p, record) {
return String
.format(
'<a class="alink" title="点击查看个人空间" href="/do/psTemplateUser?action=index&psUserId={1}" target="_blank">{0}</a>',
value, record.data.uId);
}
function checkForm(){
var keyword=searchTxt.getValue().trim();
if(keyword==''){
Ext.Msg.show({
title:'提示',
msg: '活动名称不能为空！',
buttons: {ok:'确定'},
icon: Ext.MessageBox.INFO,
modal:false,
fn:function(){
searchTxt.setValue('');
searchTxt.focus();
}
});
return false;
}
var type=combo.getValue()==''?'all':combo.getValue();
getData(type,keyword);
}
function getData(type,keyword) {
if(type==undefined||typeof(type)!='string' ){
type='all';
}
if(keyword==undefined||typeof(keyword)!='string' ){
keyword='';
}
store.baseParams = {
type : type,
keyword:keyword
};
store.reload({
params : {
start : 0,
limit : 9
}
});
var title=typeNames.get(type);
Ext.getCmp('centerForm').setTitle('活动列表 - '+title);
}
});
界面图：
问题：
1、构造store的时候，跨越调用不行，还不知道为什么
2、左侧那几个button很是烦人，能不能根据数组动态生成
3、所有页面元素都是由引擎生成，看了下生成的html代码，感觉很冗余而且很多，不知道会不会影响页面加载速度，别人调试也不大好调，快速方便和灵活性有点冲突啊
4、ie和ff显示样式有点差别，ff的字体会好看点，ie下的字体有点刺眼，不知道该怎么改
html,body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
letter-spacing:1px;
}
5、分页面板最右端还多出来一列，怎么回事...
6、如果分页面板高度太高的，出现竖直滚动条的同时会出现水平滚动条.....
7、构造数据模型的时候，不知道该用哪种，用数组也不方便，用record也不方便，最后两个一起上，哎，烦躁
8、formpanel内部控件不能自动调整大小，如果加了属性layout: 'fit'，个别控件又会撑得太大，把其他控件都挤没了
9、怎么把Ext.window的背景色弄成白色啊....搞了老半天都不行
注意事项：
1、store有个公共属性baseParams，可以传一些动态参数，方便不同控件（如分页面板、分页工具条）调用
2、tooltip如果要生效，必须在开头写上“Ext.QuickTips.init();”
3、分页面板中每一列默认都是不换行的，可以用css控制一下 white-space:normal
4、Ext.window的关闭按钮默认是remove，如果不想remove的话，得加上属性 closeAction:'hide'
5、在标签dd中加入mouseover和mouseout事件，ie下会出现闪烁，改成mouseenter和mouseleave，ie和ff都ok
'#a_c_n dd@mouseenter':function(e,t){Ext.get(this).addClass('over');},
'#a_c_n dd@mouseleave':function(e,t){Ext.get(this).removeClass('over');}