Javascript – 筚路蓝缕

&lt;script type="text/javascript"&gt;
Ext.onReady(function()
{
	Ext.BLANK_IMAGE_URL = 'blank.gif';
	var genres = new Ext.data.SimpleStore(
	{
		fields: ['id', 'genre'],
		data: [
			['1', 'Comedy'],
			['4', 'Drama'],
			['3', 'Action']
		]
	});
	var list1 = new Ext.list.ListView(
	{
		store: genres,
		width: 120,
		hideHeaders: true,
		selectedClass: 'x - list - selected',
		multiSelect: false,
		singleSelect: true,
		columns: [
		{
			dataIndex: 'id',
			tpl: '&lt;input type="checkbox" id="{id}"&gt;&lt;/input&gt;',
			width: .2
		}, {
			dataIndex: 'genre',
			tpl: '{genre}',
			width: .5
		}]
	});
	var myPanel = new Ext.Panel(
	{
		renderTo: Ext.get('div_formPanel'),
		layout: 'hbox',
		autoWidth: true,
		autoHeight: true,
		id: 'myP',
		autoScroll: true,
		items: [list1]
	});
});
&lt;/script&gt;

Ext.onReady(function()

{

Ext.BLANK_IMAGE_URL = 'blank.gif';

var genres = new Ext.data.SimpleStore(

{

fields: ['id', 'genre'],

data: [

['1', 'Comedy'],

['4', 'Drama'],

['3', 'Action']

]

});

var list1 = new Ext.list.ListView(

{

store: genres,

width: 120,

hideHeaders: true,

selectedClass: 'x - list - selected',

multiSelect: false,

singleSelect: true,

columns: [

{

dataIndex: 'id',

tpl: '<input type="checkbox" id="{id}"></input>',

width: .2

}, {

dataIndex: 'genre',

tpl: '{genre}',

width: .5

}]

});

var myPanel = new Ext.Panel(

{

renderTo: Ext.get('div_formPanel'),

layout: 'hbox',

autoWidth: true,

autoHeight: true,

id: 'myP',

autoScroll: true,

items: [list1]

});

</script>

Javascript2010年11月15日2015年9月27日

ExtJS使用技巧

listview显示复选框 <script type=”text/javascript&#8 […]

Javascript2010年11月15日

jQuery dataType指定为json的问题

　　最近在看jQuery的API文档，在使用到jQuery的ajax时，如果指定了dataType为json， […]

Javascript2010年11月15日

Ext之扩展Ext.ux.form.LovCombo使用

??? 最近学习使用Ext做些东西，有时候找到现成的，但却不知道如何使用。比如前几天在项目中有个多选下拉框的要 […]

Javascript2010年11月15日

ExtJs之combobox

1.服务器数据作为ComboBox的数据源实例首先从服务器获取json数据： //cs后台代码，简单起见，示 […]

Javascript2010年5月14日2011年10月18日

JS系统环境检测，检测浏览器版本、.NET版本、IE证书安装

使用Javascript检测系统环境，方便系统部署，检测浏览器版本、.NET版本、IE证书安装 [crayon […]

Javascript2010年5月14日2011年10月18日

在frameset中的一个frame页面刷新另外一个frame

一主页面index.jsp中包含一个frameset，左边frame中包含界面test.jsp,右边fram […]

Javascript2010年5月14日2011年10月18日

jquery ui accordion高度自适应

官网上提供了accordion的一些介绍，根据这些，能够实现当浏览器大小改变时，accordion自动适应其父 […]

Javascript2010年5月5日2011年10月18日

IE图片预加载

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;IE图片预加载类&lt;/title&gt;
&lt;script language="javascript"&gt;
function LoadImageClass()
{
	var me = this;
	var a = []; //图片数组
	this.Idx = 0; //已经被加载的图片个数
	this.Num = 0; //图片总数
	//下载图片
	this.LoadImages = function (s)
	{
		a = s.split(",");
		this.Num = a.length;
		DownImg();
	}

	function DownImg()
	{
		var i = new Image();
		var f = true;
		i.onload = function ()
		{
			if (f)
			{
				f = false
				me.Idx++;
				if (me.LoadIng) me.LoadIng();
				if (me.Idx &lt; me.Num) DownImg();
				else if (me.CallBack) me.CallBack(a);
			}
		}
		i.src = a[me.Idx];
	}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="counter" style="position:absolute; z-index:98; left:expression(document.body.clientwidth/2-60); top:expression(document.body.clientheight/2-10); width:120px; height:20px; background:#000000; color:#ffffff;"&gt;
	图片加载中…
&lt;/div&gt;
&lt;div id="divPageMask" style="position:absolute;z-index:99; left:0px; top:0px; width:expression(document.body.clientwidth); height:expression(document.body.clientheight); background:black; filter:alpha(opacity=50);"&gt;
&lt;/div&gt;
&lt;div id="box"&gt;
&lt;/div&gt;
&lt;script language="javascript"&gt;
var o = document.getElementById("counter");
var t = new LoadImageClass();
t.LoadIng = function ()
{
	o.innerHTML = "加载进度：" + Math.floor(t.Idx / t.Num * 100) + "%"
};
t.CallBack = function (arr)
{
	window.setTimeout(function ()
	{
		o.style.display = 'none';
		alert('图片加载完毕！')
	}, 1000);
	document.getElementById('divPageMask').style.display = 'none';
	var str = "";
	for (var i = 0; i &lt; arr.length; i++)
	{
		str += '&lt;img src="+arr[i]+" /&gt;&lt;br/&gt;';
	}
	document.getElementById("box").innerHTML = str;
}
t.LoadImages('http://photo1.bababian.com/upload3/20070726/90C803067E6AE5F138890F7EDBD6A5B2_240.jpg,http://photo1.bababian.com/upload3/20070726/AE9544EED47E210930511245D43E61C9_240.jpg,http://photo1.bababian.com/upload3/20070726/C0C286574F4D794190BC893B8FF9699B_240.jpg,http://photo1.bababian.com/upload3/20070726/153DCE973D5A68BCF1581C598D58FCC1_240.jpg,http://photo1.bababian.com/upload3/20070726/2882CBEC90AE58AB3AE56A157B3B9D4F_240.jpg,http://photo1.bababian.com/upload3/20070726/40C80D0BD65E5D0EA82CDE6556A53815_240.jpg,http://photo1.bababian.com/upload3/20070726/F098FDD6147BFABC4796CFC463A025A9_240.jpg');&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<title>IE图片预加载类</title>

function LoadImageClass()

{

var me = this;

var a = []; //图片数组

this.Idx = 0; //已经被加载的图片个数

this.Num = 0; //图片总数

//下载图片

this.LoadImages = function (s)

{

a = s.split(",");

this.Num = a.length;

DownImg();

}

function DownImg()

{

var i = new Image();

var f = true;

i.onload = function ()

{

if (f)

{

f = false

me.Idx++;

if (me.LoadIng) me.LoadIng();

if (me.Idx < me.Num) DownImg();

else if (me.CallBack) me.CallBack(a);

}

i.src = a[me.Idx];

}

</script>

</head>

<body>

图片加载中…

</div>

</div>

</div>

var o = document.getElementById("counter");

var t = new LoadImageClass();

t.LoadIng = function ()

{

o.innerHTML = "加载进度：" + Math.floor(t.Idx / t.Num * 100) + "%"

};

t.CallBack = function (arr)

{

window.setTimeout(function ()

{

o.style.display = 'none';

alert('图片加载完毕！')

}, 1000);

document.getElementById('divPageMask').style.display = 'none';

var str = "";

for (var i = 0; i < arr.length; i++)

{

str += '<img src="+arr[i]+" /><br/>';

}

document.getElementById("box").innerHTML = str;

}

t.LoadImages('http://photo1.bababian.com/upload3/20070726/90C803067E6AE5F138890F7EDBD6A5B2_240.jpg,http://photo1.bababian.com/upload3/20070726/AE9544EED47E210930511245D43E61C9_240.jpg,http://photo1.bababian.com/upload3/20070726/C0C286574F4D794190BC893B8FF9699B_240.jpg,http://photo1.bababian.com/upload3/20070726/153DCE973D5A68BCF1581C598D58FCC1_240.jpg,http://photo1.bababian.com/upload3/20070726/2882CBEC90AE58AB3AE56A157B3B9D4F_240.jpg,http://photo1.bababian.com/upload3/20070726/40C80D0BD65E5D0EA82CDE6556A53815_240.jpg,http://photo1.bababian.com/upload3/20070726/F098FDD6147BFABC4796CFC463A025A9_240.jpg');</script>

</body>

</html>

Javascript2010年4月24日2011年10月18日

分类： Javascript

AES加密CBC模式兼容互通四种编程语言平台【PHP、Javascript、Java、C#】

art-template匿名数组遍历

Javascript中的封装多态和继承

JQuery学习

$ is not a function

WordPress Syntax Highlighter ComPress代码高亮插件增加运行代码的功能

示例页面

Ext.data.Store.find的匹配模式

网页window的大小与屏幕匹配

Ext.EventObject is undefined 使用viewport布局

Ext中TreePanel控件和TabPanel控件搭配测试

ExtJS+FusionCharts结合的两种方法

Error:’return’ 语句在函数之外的解决方法

ExtJS的listview显示复选框

ExtJS使用技巧

jQuery dataType指定为json的问题

Ext之扩展Ext.ux.form.LovCombo使用

ExtJs之combobox

JS系统环境检测，检测浏览器版本、.NET版本、IE证书安装

在frameset中的一个frame页面刷新另外一个frame

jquery ui accordion高度自适应

IE图片预加载

jquery技巧: 图片大小自适应

jQuery的radio,checkbox,select操作

escape、encodeURI 和encodeURIComponent 的区别