hzjxy0624
- 浏览: 13098 次
- 性别:
- 来自: 天津
-
最新评论
-
jiangtao2761：
求此代码JSON格式
[转]Ext4实现combotree -
a3049967：
有没有直接打包的项目可以直接运行的？
[转]Ext4实现combotree
实现代码:
使用方法:
Ext.override(Ext.data.TreeStore, {
load: function(options) {
options = options || {};
options.params = options.params || {};
var me = this,
node = options.node || me.tree.getRootNode(),
root;
// If there is not a node it means the user hasnt defined a rootnode yet. In this case lets just
// create one for them.
if (!node) {
node = me.setRootNode({
expanded: true
});
}
if (me.clearOnLoad) {
node.removeAll(false);
}
Ext.applyIf(options, {
node: node
});
options.params[me.nodeParam] = node ? node.getId() : 'root';
if (node) {
node.set('loading', true);
}
return me.callParent([options]);
}
});
Ext.define('Ext.ux.ComboTree',{
extend : "Ext.form.field.ComboBox",
alias: 'widget.combotree',
requires : ["Ext.tree.Panel"],
initComponent : function() {
var self = this;
self.myValue = '';
Ext.apply(self, {
fieldLabel : self.fieldLabel,
labelWidth : self.labelWidth
});
self.callParent();
},
getValue:function(){
var self = this;
return self.myValue;
},
createPicker : function() {
var self = this;
var store = Ext.create('Ext.data.TreeStore',{
proxy: {
type: 'ajax',
actionMethods:'POST',
url: self.url,
extraParams:{
name:'test',
all:self.all
}
},
listeners:{
load:function(){
self.oldValue = self.myValue.split(',');
self.oldText = self.getRawValue().split(',');
if (self.oldText[0]==''){self.oldText=[]}
if (self.oldValue[0]==''){self.oldValue=[]}
}
}
});
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,
listeners:{
itemclick:function(me, node, index){
if (node.get('checked')!=null){
var checked = !node.get('checked');
if (self.multiple){
node.set('checked',checked);
var records = self.picker.getView().getChecked(), names = [], values = [];
if (self.oldValue.length>0){
names = self.oldText;
values = self.oldValue;
}
Ext.Array.each(records, function(rec) {
var b = true;
for (var i=0;i<self.oldValue.length;i++){
if (self.oldValue<i> == rec.get('id')){
b = false;
break;
}
}
if (b){
names.push(rec.get('text'));
values.push(rec.get('id'));
}
});
}else{
var records = self.picker.getView().getSelectionModel().getSelection()[0], names = [], values = [];
Ext.Array.each(self.picker.getView().getChecked(),function(rec){
rec.set('checked',false);
});
node.set('checked',checked);
if (checked){
names.push(node.get('text'));
values.push(node.get('id'));
}else{
names = [];
values = [];
}
}
self.myValue = values.join(',');
self.setValue(values.join(','));// 显示值
self.setRawValue(names.join(','));// 隐藏值
}
}
},
tbar:[self.textField=Ext.create('Ext.form.field.Text',{
fieldLabel:'筛选',
width:self.width - 95,
labelWidth:40,
listeners:{
scope: this,
specialkey: function(text, e) {
if (e.getKey() == e.ENTER) {
self.reLoad();
}
}
}
}),{
xtype:'button',
// icon:'images/icons/zoom.png',
iconCls:'find',
handler:function(){
self.reLoad();
}
}]
});
return self.picker;
},
reLoad:function(){
var store = this.getPicker().getStore();
store.setProxy({
type: 'ajax',
actionMethods:'POST',
url: this.url,
extraParams:{
name:'test',
all:this.all,
query:this.textField.getValue()
}
});
store.load();
},
alignPicker : function() {
var me = this, picker, isAbove, aboveSfx = '-above';
if (this.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
picker.setWidth(me.bodyEl.getWidth());
}
if (picker.isFloating()) {
picker.alignTo(me.inputEl, "", me.pickerOffset);// ""->tl
isAbove = picker.el.getY() < me.inputEl.getY();
me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls
+ aboveSfx);
picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls
+ aboveSfx);
}
}
},
onTrigger1Click: function() {
this.myText = '';
this.myValue = '';
this.oldValue = [];
this.oldText = [];
this.setValue('');
this.setRawValue('');
var records = this.getPicker().getView().getChecked();
Ext.Array.each(records,function(rec){
rec.set('checked',false);
});
},
displayField: 'text',
editable:false,
queryMode: 'local',
trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
trigger2Cls: Ext.baseCSSPrefix + 'x-form-trigger',
valueField: 'id'
});
使用方法:
Ext.onReady(function(){
var comb = Ext.create('Ext.ux.ComboTree',{
width : 270,
fieldLabel : '行政区划',
url:'getDic', //ajax请求地址
labelWidth : 60,
renderTo:'testDiv',
multiple:true //是否可以多选，默认false
});
});
分享到：
发表评论
相关推荐
【叨、校长】Ext 下拉树插件_ComboTree_xz 是一个基于ExtJS库的扩展组件，用于在用户界面中实现下拉树形选择功能。这个插件将传统的下拉框与树形结构相结合，提供了更加灵活和直观的数据选择方式，尤其适用于需要...
### ExtJs4 实现下拉树选择框 ComboTree #### 概述 在现代Web应用开发中，ExtJS 是一个非常强大的JavaScript库，用于构建复杂的客户端应用程序。它提供了丰富的组件库，使得开发者能够轻松地创建出功能丰富且交互性...
4. **事件处理**：支持多种事件，如选择改变（select）、节点点击（click）、展开/折叠节点（expand/collapse）等，便于实现复杂的业务逻辑。 5. **API接口**：通过ExtJS的API，可以方便地操作Combotree，如刷新...
通过阅读和理解"ComboTree.js"文件的代码，你可以掌握如何在EXT应用程序中实现下拉框显示树形结构的功能，这将对你的EXT开发技能有所提升。同时，也可以根据实际需求调整代码，实现更复杂的交互和定制化功能。
实现这个功能的关键步骤包括以下几个方面： 1. **设置ExtJS库的路径**： 在项目开始前，你需要正确配置ExtJS库的路径，确保所有相关的JavaScript和CSS文件都能被浏览器正确加载。这通常在HTML文件的部分完成，通过...
var combotree = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '选择', store: treeStore, // 假设treeStore是预先配置好的树结构数据 displayField: 'text', valueField: 'id', ...
3. 自定义扩展：说明如何基于ExtJS的源码，为ComboBox和Tree组件添加新的功能或行为，实现combotree。 4. 配置项和事件：列出ComboBox和Tree组件的关键配置项，以及如何监听和处理用户交互事件。 5. 渲染和模板：...
ExtJS 是一个强大的JavaScript应用程序框架，它提供了丰富的用户界面组件，用于构建富客户端应用。...在实际开发中，可以根据具体应用场景选择合适的`xtype`，并根据需要配置其属性和事件，实现丰富的交互效果。
在ExtJS中，下拉树是通过`Ext.form.field.Tree`类实现的，它继承自`Ext.form.field.ComboBox`，增加了树状结构的功能。`ComboTree.js`可能就是实现了这个功能的JavaScript文件，包含了一些定制化的代码或扩展。 ...
4. **实现级联选择** 为了实现级联选择，我们需要定义一个函数`updateCityStore(provinceId)`，当省份被选中后调用此函数来更新城市lovcombo的数据源。 ```javascript function updateCityStore(provinceId) { ...
6、增加combotree对简单数据格式和类标准数据格式的加载，具体参考jquery.easyui.tree.extend.js文件开头说明。 7、修复datagrid.onConfirmEdit事件默认实现bug。 8、增加treegrid.onConfirmEdit事件。 2013-8-12 ...
menu.json json格式数据，模拟从后台返回的json数据 PinyinFilter.js：提供进行拼音过滤所需要的函数 TreeFilter.js：自定义的类，提供树结点的过滤功能（依赖于...comboTreeTest.js：comboTree.html运行用的JS文件