ext2.0 checkbox樹的擴充套件(支援單選,級聯多選,只選葉子等)
在ext1.x裡,樹是沒有checkbox的, 幸好在2.x版本裡提供了這個功能, 在許多應用裡, 帶有checkbox的樹使用還是很常見的
ext2.x提供了簡單的checkbox實現,但對於一些複雜的需求,如: 級聯多選(選中父結點,自選中其所有子結點和所有父結點) , 單選等等, ext2.x並沒有幫我們實現
還有最難解決的情況, 當樹是非同步的時候, 要想級聯多選, 實現起來有些難度
在此, 通過對ext.tree.treenodeui進行擴充套件,這些問題都得到很好的解決
js**
/**
* @class ext.tree.treechecknodeui
* @extends ext.tree.treenodeui
* * 對 ext.tree.treenodeui 進行checkbox功能的擴充套件,後台返回的結點資訊不用非要包含checked屬性
* * 擴充套件的功能點有：
* 一、支援只對樹的葉子進行選擇
* 只有當返回的樹結點屬性leaf = true 時，結點才有checkbox可選
* 使用時，只需在宣告樹時，加上屬性 onlyleafcheckable: true 既可，預設是false
* * 二、支援對樹的單選
* 只允許選擇乙個結點
* 使用時，只需在宣告樹時，加上屬性 checkmodel: "single" 既可
* * 二、支援對樹的級聯多選
* 當選擇結點時，自動選擇該結點下的所有子結點，以及該結點的所有父結點（根結點除外），特別是支援非同步，當子結點還沒顯示時，會從後台取得子結點，然後將其選中/取消選中
* 使用時，只需在宣告樹時，加上屬性 checkmodel: "cascade" 既可
* * 三、新增"check"事件
* 該事件會在樹結點的checkbox發生改變時觸發
* 使用時，只需給樹註冊事件,如：
* tree.on("check",function(node,checked));
* * 預設情況下，checkmodel為'multiple'，也就是多選，onlyleafcheckable為false，所有結點都可選
* * 使用方法：在loader裡加上 baseattrs: 既可.
* 例如：
* var tree = new ext.tree.treepanel( //新增 uiprovider 屬性
* }),
* root: new ext.tree.asynctreenode()
* });
* tree.on("check",function(node,checked)); //註冊"check"事件
* tree.render();
* */
ext.tree.treechecknodeui = function() ;
ext.extend(ext.tree.treechecknodeui, ext.tree.treenodeui, else
this.elnode = this.wrap.childnodes[0];
this.ctnode = this.wrap.childnodes[1];
var cs = this.elnode.childnodes;
this.indentnode = cs[0];
this.ecnode = cs[1];
this.iconnode = cs[2];
var index = 3;
if(cb)
this.anchor = cs[index];
this.textnode = cs[index].firstchild;
}, // private
check : function(checked) else
n.attributes.checked = checked;
tree.fireevent('check', n, checked);
if(!this.onlyleafcheckable && this.checkmodel == 'cascade')
if( !n.expanded && !n.childrenrendered )
else
}else if(this.checkmodel == 'single')else
this.elnode = this.wrap.childnodes[0];
this.ctnode = this.wrap.childnodes[1];
var cs = this.elnode.childnodes;
this.indentnode = cs[0];
this.ecnode = cs[1];
this.iconnode = cs[2];
var index = 3;
if(cb)
this.anchor = cs[index];
this.textnode = cs[index].firstchild;
},// private
check : function(checked) else
n.attributes.checked = checked;
tree.fireevent('check', n, checked);
if(!this.onlyleafcheckable && this.checkmodel == 'cascade')
if( !n.expanded && !n.childrenrendered )
else
}else if(this.checkmodel == 'single')
}return false;
},togglecheck : function(value)
}});
使用方法都在注釋裡了,應該已經很詳細了,我就不多說了
需要注意的是, 使用例子裡的tree 使用了ext.tree.dwrtreeloader這個擴充套件類,用來載入後台樹結點,這和使用其它的loader沒有區別的,
如果您使用其它的loader, 同樣加上baseattrs: 就行了
對Ext中CheckBox的擴充套件
使用 ext中的 checkbox 時，經常需要隨 form 一起提交，但 checkbox 設定的預設的提交值為 on 或 後台 中需要對字段的提交進行判斷後取值，不符合我們通常的使用習慣，即直接將提交的值轉換為對應的 boolean 型別，為此，特進行擴充套件和封裝，以滿足通過的使用方式，如下 ...
建立帶有checkbox的樹
專案中偶爾會使用ext的一些元件，都是一些簡單的應用，每次寫不免有些浪費時間，自己封裝元件有沒那水準，索性把 記下來，下次出現相同應用場景的時候可以直接拿過來用。使用ext的展現方式 ext.blank image url epstar web swms client resources image...
Ext2 0中的事件
事件在設計模式中觀察者模式的實際執行，對於觀察者模式，我想說幾個特定概念，1 目標 subject,target 1 這是乙個大家都感興趣的物件，他知道他的觀察者，可以有任意多個觀察者觀察同乙個目標 2 提供註冊和刪除觀察者物件的介面 2 觀察者 observer 為那些在目標發生改變時需獲得通知的...