ZP的EXTJS学习笔记(三)——邮箱功能的开发(按钮事件、下拉框、分页、record小图标、整条数据格式处理、定时刷新、record复选删除、分组)
照例,先贴效果图:
本人比较满意,短时间开发的邮箱功能,这是收件箱,还有配套的发件箱与删除箱。
简单说下思路:
1、配置model、store,用的是MVC模式,可参考第一篇学习笔记。
2、页面简单布局:
Ext.define('KitchenSink.view.mail.InBox', { extend: 'Ext.grid.Panel', alias : 'widget.inbox', xtype: 'inbox', autoHeight:true, bodyStyle:'width:100%', autoWidth:true, requires:[ 'KitchenSink.store.mail.InBoxStore', ], initComponent : function() { inStore = Ext.create('KitchenSink.store.mail.InBoxStore', {});//实例化store this.store = inStore; this.store.load(); this.columns = [{ header : '主题', dataIndex : 'theme', width: '25%', flex : 1 },{ header : '阅读状态', dataIndex : 'readFlag', width: '15%', },{ header : '消息类型', dataIndex : 'messageType', width: '15%' },{ header : '发送人', dataIndex : 'sender', width: '15% },{ header : '发送时间', dataIndex : 'sendtime', width: '25%' }]; this.callParent(arguments); } });
3、调节细节,增加功能。
在这我说下各种细节功能的实现,大部分功能实现在initComponent中,根据个人需要也可写在外面。
a.新建/刷新按钮
initComponent中添加:
this.dockedItems = [{ xtype: 'toolbar', items: [{//实现新建按钮 iconCls: 'icon-add', text: '新建', scope: this, action: 'add' //这个是必须,给 Controller }, { iconCls: 'icon-fresh', text: '刷新', action: 'fresh', scope: this, handler: function(btn, pressed){ btn.up('panel').store.reload(); } }]
新建的事件为在此处理,交由Controller处理,具体实现位置自定,如按照我这种,需加:action: 'add'。
b.下拉框:
{ //实现下拉框 fieldLabel : ' 是否已读', labelWidth: 70, width: 180, id : 'ifread', name: 'ifread', allowBlank : false, xtype : 'combo', editable : false, mode : 'local', triggerAction : 'all', store : [[1,'显示所有'],[2,'未读'], [3,'已读']], value : 1, listeners:{//监听下拉框事件 select : function() { var readtag= Ext.getCmp("ifread").getValue(); inStore.load({params:{ifread:readtag}});//设置store参数,读取store } }
c.分页:
{//实现分页 xtype:'pagingtoolbar', store:inStore, dock:'bottom', displayInfo:true, displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', emptyMsg: "没有数据" }
d.邮件与附件小图标:
this.columns = [{//实现图标 header : '', dataIndex : 'attachFlag', width: '3%', renderer:function(val, cellmeta, record, rowIndex, columnIndex, store){ //设置未读颜色 if('1' == val) { return "<div align='left'><img src='/mail/mail.png' border='0'><img src='/mail/attach.gif' border='0'></div>"; }else return "<div align='left'><img src='/mail/mail.png' border='0'></div>"; } }]
加在Column中,attachTag为后台处理后传来的是否有附件的标志。
同样,对某列,某条数据的处理,只需在列中加入renderer:function,依dataIndex返回值处理返回至页面该块的html代码。
e.整条数据格式处理:
viewConfig: {//用以设置行特殊格式 enableTextSelection: 'true', getRowClass:function(record, index, rowParams, store){ if(record.get('readFlag')=="未读") return"row-s"; else return "row-f"; } },
其中row-s与row-f是事先定义好的css,判断record中数据,返回需要格式。
f.定时刷新:
setInterval(function() {// 定时刷新 inStore.reload(); }, 1000*60); //每隔 1 分钟
加在initComponent中。
g.record复选删除:
{ //实现复选删除 xtype : 'button', text : '删除', iconCls: 'icon-delete', scope: this, handler: function (btn,pressed) { var sm = btn.up('panel').getSelectionModel(); if (sm.hasSelection()) { Ext.Msg.confirm("警告", "确定要删除吗?(确定则将邮件移入已删除邮件箱)", function (button) { if (button == "yes") { var selected = sm.getSelection(); var Ids = []; //要删除的id Ext.each(selected, function (item) { Ids.push(item.get('messageId')); }) //alert(Ids); Ext.Ajax.request({ url : '../mail/deleteMessages.dhtml', params : { ids : Ext.encode(Ids) }, method : 'POST', timeout : 2000, success: function (response, opts) { Ext.MessageBox.hide(); if (response.responseText) { inStore.load(); Ext.Msg.alert('系统提示', "删除成功"); } else { Ext.Msg.alert("系统提示", '删除失败'); } }, failure: function () { Ext.Msg.alert('系统提示', '系统出错!'); } }); } }); } else { Ext.Msg.alert("错误", "没有任何行被选中,无法进行删除操作!"); } } }
之前需在initComponent中定义复选模式:
var selModel = Ext.create('Ext.selection.CheckboxModel',{ checkOnly :true });//实现复选 this.selModel = selModel;
checkOnly为true是用来限定只点击选择框才能标记,否则可点击record任何地方,但是会影响选中多项。
h.分组:
this.features = [{//实现分组 id: 'group', ftype: 'grouping', groupHeaderTpl: '<font color=blue>{name}</font> (共:{rows.length}封邮件)', hideGroupedHeader: true, enableGroupingMenu: false }];
在initComponent中设置,之前需要在store定义中设置:groupField: 'groupName'。
这些小功能的实现都是我在开发中收集整理的,希望能帮助到大家。