前端之家收集整理的这篇文章主要介绍了
下拉框树形,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
- Ext.require(['Ext.tree.*','Ext.data.*','Ext.window.MessageBox']);
- Ext.define("Ext.ux.comboBoxtree",{
- extend : "Ext.form.field.Picker",requires : ["Ext.tree.Panel"],initComponent : function() {
- var self = this;
- Ext.apply(self,{
- fieldLabel : self.fieldLabel,labelWidth : self.labelWidth
- // pickerAlign : "tl"//悬浮到其上面
- });
- self.callParent();
- },createPicker : function() {
- var self = this;
- var store = Ext.create('Ext.data.TreeStore',{
- proxy : {
- type : 'ajax',?
- url : self.storeUrl
- },sorters : [{
- property : 'leaf',direction : 'ASC'
- },{
- property : 'text',direction : 'ASC'
- }]
- });
- self.picker = new Ext.tree.Panel({
- height : 300,autoScroll : true,floating : true,focusOnToFront : false,shadow : true,ownerCt : this.ownerCt,useArrows : true,store : store,rootVisible : false
- });
- self.picker.on({
- beforehide : function(p) {
- var records = self.picker.getView().getChecked(),names = [];
- Ext.Array.each(records,function(rec) {
- names.push(rec.get('text'));
- });
- // Ext.MessageBox.show({
- // title : 'Selected Nodes',// msg : names.join('<br />'),// icon : Ext.MessageBox.INFO
- // });
- // alert(names.join(','));
- self.setValue(names.join(','));
- p.setVisible(true);// 隐藏树
- }
- });
- return self.picker;
- },alignPicker : function() {
- // override the original method because otherwise the height of
- // the treepanel would be always 0
- var me = this,picker,isAbove,aboveSfx = '-above';
- if (this.isExpanded) {
- picker = me.getPicker();
- if (me.matchFieldWidth) {
- // Auto the height (it will be constrained by min and
- // max width) unless there are no records to display.
- picker.setWidth(me.bodyEl.getWidth());
- }
- if (picker.isFloating()) {
- picker.alignTo(me.inputEl,"",me.pickerOffset);// ""->tl
- // add the {openCls}-above class if the picker was
- // aligned above
- // the field due to hitting the bottom of the viewport
- isAbove = picker.el.getY() < me.inputEl.getY();
- me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls
- + aboveSfx);
- picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls
- + aboveSfx);
- }
- }
- }
- });
- Ext.onReady(function() {
- var com = Ext.create("Ext.ux.comboBoxtree",{
- storeUrl : 'check-nodes.json',width : 270,fieldLabel : '行政区划',labelWidth : 60,renderTo : 'tree-div'
- });
- });
- http://www.sencha.com/forum/showthread.PHP?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList