日期:2014-05-16 浏览次数:20453 次
学习Ext有三天了, 参考《Ext2.0入门与精通》和官方的examples照猫画虎搞了个 员工管理'系统' 和 员工签到'系统'
希望大家一起学习, 由于学艺不精, 若有不足之处还请各位批评指正, 谢谢大家
?
/*
* MemberManage.js
?* @author zuoming99
*/
Ext.onReady(function(){
Ext.QuickTips.init();
var fm = Ext.form;
var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown: Ext.emptyFn});
var cm = new Ext.grid.ColumnModel([
sm,{
header:'ID',
dataIndex:'id',
width:40
},{
header: "姓名",
dataIndex: 'name',
editor: new fm.TextField({
allowBlank: false
})
},{
header:'性别',
dataIndex:'sex',
width:60,
align:'center',
renderer:function(v){
return '<img src="images/'+v+'.png"/>'+(v=='m'?'男':'女');
},
editor:new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'sexSelect',
lazyRender:true,
readOnly:true,
listClass: 'x-combo-list-small'
})
},{
header:'年龄',
dataIndex:'age',
width:50,
align:'right',
renderer:function(v){
var code = '<span style="color:';
if(v<=25){
code += '#008000';
}else if(v>25 && v<=30){
code += '#CC6600';
}else if(v>30){
code += '#804000';
}
return code+';">'+v+'</span>';
},
editor: new fm.NumberField({
allowBlank:false,
allowNegative: false,
allowDecimals: false,
maxValue:60,
minValue:18
})
},{
header: "生日",
dataIndex: 'birth',
renderer: function(v){
return v ? v.dateFormat('Y年m月d日') : '';
},
editor: new fm.DateField({
format: 'Y-m-d',
minValue: '1800-01-01',
readOnly:true,
disabledDays: [0, 6],
disabledDaysText: '请不要选择周末'
})
}
]);
cm.defaultSortable = true;
var Member = Ext.data.Record.create([
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'sex'},
{name: 'age',type:'int'},
{name: 'birth', type: 'date', dateFormat: 'Y-m-d'}
]);
var store = new Ext.data.JsonStore({
url:'./member_manage.jsp',
baseParams:{command:'query'},
totalProperty:'count',
root:'members',
fields:Member,
pruneModifiedRecords:true,
sortInfo: {field: "id", direction: "ASC"} //设置默认排序规则, EditorGridPanel在新增加一行却未保存时如果点击header排序会出现'行142字符6983,modified为空或不是对象'
});
//表单窗体
var memberAddWindow;
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'member_grid',
resizeable:true,
width:640,
height:480,
title:'员工管理',
frame:true,
clicksToEdit:1,
sm:sm,
iconCls:'icon-grid',
loadMask: true,
stripeRows:true,
tbar:[
{// 添加按钮
text:'添加',
iconCls:'user_add',
handler:function(){
var m = new Member({
name:'新员工',
sex:'m',
age:'20',
birth:new Date().clearTime()
});
grid.stopEditing();
store.insert(0, m);
grid.startEditing(0, 2);
store.getAt(0).dirty=true; // 设置该行记录为脏数据(默认为非脏数据),否则在保存时将无法判断该行是否已修改
}
},'-',{
id:'newWindowButton',
text:'新面板中添加',
iconCls:'user_add',
handler:function(){
showMemerAddWindow(); //显示表单所在窗体
}
},'-',{//删除按钮
id:'btnDelete',
text:'删除',
iconCls:'user_delete',
handler:function(){
var sm = grid.getSelectionModel();
var selected = sm.getSelections();
var ids = [];
for(var i=0;i<selected.length;i+=1){
var member = selected[i].data;
if(member.id) {
ids.push(member.id); //如果有ID属性,则表示该行数据是被修改过的,所以需要访问数据库进行删除
}else{
//如果没有ID属性,则表示该行数据是新添加的未保存的数据,所以不需要访问数据库进行删除该行
store.remove(store.getAt(i));
}
}
if(ids.join('')=='') return;
Ext.Msg.confirm('信息','确定要删除所选项吗?',function(btn){
if(btn=='yes'){
//发送删除请求
Ext.lib.Ajax.request(
'POST',
'./member_manage.jsp',{
success:function(request){
var message = request.responseText;
Ext.Msg.alert('信息',message);
store.reload();