ext desktop shortcuts 自动排列

iteye_3830

于 2011-12-14 17:28:11 发布

阅读量176

点赞数

CC 4.0 BY-SA版权

分类专栏： ext 文章标签： ui

本文链接：https://blog.youkuaiyun.com/iteye_3830/article/details/82233869

ext 专栏收录该内容

4 篇文章

订阅专栏

本文讨论了在UI设计中遇到图标无法自动排列的问题，并通过修改desktop.js实现自动排列功能，包括设置按钮高度、宽度、间距以及计算列数和行数，以确保布局的合理性和美观性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天改ui时碰到的问题。
图标不能自动排列。

修改desktop.js,添加到最后


//自动排列
	var btnHeight = 61;
	var btnWidth = 64;
	var btnPadding = 15;
	var col = null;
	var row = null;

	function initColRow(){
		col = {index: 1, x: btnPadding};
		row = {index: 1, y: btnPadding};
	}

	initColRow();

	function isOverflow(y){
		var h=Ext.lib.Dom.getViewHeight()-taskbarEl.getHeight();
		if(y > h){
			return true;
		}
		return false;
	}

	this.setXY = function(item){
		var bottom = row.y + btnHeight,
		overflow = isOverflow(row.y + btnHeight);

		if(overflow && bottom > (btnHeight + btnPadding)){
			col = {
				index: col.index++
				, x: col.x + btnWidth + btnPadding
			};
			row = {
				index: 1
				, y: btnPadding
			};
		}

		Ext.fly(item).setXY([
			col.x
			, row.y
		]);

		row.index++;
		row.y = row.y + btnHeight + btnPadding;
	};

	this.handleUpdate = function(){
		initColRow();
		//var items=shortcuts.dom.children;
		var items=Ext.query("dt",shortcuts.dom);
		for(var i = 0, len = items.length; i < len; i++){
			this.setXY(items[i]);
		}
	}
	this.handleUpdate();
	Ext.EventManager.onWindowResize(this.handleUpdate, this, {delay:500});
	//end shortcuts 自动换行