官方下载开发包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()
});
});