第一個例子很簡單，通過網站名稱的鏈接進入對應的網站，直接上代碼（代碼基於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、用{}大括號可以把數據項里面的內容相應的替換進去。