-----------------------------------------------------------------------------------------------------------------------
声明一下下:
由于这些东西是我刚写好就贴上来的,没怎么详细的测试过,有BUG那是必须的,这里仅起到抛砖引玉的作用
如果有什么问题,大家可以联系我 wjm_0729@yahoo.cn 或直接评论, 谢谢!!
文章中后端技术是用的 Nutz http://nutzam.com/ --- 除SSH之外的另一种选择 (打个小广告,哈哈!!)
------------------------------------------------------------------------------------------------------------------------
一个用Tree渲染的Combobox
其实这个是本人在网上看到的,顺便也记录在这里了
配置代码如下:
new Ext.ComboBoxTree({
renderTo:"cbt",
treeUrl:"lib/js/form/ComboBoxTree.json",
editable:false,
rootText:"选择公司",
valueField:"com",
displayField:"_com",
callback:function(id,text){
alert(id);
alert(text);
}
});
源码如下:
/**
* 下拉列表选择树
* <br>
* 依赖EXTJS3版本
* @class Ext.SteelComboTree
* @extends Ext.form.ComboBox
* @author yongtree
*/
Ext.SteelComboTree = Ext.extend(Ext.form.ComboBox, {
/**
* 回调函数,用于传递选择的id,text属性
*
* @type
*/
callback : Ext.emptyFn,
store : new Ext.data.SimpleStore({
fields : [],
data : [[]]
}),
editable : this.editable||false,
mode : 'local',
fieldLabel:this.fieldLabel||"",
emptyText : this.emptyText||"请选择",
allowBlank : this.allowBlank||true,
blankText : this.blankText||"必须输入!",
triggerAction : 'all',
maxHeight : 200,
anchor : '95%',
displayField : 'text',
valueField : 'id',
tpl : '',
selectedClass : '',
onSelect : Ext.emptyFn,
/**
* 根的名字
*
* @type String
*/
rootText : this.rootText||'root',
/**
* 树的请求地址
*
* @type String
*/
treeUrl : this.treeUrl,
tree : null,
initComponent : function() {
this.tpl = "<tpl for='.'><div style='height:200px'><div id='steel-'"+this.getId()+"></div></div></tpl>";
this.tree = new Ext.tree.TreePanel({
height : 200,
scope : this,
autoScroll : true,
split : true,
root : new Ext.tree.AsyncTreeNode({
expanded : true,
id : '_oecp',
text : this.rootText
}),
loader : new Ext.tree.TreeLoader({
url : this.treeUrl
}),
rootVisible : true
});
var c = this;
/**
* 点击选中节点并回调传值
*/
this.tree.on('click', function(node) {
if (node.id != null && node.id != '') {
if (node.id != 'root'){
c.setValue(node.text);
c.callback.call(this, node.id, node.text);
c.collapse();
} else {
Ext.Msg.alert("提示", "此节点无效,请重新选择!")
}
}
})
this.on('expand', function() {
this.tree.render('steel-'+this.getId());
this.tree.expandAll();
});
Ext.SteelComboTree.superclass.initComponent.call(this);
}
});
Ext.reg('steelcombotree', Ext.SteelComboTree);
- 大小: 12.6 KB
分享到:
相关推荐
在给定的标题"封装ElementUI组件el-tree"中,我们聚焦于`el-tree`组件的封装,这通常是为了提高代码复用性、简化使用过程以及统一项目中的样式和行为。 `el-tree`是ElementUI中的树形控件,用于展示层次结构的数据...
- **组件模型**:EXT JS的核心是组件化,它将页面元素抽象为组件,每个组件都有自己的属性、事件和方法,可以灵活组合和扩展。 - **布局管理器**:EXT JS提供了多种布局方式,如Fit、Border、Form、Table等,适应...
- EXT提供了便捷的方法来选择和操作多个DOM节点,增强了对页面元素的控制能力。 #### 2.3 响应事件 - 通过EXT,可以轻松绑定和处理DOM事件,使得响应用户交互更加灵活高效。 ### 使用Widgets #### 3.1 MessageBox ...
vue之封装自己的日历组件-高级篇视频 封装自己的组件
### 中兴PCB元件封装库命名规范-IPC7351 #### 一、概述 本文档详述了中兴通讯股份有限公司发布的《印制电路板设计规范》中关于SMD(Surface Mount Devices,表面贴装元件)元器件封装库的尺寸要求与命名规范。该...
标题中的“Type-C 6pin的硬件封装”指的是USB Type-C接口的一种常见配置,它具有六个引脚。这种接口在现代电子设备中广泛使用,因为它支持数据传输速度高、正反可插,并且能提供电源。USB Type-C的6pin配置通常涉及...
在IT行业中,Vue.js是一个非常流行的...通过这个项目,开发者不仅可以学习到如何利用Vue.js进行组件封装,还能掌握如何集成UI库来优化用户体验,以及如何实现国际化功能。这有助于提升开发者在实际项目中的技能和效率。
Ext 框架的核心组件包括adapter、build、docs、examples、resources、source 等。adapter 负责将里面提供第三方底层库(包括 Ext 自带的底层库)映射为 Ext 所支持的底层库。build 是压缩后的 ext 全部源码。docs 是...
6. **Ext.EventManager, EventObject, CompositeElement, CompositeElementLite**: `EXT核心API详解(五)-Ext.EventManager EventObject CompositeElement CompositeElementLite.txt`阐述了事件管理和复合元素的...
总的来说,"slide-ruler二次封装后的组件"是一个针对原生slide-ruler组件进行定制化开发的产品,它能够更好地适应特定项目的需求,提供更加个性化的用户体验。通过深入理解和利用"csRuler"文件,开发者可以轻松地将...
在给定的文件中,展示了如何利用Element UI库来封装`el-table`和`el-form`组件,这两个组件在管理系统的界面中非常常见,特别是用于数据展示和表单提交。 首先,我们关注`el-form`组件的封装。`el-form`用于创建...
例如,当用户通过前端提交代码更改时,后端可以利用`git_ext`来处理这些更改并更新远程仓库。 ### 总结 `git_ext-0.6.0-py2-none-any.whl`是一个面向Python 2的Git操作库,为开发者提供了一种更便捷的方式来处理...
总结来说,封装`el-pagination`为公用组件涉及的主要步骤有:创建新组件,引入并配置el-pagination,定义并接收props,处理事件,以及设置和使用语言包。通过这种方式,我们可以实现分页组件的复用,同时支持多语言...
"基于element组件库封装的动态表单组件"就是这样一个解决方案,它针对Vue3进行了优化,旨在帮助开发者更方便地创建和管理动态表单。 动态表单是一种能够根据数据结构自动生成表单的组件,通常用于处理复杂的表单...
今天,我们要探讨的是一个名为"abjad-ext-tonality"的Python库,它在PyPI(Python Package Index)官网上可以下载到的最新版本为3.0.0a0,封装在一个名为"abjad-ext-tonality-3.0.0a0.tar.gz"的压缩包中。...
SC-70-6封装,6引脚
### SOT-23-6 封装尺寸详解 #### 一、SOT-23-6 封装概述 SOT-23-6(Small Outline Transistor Package)是一种小型化封装技术,广泛应用于各类电子元件如晶体管、运算放大器等。这种封装形式以其紧凑的设计和良好...
6. **写入文件**:将封装后的视频和音频数据块按照时间顺序写入到FLV文件中。 7. **结束标签**:当所有数据写入后,flv-muxer会添加一个结束标签,标记文件的结束。 通过以上步骤,flv-muxer完成了H.264视频流与...
至于压缩包内的文件" typeC0-6p-chengban",这可能是该USB Type-C母座沉板6P设计的CAD图纸或布局文件,可能包含了详细的电路板布线和组件位置信息,供工程师在实际生产或组装过程中参考使用。 总的来说,这个USB ...