Ext 仿QQ邮箱全选效果

// 定时器
var time;
/**
 * 进行全选设置
 */
function selectedAll(maxLength, singleLength) {
	$("#div_sel_count").text("");
	var totalLable = "已勾选<span id='changeCount'>" + singleLength
			+ "</span>条数据,<a style='color:blue;' href='javascript:selectedSingle(" + maxLength + "," +singleLength
			+ ")'>取消勾选</a>";
	$("#div_sel_count").append(totalLable);
	var changeTimes = parseInt((maxLength - singleLength) / 5);
	time = setInterval("count(" + maxLength + "," + changeTimes + ")", 200);
	$("#isCheckedAll").text(true);
}

/**
 * 进行全部勾选时，数字动态增加
 */
function count(maxLength, changeTimes) {
	var changeCount = parseInt($("#changeCount").html());
	changeCount += changeTimes;
	if (changeCount < parseInt(maxLength)) {
		$("#changeCount").html(changeCount);
	} else {
		$("#changeCount").html(maxLength);
		clearTimeout(time);
	}
}

/**
 * 取消全部选中，只选中当前页面的全部数据
 */
function selectedSingle(maxLength, singleLength) {
	$("#div_sel_count").text("");
	var totalLable = "已勾选本页" + singleLength + "条数据,<a style='color:blue;' href='javascript:selectedAll(" + maxLength
			+ "," + singleLength + ");'>勾选全部" + maxLength + "条数据？</a>";
	$("#div_sel_count").append(totalLable);
	$("#isCheckedAll").text(false);
}

/**
 * 对页面表单的加载事件进行监听  gridPanel为查询列表
 */
var store = gridPanel.getStore();
store.addListener("load", function(thiz) {
	var hd = gridPanel.getEl().select('div.x-grid3-hd-checker').parent().first();
	hd.removeClass('x-grid3-hd-checker-on');
	$("#div_sel_count").remove();
	$("#isCheckedAll").text(false);
	var scrollerHeight = $(".x-grid3").height() - $(".x-grid3-header").height();
	$(".x-grid3-scroller").attr('style', 'height:' + scrollerHeight + 'px;');
});

/**
 * 监听页面数据勾选情况  gridPanel为查询列表
 */
var sm = gridPanel.getSelectionModel();
sm.addListener("selectionchange", function(thiz) {
	var isCheckedAll = "<div id='isCheckedAll' style='display:none'>false</div>";// 这是一个隐藏域，为后期数据提交做准备的
	if (!$("#isCheckedAll").length) {
		$(".x-grid3-header").append(isCheckedAll);
	}
	var singleCount = store.getCount();
	var totalLength = store.totalLength;
	var hd = gridPanel.getEl().select('div.x-grid3-hd-checker').parent().first();
	if (!hd) {
		return;
	}
	if (singleCount > 0 && singleCount == this.getCount()) {
		hd.addClass('x-grid3-hd-checker-on');
	} else {
		hd.removeClass('x-grid3-hd-checker-on');
	}
	if (totalLength > singleCount) {
		if (hd.hasClass('x-grid3-hd-checker-on')) {
			var selectDiv = "<div class='x-grid3-row x-grid3-row-alt' id='div_sel_count' style='background-color:#FFFFE9;height:18px;padding-top:3px;text-align:center;font-size=12;'>已勾选本页"
					+ this.getCount()
					+ "条数据,<a style='color:blue;' href='javascript:selectedAll("
					+ totalLength
					+ ","
					+ this.getCount() + ");'>勾选全部" + totalLength + "条数据？</a></div>";
			$(".x-grid3-header").append(selectDiv);
			var scrollerHeight = $(".x-grid3").height() - $(".x-grid3-header").height() - $(".div_sel_count").height();
			$(".x-grid3-scroller").attr('style', 'height:' + scrollerHeight + 'px;');
		} else if ($("#div_sel_count").length) {
			$("#div_sel_count").remove();
			var scrollerHeight = $(".x-grid3").height() - $(".x-grid3-header").height();
			$(".x-grid3-scroller").attr('style', 'height:' + scrollerHeight + 'px;');
		}
	}
});

请尊重原创，如需转载请注明