Extjs407 desktop基础搭建.docx
- 文档编号:29206386
- 上传时间:2023-07-21
- 格式:DOCX
- 页数:19
- 大小:3.65MB
Extjs407 desktop基础搭建.docx
《Extjs407 desktop基础搭建.docx》由会员分享,可在线阅读,更多相关《Extjs407 desktop基础搭建.docx(19页珍藏版)》请在冰豆网上搜索。
Extjs407desktop基础搭建
Extjs4.0.7desktop初级搭建
涉及内容:
1.classes.js的拆分
2.App.js和Settings.js里代码的含义
3.桌面图标的换行
4.一些小小的修改
首先上官网上下载最新版本的Extjs,本次讲解以4.0.7版本为例,下载地址
然后打开myeclipse新建一个webproject工程,这个工程的结构如下
其中core文件夹用于存放desktop的核心代码
css文件夹用于存放样式表
ext文件夹用于存放ext-all.js等
images文件夹用于存放desktop实例中images
modules文件夹用于存放桌面上显示的模块
resources文件夹用于存放desktop实例自带的壁纸文件夹wallpapers和Extjs中resources下的themes文件夹
接下来把App.js,Settings.js和index.jsp(即desktop.html)放在webroot目录下面
一.classes.js的拆分:
首先来看一下index.jsp中的代码
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http:
//www.w3.org/TR/html4/strict.dtd">
--css-->
--basejs-->
--corejs-->
--modulejs-->
--configjs-->
Ext.Loader.setPath({
'Ext.ux.desktop':
'js',
MyDesktop:
''
});
Ext.require('MyDesktop.App');
varmyDesktopApp;
Ext.onReady(function(){
myDesktopApp=newMyDesktop.App();
});
id="poweredby">
其实有了这段代码就算是拆分完了,但是还不够,我们还需要修改两个地方,
1.settings.js中修改
2.App.js中修改
以上两处如果不改当你在桌面上点击右键来改变桌面背景图片时会发生错误。
运行之后的效果图:
如下
二.App.js中部分代码的含义
Ext.define此方法官方给出的解释是用来定义或重写一个类,相当于
接下来看看requires
在实例化MyDesktop.App之前将会加载requires列表里的类,但是我在实际的运行中发现去了这一段也没有什么不妥。
模块初始化,这一段我没什么好说的
接下来
这一段比较关键,这是桌面要加载的模块,一般这的模块都应该存储在数据库中,每次程序启动的时候加载,模块只有从这里加载了,我们在点击桌面上或快捷栏上的图标时才会弹出相应的窗体,在这里加载的模块首先会在开始菜单中显示,要在其他地方如桌面上,快捷栏上显示就要通过其他的配置。
接下来看一下桌面图标的配置
getDesktopConfig这个方法分为三块:
1,.contextMenuItems用来配置桌面上的右键菜单
2.shortcuts用来配置桌面的图标(模块)
3.wallpaper用来配置桌面的起始背景
1,3没什么好说的,看一下shortcuts,发现他是一个store,而我们需要配置的就是这个store中的data数据。
data中的一条数据包含三部分
其中name是要显示在桌面上图标的名字
iconCls指的是图标的样式,这个样式存储在desktop.css中,当然我们也能把它单独的拿出来建立一个新的modules.css放在modules文件夹下,来配置各模块的图标。
.accordion-shortcut{
background-image:
url(../images/im48x48.png);
}
module指的是每个模块的id,不能重
下一个方法是用来配置开始菜单旁边的快捷栏的
主要来看一下这个方法里的quickstart,
这里的name字段将会作为快速启动栏里每个模块的tooltip属性(自我理解)
iconCls也是存放在desktop.css里的图标样式,你也可以把这种样式移植到modules.css中去
.icon-grid{
background-image:
url(../images/grid.png)!
important;
}
module指的也是每个模块的id,不能重
App.js想要说的也就这些东西。
Settings.js其实也没什么好说的,就是用来配置桌面背景的
值得一说的感觉也就是createTree方法中的tree的store的一段代码
用红方框框住的代码真正做程序是可以做成配置的
三.图标换行。
关于各个问题我也在网上不断地查找,找到了很多解决方案,但是把网上的代码原封不动的copy到我的工程中怎么也达不到换行的效果,坑爹呀。
我不知道是大家都行,只有我不行,还是网上一个人写了,大家就盲目的copy,人云亦云的把本有疏漏的东西,说的像是他自己测试了一百遍一样。
要想测试换行,首先我们来改动一些代码
用myeclipse的人都知道选中一行Ctrl+Alt+↓保存,刷新页面,就能看到刚才那个不淡定的桌面
接下来把下面的方法粘贴到core文件夹下的desktop.js中去
initShortcut:
function(){
varbtnHeight=80;
varbtnWidth=80;
varbtnPadding=8;
varcol=null;
varrow=null;
varbottom;
varbodyHeight=Ext.getBody().getHeight();
functioninitColRow(){
col={
index:
1,
x:
btnPadding
};
row={
index:
1,
y:
btnPadding+27
};
}
this.setXY=function(item){
bottom=row.y+btnHeight;
if(bottom>bodyHeight&&bottom>(btnHeight+btnPadding)){
col={
index:
col.index++,
x:
col.x+btnWidth+btnPadding
};
row={
index:
1,
y:
btnPadding+27
};
}
Ext.fly(item).setXY([col.x,row.y]);
row.y=row.y+btnHeight+btnPadding+4;
}
this.handleUpdate=function(){
initColRow();
varitems=Ext.query(".ux-desktop-shortcut");
for(vari=0,len=items.length;i this.setXY(items[i]); } }; this.handleUpdate(); }, 然后把此方法发到createDataView的监听事件中去 createDataView: function(){ varme=this; return{ xtype: 'dataview', overItemCls: 'x-view-over', trackOver: true, itemSelector: me.shortcutItemSelector, store: me.shortcuts, tpl: newExt.XTemplate(me.shortcutTpl), listeners: { resize: function(){ me.initShortcut(); } } }; }, 在App.js初始化的时候也调用一下此方法 修改完之后保存,刷新,发现界面一点变化都没有,这就是网上流传的坑爹版本 网上有另一种版本就是说把this.handleUpdate()改成 Ext.EventManager.onWindowResize(this.handleUpdate,this,{delay: 500}); 针对onWindowResize方法官方的api如下 大概的意思是当浏览器窗体的大小发生改变时触发此事件,此事件默认的提供一个100毫秒的缓冲 当我改完之后,再次刷新页面,发现页面还是没有变化,而且浏览器提示了一个错误 错误提示 之后经过反复的尝试将 改为 保存刷新页面,错误消失,图标换行 至此,图标换行完成。 有兴趣的朋友也可以关注一下onDocumentReady方法,也许你在某些情况下onWindowResize也无法满足图标换行的要求,那你就要试试 onDocumentReady了。 四.一些小小的修改 所谓的修改也就是把桌面融入到chou这个工程中区 1.修改index.jsp(desktop.html) 针对这个文件要修改的就是 可以把它改成 是不是看上去精简了很多呀 2.修改App.js 改成 requires直接去掉 改成 改成 3.接下来是settings.js和其他模块文件 把MyDesktop.都去掉,uses也去掉(或把uses中的MyDesktop.也去掉) 改为 总之就是把所有的MyDesktop都去掉。 最后的页面效果
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Extjs407 desktop基础搭建 desktop 基础 搭建