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配置属性,工具类型的渲染,仅仅是图片?
						{ type:'pin' },
						{ type:'refresh' },
						{ type:'search' },
						{ type:'save' }
					],
					html: mediumText
				},
				{
					title: 'Collapsed Panel',
					//下拉,是否可以下拉
					collapsed: false,
					collapsible: true,
					width: 640,
					html: mediumText,
					colspan: 3
				}
			];
			//必须包含一个调用callParent以确保父类的InitComponent方法得到传递参数并被调用
			this.callParent();
		},
		renderTo : Ext.getBody()
	});
	var demo1 = Ext.create('BasicPanels',{});
});

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页