第一个例子很简单，通过网站名称的链接进入对应的网站，直接上代码（代码基于extjs2.3）：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>extjs自定义组件 例子1</title> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.ux.CheckList = Ext.extend(Ext.DataView,{ textField:'text', urlField: 'url', initComponent: function(){ this.tpl = new Ext.XTemplate( '<table border="0" cellspacing="0" cellpadding="0"><tr><tpl for="."><td width="120"><span style="cursor:pointer;" onclick="document.getElementById(\'iframe1\').src=\'{' + this.urlField + '}\';">{' + this.textField + '}</span></td></tpl></tr></table><p><iframe id="iframe1" src="" frameborder="0" width="1000" height="500" /></p>'); Ext.ux.CheckList.superclass.initComponent.call(this); } }); Ext.reg('checklist', Ext.ux.CheckList); Ext.onReady(function(){ Ext.QuickTips.init(); var myData = [ ['新浪','http://www.sina.com.cn/'], ['百度','http://www.baidu.com/'], ['网易','http://www.163.com'] ]; var ds = new Ext.data.Store({ reader: new Ext.data.ArrayReader({}, [{name: 'text'},{name: 'url'}]) }); ds.loadData(myData); document.myCheckList = new Ext.ux.CheckList({ store: ds, mode: 'local', textField: 'text', urlField: 'url', autoScroll: true, renderTo: 'list1' }); }); </script> <div id="list1" style="padding:20px;"></div> </body> </html>
这里简单介绍一下initComponent方法里面的含义：
1、this.tpl指的是控件要输出的内容
2、标签<tpl for="."></tpl>里面的内容根据数据项循环输出
3、用{}大括号可以把数据项里面的内容相应的替换进去。