以前没有接触过extjs,现在需要写一个项目,计划使用extjs来写。毕竟页面看起来比较清爽。自己看了2个星期的文档和例子,还是云里雾里。光java配置就弄了4-5天,最后不得已放弃。改为VS2013开发。
第一个成功运行的代码,当然不是Hello Word
Extjs5包里面引用的文件目录:其中icons是从朋友的项目里面复制过来的,ux是从build的子文件夹里面复制出来的。
项目目录:
html 页面代码引用:
Appliction.js 代码:
(function () {
Ext.onReady(function () {
//开启悬浮提示功能
Ext.QuickTips.init();
//开启动态加载
Ext.Loader.setConfig({
enabled: true
});
//创建应用程序的实例
Ext.application({
//设定命名空间
name: 'Lz',
//指定配置选项,设置相应的路径
appFolder: 'Application',
//加载控制器
controllers: ['Systemes.user1'],
//自动加载和实例化Viewport文件
autoCreateViewport: 'Lz.view.Systemes.users1'
});
});
})();
controller层user1.js代码:
Ext.define('Lz.controller.Systemes.user1', {
extend: 'Ext.app.Controller',
//将Viewport.js添加到控制器
views: ['Systemes.users1']
});
view层users1.js代码
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '/Extjs5/ux');
Ext.require([
'Ext.ux.statusbar.StatusBar'
]);
Ext.define('Lz.view.Systemes.users1',{
extend: 'Ext.panel.Panel',
xtype: 'LayoutDefault',
layout: 'border',
items:
[ {
region: 'north',
xtype: 'panel',
height: 80,
style: 'text-align:center;margin:-1px;',
html: '
}, {
region: 'west',
width: 300,
title:'导航栏',
split: true,
collapsible: true
}, {
region: 'center',
xtype: 'tabpanel',
id: 'centerTabPanel',
activeTab: 0,
items: {
title: '我的工作',
icon:'../../../Extjs5/icons/house.png',
layout: 'fit' //自动填充页面
}
},
{
region: 'south',
style: 'margin:-2px',
items: [{
xtype: 'statusbar',
defaultIconCls: 'default-icon',
text: 'Ready',
iconCls: 'Readyicon',
items: [{}, '-', '综合管理系统']
}]
}]
});
最后效果图: