Ext.require(['*']);

Ext.onReady(function() {
    var cw;

    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

    function closeRegion (e, target, header, tool) {
        var panel = header.ownerCt;
        newRegions.unshift(panel.initialConfig);
        viewport.remove(panel);
    }

    var viewport = Ext.create('Ext.container.Viewport', {
        layout: {
            type: 'border',
            // 边距
            padding: 5
        },
        renderTo:Ext.getBody(),
        defaults: {
            split: true
        },
        items: [{
            region: 'north',
            collapsible: false,
            // title: 'North',
			// 去掉这个属性设置为false就可以把切割的那一条边去掉
            split: false,
			// --------------
			// 加上这个属性之后，点击之后标题机会隐藏起来
			// 现在的需求是把标题这一整行去掉，太占地方了
			collapseMode: 'mini',
			header:false,
			// --------------
            height: 100,
            minHeight: 60,
            html: 'north'
        },{
            region: 'west',
            store: leftTree,
            xtype:'treepanel',
            collapsible: true,
            // layout: 'absolute',
            split: true,
            width: '15%',
            header: false,
            collapseMode: 'mini',
            //minWidth: 100,
            // minHeight: 140,
            bodyPadding: 10,
            // stateId: 'westRegion',
            // stateful: true,
			listeners:{
				 //itemclick: function (view, record, item, index, e) {
                //    // 单击事件
                //},
				itemcontextmenu:function(menutree,record,item,index,e){
					// 右击事件
					e.preventDefault();
					rightClick.showAt(e.getXY());
				}
			}
           
        }, {
            region: 'center',
            html: 'center center',
            // title: 'Center',
            header:false,
            minHeight: 80,
            layout: {
                type: 'border',
                padding: 0
            },
            items: [{
                region: 'center',
                // ----------
                header: false,
                collapseMode: 'mini',
                // ----------
                minWidth: 80,
                html: 'South Central'
            }, {
                region: 'east',
                // ----------
                header: false,
                collapseMode: 'mini',
                // ----------
                flex: 1,
                minWidth: 80,
                html: 'South Eastern',
                split: true,
                collapsible: true
            }],renderTo:Ext.getBody()
        }, {
            region: 'south',
            height: 100,
            split: true,
            // ----------
            header: false,
            collapseMode: 'mini',
            // ----------
            collapsible: true,
            minHeight: 60,
            html: 'center south',
            weight: -100
        }]
    });
});

var leftTree = Ext.create('Ext.data.TreeStore', {
    // 树根
    root: {
		id:'tree1',
		text:"树根",
        // 是否默认展开
        expanded: true,
		checked:false,
        children: [
            {
                text: "大项目1",
				checked:false,
                expanded: false,
                children: [
                    {
                        id: 1,
                        text: "子项目1",
                        leaf:true,
						checked:false
                    },
                    {
                        id: 2,
                        text: "子项目2",
                        leaf: true,
						checked:false
                    }
                    ,
                    {
                        id: 3,
                        text: "子项目3",
                        leaf: true,
						checked:false
                    }
                ]

            }, {
                text: "大项目2",
				checked:false,
                expanded: false,
                children: [
                    {
                        id: 4,
                        text: "子项目1",
                        leaf:true,
						checked:false
                    },
                    {
                        id: 5,
                        text: "子项目2",
                        leaf: true,
						checked:false
                    }
                    ,
                    {
                        id: 6,
                        text: "子项目3",
                        leaf: true,
						checked:false
                    }
                ]

            }
        ]
    }
	});

var rightClick = new Ext.menu.Menu({
	id:'rightClickCont',
	items:[{
		id:'rMenu1',
		text:'菜单1',
		handler:function(){
			alert('菜单1');
		}
	},{
		id:'rMenu2',
		text:'菜单2',
		handler:function(){
			alert('菜单2');
		}
	}]
});

       

Ext.define('Ext.example.RegionSetter', {
    extend: 'Ext.Component',
    xtype: 'regionsetter',
    style: 'font-size: 30px;',
    autoEl: {
        tag: 'table',
        cn: [{
            tag: 'tr',
            cn: [{
                tag: 'td',
                colspan: 3,
                align: 'center',
                cls: 'ux-arrow ux-arrow-up',
                //html: '☝'
                html: '▲'
            }]
        },{
            tag: 'tr',
            cn: [{
                tag: 'td',
                cls: 'ux-arrow ux-arrow-left',
                //html: '☜'
                html: '◄'
            },{
                tag: 'td',
                style: 'font-size: 120%',
                html: '☀'
            },{
                tag: 'td',
                cls: 'ux-arrow ux-arrow-right',
                //html: '☞'
                html: '►'
            }]
        },{
            tag: 'tr',
            cn: [{
                tag: 'td',
                colspan: 3,
                align: 'center',
                cls: 'ux-arrow ux-arrow-down',
                //html: '☟'
                html: '▼'
            }]
        }]
    },

    afterRender: function () {
        this.callParent();
        
        this.ownerCt.on({
            changeregion: 'onChangeRegion',
            scope: this
        });
        this.onChangeRegion(this.ownerCt);

        this.el.on({
            click: this.onClick,
            mouseover: this.onMouseOver,
            mouseout: this.onMouseOut,
            scope: this
        });
    },

    onClick: function (e) {
        var target = Ext.fly(e.getTarget());
        var region;

        if (target.hasCls('ux-arrow-up')) {
            region = 'north';
        } else if (target.hasCls('ux-arrow-left')) {
            region = 'west';
        } else if (target.hasCls('ux-arrow-right')) {
            region = 'east';
        } else if (target.hasCls('ux-arrow-down')) {
            region = 'south';
        }

        if (region && region !== this.ownerCt.region) {
            this.ownerCt.setBorderRegion(region);
        }
    },

    onMouseOver: function (e) {
        var target = Ext.fly(e.getTarget());
        if (target.hasCls('ux-arrow')) {
            target.addCls('ux-arrow-over');
        }
    },

    onMouseOut: function (e) {
        var target = Ext.fly(e.getTarget());
        target.removeCls('ux-arrow-over');
    },

    onChangeRegion: function (panel, oldRegion) {
        if (oldRegion) {
            this.removeCls('ux-arrow-current-' + oldRegion);
        }
        this.addCls('ux-arrow-current-' + panel.region);

    }
});