Ext JS Kitchen Sink [Learning by doing](1)Basic-Panels&Framed Panel

Ext.onReady(function(){
	//定义模板
	Ext.define('BasicPanels', {
		//创建底层容器
		extend: 'Ext.Container',
		//指定自定义组件的xtype [optional]
		xtype: 'basic-panels',
		width: 660,
		//Ext.container.Container.layout 子组件布局 [required]
		layout: {
			//布局类型：Auto(default) | card | fit | hbox | vbox | anchor | table
			type: 'table',
			//配置Ext.layout.container.Table
			columns: 3,
			tdAttrs: { style: 'padding: 10px;' }
		},
		//默认组件配置
		defaults: {
			//添加边框，丰富界面
			frame: true,
			xtype: 'panel',
			width: 200,
			height: 200,
			bodyPadding: 10
		},
		//初始化组件模板方法
		initComponent: function () {
			this.items = [
				//第一个组件
				{	
					//如果没有指定 xtype, 那么将会使用 defaultType，默认是panel。下同
					//示例文档
					html: mediumText
				},
				//第二个组件
				{
					title: 'Title',
					html: mediumText
				},
				//第三个组件
				{
					title: 'Header Icons',
					tools: [
						//Ext.panel.Tool的type配