extjs编写自定义组件，第一个例子

第一个例子很简单，通过网站名称的链接进入对应的网站，直接上代码（代码基于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、用{}大括号可以把数据项里面的内容相应的替换进去。

posted @ 2014-01-21 15:24  魔豆  阅读(5160)  评论(0)  编辑  收藏  举报