首页 > 代码库 > ZP的EXTJS学习笔记（三）——邮箱功能的开发（按钮事件、下拉框、分页、record小图标、整条数据格式处理、定时刷新、record复选删除、分组）
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=http://www.mamicode.com/‘/mail/mail.png‘ border=‘0‘>
加在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‘。
这些小功能的实现都是我在开发中收集整理的，希望能帮助到大家。
ZP的EXTJS学习笔记（三）——邮箱功能的开发（按钮事件、下拉框、分页、record小图标、整条数据格式处理、定时刷新、record复选删除、分组）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。