最近在学习extjs4,做crud操作时要将与后台数据交互结果反馈给用户,如果用extjs的MessageBox感觉有点笨重,就想要自己设计一个像android的Toast一样的信息提示框,google了一下,extjs官方居然有现成的例子,稍微改动了一下,自己做做笔记
Ext.define('Ext.ux.Toast',{
extend:'Ext.Component',
alias:'widget.toast',
initComponent:function(){
var me = this;
var msgCt;
function createBox(t, s) {
return [
'<div class="msg">',
'<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
'<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc" style="font-size:13px"><h3>',
t,
'</h3>',
s,
'</div></div></div>',
'<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
'</div>'].join('');
}
/**
* 信息提示
* @member Ext.ux.Toast
* @param {String}
* title 标题
* @param {String}
* format 内容
* @param {autoHide}
* autoHide 是否自动隐藏
* @param {pauseTime}
* pauseTime 信息停留时间
*/
me.msg = function(title, message, autoHide, pauseTime) {
if (!msgCt) {
msgCt = Ext.DomHelper.insertFirst(document.body, {
id : 'msg-div',
style : 'position:absolute;top:10px;width:250px;margin:0 auto;z-index:20000;'
}, true);
}
// //给消息框右下角增加一个关闭按钮
// message+='<br><span style="text-align:right;font-size:12px;
// width:100%;">' +
// '<font color="blank"><a style="cursor:hand;"
// onclick="Ext.example.hide(this);">关闭</a></font></span>'
var s = Ext.String.format.apply(String, Array.prototype.slice.call(
arguments, 1));
var m = Ext.DomHelper.append(msgCt, {
html : createBox(title, s)
}, true);
msgCt.alignTo(document, 't-t');
m.slideIn('t');
if (!Ext.isEmpty(autoHide) && autoHide == true) {
if (Ext.isEmpty(pauseTime)) {
pauseTime = 1000;
}
console.log('pauseTime==>'+pauseTime);
// 在extjs4中m.pause(t)方法已经被标记为 DEPRECATED
m.ghost("t", {
delay: pauseTime,
remove : true
});
}
}
me.callParent();
return me;
},
/**
* 隐藏提示框
* @param {} v
*/
hide : function(v) {
var msg = Ext
.get(v.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);
msg.ghost("t", {
remove : true
});
}
},function(){
Ext.ux.Toast = new this();
});
该提示框可以设置是否自动隐藏,提示框停留时间,还可以添加删除提示框的按钮(只要加上被注释的代码就行)
我把文件放在extjs/ux/目录下,文件名为Toast.js,则在app.js中就添加如下代码Ext.Loader.setConfig({
enabled : true
});
Ext.Loader.setPath('Ext.ux','extjs/ux');
Ext.application({
requires:[‘Ext.ux.Toast']
......
});
分享到:
相关推荐
漂亮的Extjs图片展示组件实例,类似于幻灯片,可直接拿去用,非常不错的哦
1、Extjs3.0 常用组件介绍ppt 2、怎样安装开发利器Spket 3、Spket安装包
extjs-form组件配置参数详解 extjs各种组件说明
这里主要介绍了ExtJS常用组件的样式修改,包括工具栏样式修改、菜单样式修改、树形菜单样式修改、表格样式修改、按钮样式修改等。
01.教程简介_ExtJS4.2简介_SSH2基本框架搭建 02.编写几个通用的service方法、设计数据库 03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的...
extjs入门学习,各个组件的使用,包括Observable、Observable、BoxComponent、Container、Panel、Viewport及Window...
extjs各种组件的详细实现及各种扩展归纳总结,包括各种grid,tree,布局,表单,ajax,弹出框等
实现对Ext树进行分页的组件,扩展了TreeLaoder和PagingToobar
extjs时间日期选择组件.
ExtJS日期多选组件源码 日期一般是单选,有时间有需要选择多个日期的情况,返回一个日期的数组。
ExtJS 组件扩展 如何正确使用Extjs---扩展组件的两个层次
我们开发项目的时候,有的时候左边的树结点很多,虽然说有extjs有异步,但还是有结点下面有时长达500个以上,甚至更多,这个时候用分页可以解决这个问题
EXTJS 上传组件及示例EXTJS 上传组件及示例EXTJS 上传组件及示例
extjs 代码提示插件(vs2008)
ExtJS 智能提示 for Eclipse
ExtJS4下拉树组件 ExtJS4下拉树组件
Extjs2.0 智能提示
基于EXTJS4.0桌面组件开发的多系统切换WEB框架_DEMO文件
ExtJs组件类的对应表,很好的,分享给大家!!