extjs学习一Panel

官方下载开发包http://www.sencha.com/products/extjs/download/

解压后创建一个web项目，放到tomcat下面，就可以正常访问里面的例子了和api了。

来个最简单的,项目里面我引入了以下文件：

 ux是examples下面的文件夹。

在html页面只需导入以下3个文件就ok，很方便了。在ext加载后调用了一个静态方法。：

<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ext4/resources/css/ext-all.css" />
<script type="text/javascript" src="ext4/bootstrap.js"></script>
<script type="text/javascript" src="ext4/locale/ext-lang-zh_CN.js"></script> 

<script type="text/javascript">
Ext.onReady(function(){ 
	Ext.Msg.alert('标题', '消息内容');
}); 
</script>

 

效果如图：

 

 看看布局，Border Layout这种布局。作为整体的布局使用。

Ext.onReady(function(){ 
    Ext.create('Ext.panel.Panel', {
        width: 400,
        height: 400,
        title: 'Border Layout',
        layout: 'border',
        defaults: {
		    collapsible: true,//可折叠
		    split: true,//可以调整大小
		    bodyStyle: 'padding:15px'
		},
        items: [
	        {title: '北',region:'north',height: 50}
	        ,{title: '南',region:'south',height: 50}
	        ,{title: '西',region:'west',width: 100}
	        ,{title: '东',region:'east',width: 100}
	        ,{title: '中',region:'center'}
        ],
        renderTo: Ext.getBody()
    });
});

 效果如图：

接下来换一个类来创建Ext.container.Viewport ，效果就更灵活了。

Ext.onReady(function() {
	Ext.create('Ext.container.Viewport', {
				title : 'Border Layout',
				layout : 'border',
				defaults : {
					collapsible : true,
					split : true
				},
				items : [{
							border : false,
							collapsible : false,
							split : false,
							html : '<h1 class="x-panel-header">顶部内容</h1>',
							region : 'north',
							margins : '0 0 5 0',
							height : 50
						}, {
							title : '公司描述',
							region : 'south',
							height : 50
						}, {
							title : '导航菜单',
							region : 'west',
							width : 100
						}, {
							title : '暂时没用',
							region : 'east',
							width : 100
						}, {
							title : '内容面板',
							region : 'center'
						}],
				renderTo : Ext.getBody()
			});
});

 可以自适应布局。在换种写法：

Ext.onReady(function(){
    var northPanel = Ext.create('Ext.panel.Panel', {
        title: 'admin系统管理平台',
        border: false,
        collapsible: false,
        split: false,
        region: 'north'
    });
    var southPanel = Ext.create('Ext.panel.Panel', {
        title: '公司描述',
        region: 'south',
        height: 50
    });
    var westPanel = Ext.create('Ext.panel.Panel', {
        title: '导航菜单',
        region: 'west',
		collapsible: true,
		split:true,
        width: 200
    });
    var centerPanel = Ext.create('Ext.panel.Panel', {
        title: '内容显示',
        collapsible: false,
        region: 'center'
    });
    Ext.create('Ext.container.Viewport', {
        title: 'Border Layout',
        layout: 'border',
        items: [northPanel, southPanel, westPanel, centerPanel],
        renderTo: Ext.getBody()
    });
});