ExtJS[Desktop]实现图标换行示例代码

ExtJS中的desktop的demo中，默认的图标排列是不换行的，这就造成了如果桌面上的图标过多的话，当超出桌面区域，会造成图标遮盖，即超出桌面区域的部分会被任务栏遮挡，以下代码就是为了解决这一问题的。

首先，在desktop.js中扩展一个函数。


代码如下:

initShortcut : function() {
var btnHeight = 64;
var btnWidth = 64;
var btnPadding = 30;
var col = {index : 1,x : btnPadding};
var row = {index : 1,y : btnPadding};
var bottom;
var numberOfItems = 0;
var taskBarHeight = Ext.query(".ux-taskbar")[0].clientHeight + 40;
var bodyHeight = Ext.getBody().getHeight() - taskBarHeight;
var items = Ext.query(".ux-desktop-shortcut");

for (var i = 0, len = items.length; i < len; i++) {
numberOfItems += 1;
bottom = row.y + btnHeight;
if (((bodyHeight < bottom) ? true : false) && bottom > (btnHeight + btnPadding)) {
numberOfItems = 0;
col = {index : col.index++,x : col.x + btnWidth + btnPadding};
row = {index : 1,y : btnPadding};
}
Ext.fly(items[i]).setXY([col.x, row.y]);
row.index++;
row.y = row.y + btnHeight + btnPadding;
}
}

然后在当前的js文件中的createDataView方法中，添加一个监听器。


代码如下:

createDataView: function () {
var me = this;
return {
xtype: 'dataview',
overItemCls: 'x-view-over',
trackOver: true,
itemSelector: me.shortcutItemSelector,
store: me.shortcuts,
tpl: new Ext.XTemplate(me.shortcutTpl),
listeners:{
resize:me.initShortcut
}
};
}

再者，在afterRender渲染结束时调用函数。


代码如下:

afterRender: function () {
var me = this;
me.callParent();
me.el.on('contextmenu', me.onDesktopMenu, me);
Ext.Function.defer(me.initShortcut,1);
}

赞 (0)

相关推荐

  • ExtJS正则表达式使用说明

    复制代码 代码如下: Ext.onReady(function(){      Ext.QuickTips.init();}); ExtJS的Regex的验证属性分两种情况,一种是只有红色提示框:另一种是在提示框边会出现一个类似批注的提示信息,不过在页面加载时要加上Ext.QuickTips.init();提示框才能正常显示出来.特别提示:在属性regex后要用 /^ 这里加正则 $/ 把上面的正则表达式包起来 否则会报"缺少对象":例子: 复制代码 代码如下: { xtype:'te

  • Extjs改变树节点的勾选状态点击按钮将复选框去掉

    今天系统中有处地方需要一个功能点击一个按钮后将树节点前的复选框去掉,变成没有选择的状态.网上搜索了半天,然后自己查查API,终于找到解决办法了,下面把方法贴出来. 在Extjs3.x和4.x版本中的处理方法是不一样的, 3.x版本中可以这样操作: 复制代码 代码如下: node.attributes.checked=false; node.getUI().toggleCheck(false); 这样就可以取消节点的check状态并且将页面上的勾去掉. 在ExtJs4中的方法如下: 复制代码 代码

  • ExtJS自定义主题（theme）样式详解

    本文基于Ext JS 4.2.1版本UI组件基础学习ExtJS就是学习组件的使用.ExtJS4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件.ExtJs4的组件体系中有将近100种组件,而这些组件又可以大致分为四大类,即容器类组件.工具栏及菜单栏组件.表单及元素组件.其他组件.theme主题ExtJs4引入了全新的主题系统,采用Sass和Compass技术,提供了标准的主题模板,通过对主题模板的简单定制就可以创造出丰富多彩的各种主题. Sass

  • ExtJS[Desktop]实现图标换行示例代码

    ExtJS中的desktop的demo中,默认的图标排列是不换行的,这就造成了如果桌面上的图标过多的话,当超出桌面区域,会造成图标遮盖,即超出桌面区域的部分会被任务栏遮挡,以下代码就是为了解决这一问题的. 首先,在desktop.js中扩展一个函数. 复制代码 代码如下: initShortcut : function() { var btnHeight = 64; var btnWidth = 64; var btnPadding = 30; var col = {index : 1,x :

  • Android实现动态改变app图标的示例代码

    本文介绍了动态改变app图标,分享给大家,具体如下: 代码实现如下: <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"&

  • android10 隐藏SystemUI锁屏下的多用户图标的示例代码

    android10 隐藏SystemUI锁屏下的多用户图标的示例代码

    需求:如上图,需要隐藏右上角的多用户蓝色图标. 修改后结果如下: 锁屏相关的布局在SystemUI frameworks/base/packages/SystemUI/src/com/android/systemui/statusbar/phone/KeyguardStatusBarView.java //更新多用户图标的可见性 private void updateVisibilities() { if (mMultiUserSwitch.getParent() != mStatusIconA

  • js/jquery去掉空格,回车,换行示例代码

    Jquery:$("#accuracy").val($("#accuracy").val().replace(/\ +/g,""));//去掉空格 .replace(/\ +/g,"") //去掉空格方法$("#content").val($("#content").val().replace(/[ ]/g,""));    //去掉空格 .replace(/[ ]/

  • Django添加favicon.ico图标的示例代码

    所谓favicon,即Favorites Icon的缩写,让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站. 默认情况下,浏览器访问一个网站的时候,同时还会向服务器请求"/favicon.ico"这个URL,目的是获取网站的图标. 若是没有配置的话,Django就会返回一个404错误,并且浏览器接收到这个404错误后不会显示出来,一般不会被察觉. 但是服务器要是开启日志记录的话,这错误就会一直记录下来,累积一大堆无用的记录. 添加favicon.ico图标的方法有两种

  • JavaScript用document.write()输出换行的示例代码

    JavaScript用document.write()输出换行的示例代码

    当我们想用document.write()输出换行时,可能会第一时间想到加"\n",但是其实不能达到我们的想要效果,只会得到一个空格的效果. 正确的方法是使用:</br> 样例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> // 使用 \n 换行 ---> 错误的方法 document.write(&quo

  • Java生成中间logo的二维码的示例代码

    最近有负责微信开发,对于微信开发的项目,肯定少不了二维码啦,正好有个这样的需求,这对不同的商品生成一个二维码,扫码即刻下单.博主就弄了一个二维码生成的工具类. 弄出来之后,产品经理又说了,中间放上公司的logo是不是好一点?加上吧, 加上公司logo之后,产品经理想了想,每个商品都有个二维码,销售人员有很多个商品二维码,群发给用户,在qq群上,微信群上,怎么知道哪个二维码对应哪个商品的呢?于是决定要加上商品名称.最后商品二维码就成了下面这个模样了(当然啦,这里面的logo并不是博主现职公司的).

  • C++实现删除txt文件中指定内容的示例代码

    C++实现删除txt文件中指定内容的示例代码

    默认明白C++的文件输入输出流 方法: 新建一个中间文件,逐行读取原文件(test.txt)的内容并写入到中间文件(temp.txt),遇到需要删除的内容则跳过. 再将中间文件的内容写入原文件,删除中间文件. fstream in("C:\\Users\\Administrator\\Desktop\\test.txt", ios::in);//原文件 fstream out("C:\\Users\\Administrator\\Desktop\\temp.txt"

  • Python实现登录接口的示例代码

    Python实现登录接口的示例代码

    之前写了Python实现登录接口的示例代码,最近需要回顾,就顺便发到随笔上了 要求: 1.输入用户名和密码 2.认证成功,显示欢迎信息 3.用户名3次输入错误后,退出程序 4.密码3次输入错误后,锁定用户名 Readme: 1.UserList.txt 是存放用户名和密码的文件,格式为:username: password,每行存放一条用户信息 2.LockList.txt 是存放已被锁定用户名的文件,默认为空 3.用户输入用户名,程序首先查询锁定名单 LockList.txt,如果用户名在里面

  • FileSystemObject 示例代码

    在本节描述的示例代码,提供真实的例子来示范在 FileSystemObject 对象模式中可用的许多功能.该代码显示了如何一起使用对象模式的所有功能,以及如何在您自己的代码中有效地使用这些功能. 请注意,由于该代码是极一般的,所以要使该代码能够真正在您的机器上运行,可能需要一些其他代码和小小的变更.这些改变之所以必要,是因为在 Active Server Pages 和 Windows Scripting Host 之间,为输入和输出给用户采用了不同的方法. 要在 Active Server P

随机推荐