实习的第一份工作做得是一个数据分析平台,前端用到了Ext.js,一开始按照w3cSchool的教程学习,发现怎么都出不来界面,也不报错,出来了也都是不正确的显示,后来发现是项目组用的版本太低,3.4版本,在网上找了一些古老的教程,配合着项目组已有的代码,自己摸索学习。
新建一个html的项目,导入样式表和Ext库,分别是:
/resources/css/ext-all-notheme.css
/resource/theme/platform/inuse/platform.css
/resource/theme/user/special.css
/adapter/ext/ext-base.js
/ext-all.js
注意:ext-base.js要在ext-all.js前导入
Ext.js在写前端时感觉虽然界面丑了点,但是真的很迅速。
部分js的代码:
Ext.onReady(function () {
var north = new Ext.Panel({
id:'title',
html : '<div>标题</div>',
bodyStyle: 'background:#222222;padding:20px',
height : 60,
width : 200,
region : 'north',
split : false
});
Ext.onReady()方法将在Ext JS准备好渲染Ext JS元素时调用。
Ext.Panel是Ext JS中用于创建面板的预定义类。
html:要显示的html内容
bodyStyle:该内容的css样式
height、width:高度和宽度
region:该div的定位(south/north/west/center)
draggable:可否拖动
这就是Ext.js的基本使用方式,刚开始接触,一点头绪都没有,慢慢来吧。