日期:2014-05-16 浏览次数:20365 次
学习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();