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 name="code">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() });});?
?
?