Tuesday, August 31, 2010 7:07:16 AM
IE, extjs
问题版本： ExtJS 2.2修改了两点：
1. 如果 Menu 的项目太长，出滚动条。
2. 日期选择组件在 IE8 下面有一部分不显示。
代码如下：
Ext.override(Ext.menu.Menu, {
showAt : function(xy, parentMenu, _e) {
this.parentMenu = parentMenu;
if (!this.el) {
this.render();
}
if (_e !== false) {
this.fireEvent("beforeshow", this);
xy = this.el.adjustForConstraints(xy);
}
this.el.setXY(xy);
var maxHeight = Ext.getBody().getHeight() - xy[1];
if (this.el.getHeight() > maxHeight) {
this.el.setHeight(maxHeight);
this.el.applyStyles('overflow-y: auto;');
}
this.el.show();
this.hidden = false;
this.focus();
this.fireEvent("show", this);
},
autoWidth : function() {
if(/^\d+$/.test(this.width + '')) {
this.width += "px";
}
}
});
Tuesday, August 24, 2010 2:24:26 AM
extjs
ExtJS 的组件很丰富，可有时候还是满足不了需求，需要扩展 ExtJS 的组件实现自制组件。
扩展组件的时候，最好给其设置单独的 xtype， 这样就能比较容易的和其他组件集成。
虽说扩展 ExtJS 的组件只不过是用 Ext.extend() 来实现，多少还是有些窍门。
例： 扩展 Ext.Panel，得到名为 MyComponent 的组件。 xtype 设置为 mycomponent。MyComponent = Ext.extend(Ext.Panel, {
initComponent: function(){
Ext.apply(this, {
_name: 'MyComponent' // 非必须，调试时用 console.log 等可显示对象名。
});
this.items = [{
// 如有固定的 items，须在此设定
}];
MyComponent.superclass.initComponent.call(this);
}
});
// 注册 xtype， 此后、只需指定属性 xtype: 'mycomponent' 即可实现组件的延迟渲染。
Ext.reg('mycomponent', MyComponent);
代码解释：１．initComponent 函数组件初始化时执行的函数。不过，这和 new 的时候所执行的 Contructor 有所不同。实际上，从 Component 的 Contructor 到 initComponent 的执行，有一个过程。一些有影响的参数，须在 initComponnt 中设定。
- 有关 Layout 的设置，必须在 initComponent 中实行。
- collapsible 须通过对象属性来设定。如：
items:[{
xtype: 'mycomponent',
collapsible: true
}]
２．Ext.reg调用方法： Ext.reg(xtype字符串， 对象) 。在任意组件中、加入以上 MyComponent 的时候、用 xtype 的方法指定，就能实现迟延渲染。
３．initComponent 内部的 this，是以上 MyComponent 的接口。４．new MyComponent(config) 生成实例之后、initComponent 内部的 this 通过 apply 追加了属性。５．Ext.apply(object1,object2)这是把 object2 合并到 object1。通过这个函数，object2 所持有的属性和方法，全被追加到object1。 同名属性将会被 object2 的属性所覆盖。
※以上文章翻译整理自：
http://djodjo.jp/archives/173
Wednesday, July 14, 2010 8:35:49 AM
extjs, IE
用 ExtJS 做的东西，非常不推荐用 IE 来运行，两大原因： 一是 IE 太慢，二是 IE 不遵守 CSS 标准。
然而有些偏执的用户非要用 IE，那也没办法，只有尽量对应。
以下是几个对应方法：
1. 修改 css 追加
.x-form-field-wrap {position: static;}
.x-form-field-wrap .x-form-trigger {position: static; top: auto; vertical-align: middle;}
.x-form-field-wrap .x-form-twin-triggers .x-form-trigger {position: static; top: auto; vertical-align: middle;}
.ext-strict .ext-ie8 .x-form-text {margin: 1px 0;}
.my-disabled {color:gray;cursor:default;}
.my-disabled .x-form-trigger-over{
background-position:0 0 !important;
border-bottom: 1px solid #B5B8C8;
}
.my-disabled .x-form-trigger-click{
background-position:0 0 !important;
border-bottom: 1px solid #B5B8C8;
}
2. 修改HTML文件头<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
3. 修改 js 文件有些地方不能用 css 解决，只有通过 javascript 来解决，如：
if(Ext.isIE) {
// ... IE 用的代码
} else {
// ... 非 IE 用的代码
}
有些地方需要 js 配合 css 来解决，比如 Combox 或是 Radio 在 disabled 的状态，IE 中控件会“消失”。这时候，需要设置以下属性：
disabledClass: 'my-disabled'
Wednesday, May 26, 2010 2:16:42 AM
extjs
ExtJS 的 PagingToolbar 有 BUG，只好自己解决。
方法：在 store 的 clear 事件中追加更新 PagingToolbar 的代码。
代码：var dataStore = new Ext.data.JsonStore({
// store 属性（省略）
listeners: {
clear: function() {
// 前提：这个 Store 绑定到 gridPanel
if(bbar = gridPanel.getBottomToolbar()) {
bbar.updateInfo();
bbar.afterTextEl.el.innerHTML = '/ 1';
bbar.next.setDisabled(true);
bbar.prev.setDisabled(true);
bbar.first.setDisabled(true);
bbar.last.setDisabled(true);
}
},
}
});
Tuesday, February 16, 2010 8:46:03 AM
extjs
首先，在 css 文件中定义一个类：
.x-grid3-row-hilight {
background: #FFFB6B!important;
border: 1px solid #FA9100;
}
让后在 gird 的 store 的 load 事件中加上着色代码：
var rowIdx = this.find('row_id', '001');
if(rowIdx != -1) {
Ext.fly(gridPanel.getView().getRow(rowIdx)).addClass('x-grid3-row-hilight');
}
以上这段代码实现的功能是查找需要着色的行，然后着色，假设 grid 的名字是 gridPanel。
Tuesday, November 17, 2009 2:12:34 AM
extjs, JavaScript
通常的写法
tbar: [{
... ...
}, {
... ...
}]
这样实现的工具条只有一行。
有时候工具条按钮比较多，一行放不下，需要加行。
简单的做法是：
tbar: new Ext.Panel({
border: false,
items:[{
xtype: 'toolbar',
items: [
... ...
]
}, {
xtype: 'toolbar',
items: [
... ...
]
}, {
xtype: 'toolbar',
items: [
... ...
]
}]
})
Wednesday, September 9, 2009 5:37:11 AM
JavaScript, extjs
在页面的 js 代码最上层，追加以下代码
Ext.override(Ext.form.Field, {
afterRender: function() {
this.initEvents();
this.initValue();
//取得控件的标签
var findLabel = function(field) {
var wrapDiv = null;
var label = null
wrapDiv = field.getEl().up('div.x-form-element');
if(wrapDiv) {
label = wrapDiv.child('label');
if(label) {
return label;
}
}
wrapDiv = field.getEl().up('div.x-form-item');
if(wrapDiv) {
label = wrapDiv.child('label');
}
return label;
}
//给控件追加 QuickTips
if(this.qtip) {
Ext.QuickTips.register({
target: this.getEl(),
title: '',
text: this.qtip,
enabled: true
});
var label = findLabel(this);
if(label) {
Ext.QuickTips.register({
target: label,
title: '',
text: this.qtip,
enabled: true
});
}
}
Ext.form.Field.superclass.afterRender.call(this);
}
});
之后，在生成输入控件的代码中，若有以下属性
qtip: '提示消息'
当鼠标移动到控件上面，提示文字就会显示。
参考：
http://www.yui-ext.com/forum/showthread.php?t=11537
Wednesday, July 8, 2009 4:17:57 AM
extjs
今天去
extjs.com 转了转，发现 ExtJS 3.0 已经正式释出。新版本发布的动静似乎很小，若不是首页上的这行字： Make an impact: Ext Js 3.0 is here ，我还看不出发布的样子。刚开始还不能确认是否正式发布，转到到下载页面，看到 Ext Js 3.0.0 后面有这行字：Released on July 6th, 2009. 才确信。
从今以后，就用这个版本了。
Wednesday, June 10, 2009 1:24:37 AM
JavaScript, function, extjs
方法一： 自己做递归函数function findChildRecursively(rootNode, key, value) {
var nodes = rootNode.childNodes;
for(var i = 0; i < nodes.length; i++) {
if(nodes[i].attributes[key] == value){
return nodes[i];
} else {
if(!nodes[i].isLeaf()) {
// 查找结果不包含 Folder 的情况下
continue;
}
if(!nodes[i].isLoaded()) {
//加载子节点，AsyncTreeNode 需要，TreeNode 则不需
nodes[i].reload();
}
if(node = findChildRecursively(nodes[i], key, value)) {
return node;
}
}
}
return null;
}
方法二： 利用现成方法 cascadevar node = null;
rootNode.cascade(function(n) {
if(n.isLeaf() && !n.isLoaded()) {
n.reload();
return true;
}
if(n.attributes[key] == value) {
node = n;
return false;
}
return true;
});
Thursday, April 9, 2009 12:49:03 AM
jQuery, extjs, JavaScript
在网上搜索关键字 “javascript object clone”，可以找到很多实现克隆 Object 的代码，可是据我测试，让人满意的几乎没有。
今天发现 jQuery 的作者 John Resig 给别人的
答复，尝试了一下确实很好用。
方法如下：
// 浅层复制（只复制顶层的非 object 元素）
var newObject = jQuery.extend({}, oldObject);
// 深层复制（一层一层往下复制直到最底层）
var newObject = jQuery.extend(true, {}, oldObject);
测试如下：
var obj1 = {
'a': 's1',
'b': [1,2,3,{'a':'s2'}],
'c': {'a':'s3', 'b': [4,5,6]}
}
var obj2 = $.extend(true, {}, obj1);
obj2.a='s1s1';
obj2.b[0]=100;
obj2.c.b[0]=400;
console.log(obj1);
console.log(obj2);
obj2 内部元素的值改变之后，如果 obj1 的相应值保持不变，就说明复制成功。
ExtJS 也有类似的方法 Ext.apply，因此单独用 ExtJS 应该也能实现同样的功能。
My Opera
