extjs自定义控件（二）

//使用继承方式
// apply(将一个对你复制到另一个对象)与applyIf(将一个对象复制到另一个对象，但重复的不复制)
// apply(a, b) 与 applyIf(a, b)
// 子类.superclass.constructor.call(this, {(基类构造函数)(配置)参数});---调用基类的构造函数，把参数传给基类的构造函数
//this表示什么得看Ext.extend继承的基类是什么；
//如：子类.superclass.constructor.call(this, {title: '继承', width: 200, height:300});
// Ext.extend(子类，基类，{操作(方法)})
//如：Ext.extend(子类，基类，{
 //      click: function(){

//       },
//       dbclick: function(){

//       }
//    })--这样子类的实例对象就可以访问这些方法；

//创建一个面板，继承于Ext.Panel，并接收一个参数
var Panel = function (config) {
    config = config || {};
    var _config = Ext.applyIf({
        layout: 'accordion',
        region: 'west',
        split: true,
        width: 200,
        collapsible: true,
        animate: true
    }, config); //把传进来的参数复制到上面去，重复的不复制
    //以下是调用基类的构造函数，并把创建好的参数（_config）传给Ext.Panel;
    /*
    相当于：
    new Ext.Panel({
    layout: 'accordion',
    region: 'west',
    split: true,
    width: 200,
    collapsible: true,
    animate: true,
    加上config传进去的参数
    })
    */
    Panel.supperclass.constructor.call(this, _config);//把参数传给Ext.Panel的构造函数
}
Ext.extend(Panel, Ext.Panel, {}); //继承Ext.Panel

 

 

/**********************************************************************************************/

var Tree = function (config) {//将接收一个config参数，用来配置dataUrl与title
    config = config || {};
    var loader = new Ext.tree.TreeLoader({ dataUrl: config.dataUrl });
    Tree.superclass.constructor.call(this, { //把参数传给Ext.tree.TreePanel
        animate: true,
        title: config.title,
        rootVisible: false,
        region: 'west',
        split: true,
        width: 200,
        collapsible: true,
        root: {},
        loader: loader
    });
}
Ext.extend(Tree, Ext.tree.TreePanel, {//上面的Tree继承于Ext.tree.TreePanel，，并为其添加click方法
    click: function (contentPanel) {
        this.on('click', function (node) {
            if (!node.attributes.leaf)
                return false;
            var tabid = "tree_tab_" + node.attributes.id;
            var exist_panel = contentPanel.getComponent(tabid);
            if (exist_panel)
                contentPanel.setActiveTab(exist_panel);
            else {
                var iframe_in_tab = "iframe_" + tabid;
                var iframe_html = "<iframe width=100% height=100% id='" + iframe_in_tab + "'/>";
                var panel = new Ext.Panel({
                    title: node.attributes.text,
                    id: tabid,
                    closable: true,
                    html: iframe_html
                });
                contentPanel.add(panel);
                contentPanel.setActiveTab(panel);
                Ext.get(iframe_in_tab).set({
                    src: node.attributes.url
                });
            }
        })
    }
});
var Main = function () {
    Main.superclass.constructor.call(this, {
        region: 'center',
        margins: '0 5 5 0',
        activeTab: 0,
        items: [
           { title: '首页', closable: false, html: 'welcome' }
        ],
        tbar: new Ext.Toolbar({
            items: [
              { xtype: 'displayfield', value: '内容页面导航', style: 'color: Red' },
              { xtype: 'button', text: '后退', tooltip: '后退', handler: function () {

              }
              },
              { xtype: 'button', text: '前进', tooltip: '前进', handler: function () {

              }
              },
              { xtype: 'button', text: '刷新', tooltip: '刷新', handler: function () {

              }
              }
           ]
        })
    })
}
//上面的继承于Ext.TabPanel
Ext.extend(Main, Ext.TabPanel, {});

Ext.onReady(function () {
    var contentPanel = new Main();
    var tree = new Tree({
        title: '省份列表',
        dataUrl: '/Index/mainIndex'
    });
    tree.click(contentPanel);
    new Ext.Viewport({
        layout: 'border',
        items: [
           { region: 'north', height:60, html: 'header', border: false },
           tree,
           contentPanel
        ]
    })

})