ExtJS Desktop 开发

Desktop 修改 JS 文件界面显示还是没有改变。不理解 class.js 。无奈使用 FileLocator 查找目录下符合Don Griffin

发现出现在 class.js 文件中。原来这个 class.js 是所有类的发布版本。其他类文件只是源代码而已。

保留 class.js 文件。删除其他类。源程序依然可以运行。

作者使用什么工具打包发布的呢？

使用 Sencha 官方的打包工具。App.jsb3

ExtJS 官方 JS 打包发布工具

1 Sencha SDK Tools

其中包含了 JSBuilder 不过使用 JS 写的

2 JSBuilder jar 命令行下使用

SDK Tools 竟然没有文档，JSBuilder 有一个 Readme 文件可以看看

自己写 js 部署压缩生成工具

将所有 js 文件中的字符串读取出来，去掉注解。追加写到一个 classes.js 文件中。

Ext 3 的引用方式

Ext 3 的 desktop 在 4 的发布版中变成了 sandbox。没有压缩类，需要引用每个需要的 JS

具体开发方法

1 开发阶段

注意 Observable 要抽取出来。原因不明

Ext.Loader.setConfig({

enabled: true

});

//注意 Ext 源代码的加载路径

Ext.Loader.setPath({

'Ext': '/portal-desktop/ext/src',

'Ext.ux.desktop': 'js',//从当前目录寻址，具体问题具体配置，建议全路径寻址

MyDesktop: ''

});

Ext.require('MyDesktop.App');

var myDesktopApp;

Ext.onReady(function () {

myDesktopApp = new MyDesktop.App();

});

</script>

2 部署阶段

将所有 js 合并成一个 classes.js 文件，一次性加载

问题按需加载，为什么初始化页面的时候，会加载所有的 JS

ExtJS 4 按需加载配置

ExtJS 4 加载配置

桌面图标换行

http://www.sqroc.net/extjs_desktop01.html

http://wodexinlihua1.blog.163.com/blog/static/12396810820101131101326393/

http://www.gbsou.com/2011/05/14/6010.html

http://ext.group.iteye.com/group/topic/19906

ext中的那个desktop的demo图标不能自动换行的，这是我参考qwikioffice上的例子，在desktop.js中加入自动换行的代码。
//shortcuts 自动换行
    var btnHeight = 61;
var btnWidth = 64;
var btnPadding = 15;
var col = null;
var row = null;
function initColRow(){
col = {index: 1, x: btnPadding};
row = {index: 1, y: btnPadding};
}
    initColRow();
    function isOverflow(y){
if(y > (Ext.lib.Dom.getViewHeight() - taskbarEl.getHeight())){
return true;
}
return false;
}
this.setXY = function(item){
var bottom = row.y + btnHeight,
overflow = isOverflow(row.y + btnHeight);

if(overflow && bottom > (btnHeight + btnPadding)){
col = {
index: col.index++
, x: col.x + btnWidth + btnPadding
};
row = {
index: 1
, y: btnPadding
};
}

Ext.fly(item).setXY([
col.x
, row.y
]);

row.index++;
row.y = row.y + btnHeight + btnPadding;
};
    this.handleUpdate = function(){
initColRow();
//var items=shortcuts.dom.children;
var items=Ext.query("dt",shortcuts.dom);
for(var i = 0, len = items.length; i < len; i++){
this.setXY(items[i]);
}
}
this.handleUpdate();
Ext.EventManager.onWindowResize(this.handleUpdate, this, {delay:500});
//end shortcuts 自动换行

ExtJs 4 图表换行

init: function() {

this.callParent();

this.initShortcut();

}

注意自定义函数 init 要放在 callParent 的下面。否则页面初始化的时候。没有换行。只有在变换页面高度的时候，才换行。

initShortcut:function(){

//shortcuts 自动换行

var btnHeight = 70;//61

var btnWidth = 64;

var btnPadding = 35;//15

var col = null;

var row = null;

function initColRow(){

col = {

index: 1,

x: btnPadding

};

row = {

index: 1,

y: btnPadding

};

}

initColRow();

function isOverflow(y){

//if(y > (Ext.lib.Dom.getViewHeight() - taskbarEl.getHeight())){

if(y>Ext.get('ext-gen1003').getHeight()-Ext.get('taskbar-1024').getHeight()){

return true;

}

return false;

}

this.setXY = function(item){

var bottom = row.y + btnHeight,

overflow = isOverflow(row.y + btnHeight);

if(overflow && bottom > (btnHeight + btnPadding)){

col = {

index: col.index++,

x: col.x + btnWidth + btnPadding

};

row = {

index: 1,

y: btnPadding

};

}

Ext.fly(item).setXY([

col.x

, row.y

]);

row.index++;

row.y = row.y + btnHeight + btnPadding;

};

this.handleUpdate = function(){

initColRow();

//var items=shortcuts.dom.children;

var items = Ext.query(".ux-desktop-shortcut");

for(var i = 0, len = items.length; i < len; i++){

this.setXY(items[i]);

}

this.handleUpdate();

//每过 500 毫秒重绘页面

Ext.EventManager.onWindowResize(this.handleUpdate, this, {

delay:500

});

//end shortcuts 自动换行

}

桌面图标拖拽

http://blog.csdn.net/ak_ljd/article/details/5768648

Ext.onReady(function() {
var proxy_file = new Ext.dd.DragSource('grid-win-shortcut', { group: 'image' });
var proxy_user = new Ext.dd.DragSource('acc-win-shortcut', { group: 'image' });

            //拖动完成的事件
        proxy_file.afterDragDrop = function(target, e, id) {
                var destEl = Ext.get(id);
                var srcEl = Ext.get(this.getEl());
                var sColor = srcEl.dom.id.split('_')[1];       //得取拖动源id的后面一部分，即proxy_red后面的red
                destEl.dom.style.backgroundColor = sColor; //设置目标id的背景色
            };

proxy_user.afterDragDrop = proxy_file.afterDragDrop; //为其它拖动源赋值同样的事件处理函数

});

动态加载 JS

通过 FireBug 跟踪，发现如下

在 App.html 中声明类加载路径，注意此时没有

Ext.Loader.setPath({ 'Ext': 'ext/src', 'Ext.ux.desktop': 'modules/desktop/js', MyDesktop: 'modules/desktop' });

require 中声明过的 JS，运行时才加载真实的 JS

Ext.require('MyDesktop.App');

更换皮肤

模式对话框，非模式对话框

win = desktop.createWindow({

modal :true,//模式对话框

modal :false,//非模式对话框

module 加载机制

var win = desktop.getWindow('Ansys');//与此 id 无关

---------------------------------------------------------------

win = desktop.createWindow({

id: 'Ansys',//与此 id 无关

---------------------------------------------------------------

Ext.define('MyDesktop.job.Ansys', {

extend: 'Ext.ux.desktop.Module',

requires: [

'Ext.form.Panel'

id:'Ansys-win',//与此 id 有关

---------------------------------------------------------------

Ansys 是 App.js 中的 module: 'Ansys-win'

常见报错总结

设置窗口加载失败

Ext.data.TreeStore is not a constructor

解决：

App.js

requires

'MyDesktop.AccordionWindow',

报错 Ext.FormPanel is not a constructor

没有 requires 引用相应的类库进来

ExtJs 3 和 4 的区别

3 Ext.FormPanel

4 Ext.form.Panel

兼容性调整

开发工程计算模块，涉及到很多表单的制作。发现 FireFox 一切正常。IE 和 Chrome 在反复打开表单后，出现页面死掉的现象。用 Chrome 的调试工具查看。报了一个 debug.js 中的一异常。使用排除法调试:备份现有的代码(直接拷贝备份比新建别名类更快速)保留最原始的代码框架，删除多余的代码。保证程序在不兼容，报错的浏览器下可以运行。然后再一段一段的粘贴回来。粘贴一段，测试一段。直到出现错误位置。用其他组件或者属性配置，替换掉出错的组件。发现是 ComboBox 的问题。仔细看 Doc 和 Examples

发现了两种写法

Doc 写法

var states = Ext.create('Ext.data.Store', {

fields: ['key', 'value'],

data : [

{"key":"AL", "value":"Alabama"},

{"key":"AK", "value":"Alaska"},

{"key":"AZ", "value":"Arizona"}

]

});

// Create the combo box, attached to the states data store

var modelCombo = Ext.create('Ext.form.ComboBox', {

fieldLabel: 'Choose State',

store: states,

queryMode: 'local',

displayField: 'value',

valueField: 'key',

});

Examples 写法

//Simple ComboBox using the data store

Ext.define('modelComboModel', { //注意，这里只是声明，没有实例化。

extend: 'Ext.data.Model',

fields: [

{

type: 'string',

{

type: 'string',

}

]

});

var modelComboStore = Ext.create('Ext.data.Store', {

model:modelComboModel,

data:[{

key:"Mechanical",

value:"Mechanical"

}]

});

var modelCombo = Ext.create('Ext.form.field.ComboBox', {

fieldLabel: '模式',

displayField: 'value',

width: 100,

store: modelComboStore,

queryMode: 'local',

typeAhead: true,

listeners: {

afterRender: function(combo) {

var fv = modelComboStore.getAt(0).get('value');

combo.setValue(fv);

}

});

最后发现 Doc 写法正常，Examples 写法在 IE 和 Chrome 中反复使用出现兼容性 BUG，原因待查

关键问题在于创建了 Ext.data.Model 这个对象或他的子类。其不兼容 IE 和 Chrome，只兼容 FireFox。这个对象在 Store 中被引用。可以用 fields:[] 属性代替。

相同的问题还出现在数据管理模块

ImageModel = Ext.define('ImageModel', {

extend: 'Ext.data.Model',

fields: [

{

{

}]

});

var store = Ext.create('Ext.data.Store', {

// model: 'ImageModel', //去掉 model 属性

fields: ['name', 'url','size','lastmod'],//使用 fields 属性

proxy: {

type: 'ajax',

url: 'data-view.json',

reader: {

type: 'json',

root: 'images'

}

});

store.load();

遨游搜狗出现空白页

FireFox IE 9 正常

原因，代码中出现多余的逗号。FireFox IE 9 以上版本容错性较强，其他浏览器会报错，所以页面空白

var modelCombo = Ext.create('Ext.form.ComboBox', {

fieldLabel: 'Choose State',

store: states,

queryMode: 'local',

displayField: 'value',

valueField: 'key',//多写了一个逗号

});

什么时候 Store.load();

Tree 组件不需要手动 Store.load();

DataView 组件需要手动 Store.load();

如何给右键菜单项增加横线分隔，以表示分组

,'-',

如何理解官方 Desktop 项目发布文件开头包含进来的 Ext.util.Observable

这个文件，在开发过程中没有必要引入进来。因为他已经在 src 那个目录下了。Ext 会根据自己的命名空间，自动加载

问题：官方为什么这么做？

Observable 这个观察者模式是如何工作的？

如何理解 ExtJS MVC

官方 Desktop 桌面背景图片无法自动适应分辨率

在最外层 App.js　getDesktopConfig　函数中添加这样一句话

wallpaper: 'resources/img/wallpapers/desk.jpg',

wallpaperStretch: true

其他参考资料

仔仔细细分析 Ext

参考文章

基于Desktop风格设计的应用框架探索

http://www.iteye.com/topic/140757

在ExtJS的Desktop中加入命令行（改try ruby in your browser的代码）

http://www.iteye.com/topic/234355

基于EXTJS DESKTOP的进销存系统

http://www.iteye.com/topic/410961

组件学习

http://wodexinlihua1.blog.163.com/blog/static/12396810820101131101431426/

http://blog.sina.com.cn/s/blog_4ed18f290100q8dh.html

http://mdqy195905.blog.163.com/blog/static/14431957200911249010911/

posted @ 2011-11-19 19:59 煋火阅读(2029) 评论(0) 收藏举报

刷新页面返回顶部

ExtJS Desktop 开发

公告