- 浏览: 327439 次
- 性别:
- 来自: 广州
文章分类
最新评论
转: http://www.2cto.com/kf/201206/135007.html
/**
*下拉树类(Jelly)
*/
Ext.define('Redm.commons.TreeCombox', {
extend: 'Ext.form.field.Picker',
xtype: 'treecombox',
triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
config: {
displayField: null,
columns: null,
rootVisible: true,
selectOnTab: true,
firstSelected: false,
maxPickerWidth: 300,
maxPickerHeight: 360,
minPickerHeight: 100
},
editable: false,
initComponent: function() {
var me = this;
me.callParent(arguments);
this.addEvents('select');
me.store.on('load', me.onLoad, me);
},
createPicker: function() {
var me = this,
picker = Ext.create('Ext.tree.Panel', {
store: me.store,
floating: true,
hidden: true,
width: me.maxPickerWidth,
displayField: me.displayField,
columns: me.columns,
maxHeight: me.maxTreeHeight,
shadow: false,
rootVisible: me.rootVisible,
manageHeight: false,
listeners: {
itemclick: Ext.bind(me.onItemClick, me)
},
viewConfig: {
listeners: {
render: function(view) {
view.getEl().on('keypress', me.onPickerKeypress, me);
}
}
}
}),
view = picker.getView();
view.on('render', me.setPickerViewStyles, me);
if (Ext.isIE9 && Ext.isStrict) {
view.on('highlightitem', me.repaintPickerView, me);
view.on('unhighlightitem', me.repaintPickerView, me);
view.on('afteritemexpand', me.repaintPickerView, me);
view.on('afteritemcollapse', me.repaintPickerView, me);
}
return picker;
},
setPickerViewStyles: function(view) {
view.getEl().setStyle({
'min-height': this.minPickerHeight + 'px',
'max-height': this.maxPickerHeight + 'px'
});
},
repaintPickerView: function() {
var style = this.picker.getView().getEl().dom.style;
style.display = style.display;
},
alignPicker: function() {
var me = this,
picker;
if (me.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
picker.setWidth(this.picker.getWidth());
}
if (picker.isFloating()) {
me.doAlign();
}
}
},
onItemClick: function(view, record, node, rowIndex, e) {
this.selectItem(record);
},
onPickerKeypress: function(e, el) {
var key = e.getKey();
if(key === e.ENTER || (key === e.TAB && this.selectOnTab)) {
this.selectItem(this.picker.getSelectionModel().getSelection()[0]);
}
},
selectItem: function(record) {
var me = this;
me.setValue(record.get(this.valueField || 'id'));
me.picker.hide();
me.inputEl.focus();
me.fireEvent('select', me, record)
},
onExpand: function() {
var me = this,
picker = me.picker,
store = picker.store,
value = me.value;
if(value) {
var node = store.getNodeById(value);
if(node)
picker.selectPath(node.getPath());
} else {
var hasOwnProp = me.store.hasOwnProperty('getRootNode');
if(hasOwnProp)
picker.getSelectionModel().select(store.getRootNode());
}
Ext.defer(function() {
picker.getView().focus();
}, 1);
},
setValue: function(value) {
var me = this,record;
me.value = value;
if (me.store.loading) {
return me;
}
try{
var hasOwnProp = me.store.hasOwnProperty('getRootNode');
record = value ? me.store.getNodeById(value) : (hasOwnProp ? me.store.getRootNode() : null);
me.setRawValue(record ? record.get(this.displayField) : '');
}catch(e){
me.setRawValue('');
}
return me;
},
getValue: function() {
return this.value;
},
onLoad: function(store,node,records) {
var value = this.value;
if (value) {
this.setValue(value);
}else{
if(this.firstSelected){
if(records && records.length > 0){
var record = records[0];
this.setValue(record.get(this.valueField));
}
}
}
},
getSubmitData: function() {
var me = this,
data = null;
if (!me.disabled && me.submitValue) {
data = {};
data[me.getName()] = '' + me.getValue();
}
return data;
},
onTriggerClick: function() {
var me = this;
//me.store.load();
if (!me.readOnly && !me.disabled) {
if (me.isExpanded) {
me.collapse();
} else {
me.expand();
}
me.inputEl.focus();
}
}
});
使用示例代码
[javascript]
{
name: 'smallType',
fieldLabel: '小类',
xtype: 'treecombox',
valueField: 'id',
displayField: 'text',
store: Ext.create('Ext.data.TreeStore', {
fields: ['text','id','parentId'],
root: {
text: '所有分类',
id: -1,
expanded: true
},
proxy: {
type: 'ajax',
url: '../../basicdata/doQueryAllps.action'
}
})
}
再来个效果图,下拉树的宽度可以自定义,更改属性 maxPickerWidth即可。
发表评论
-
EasyUI和EasyUI桌面App
2013-04-15 11:56 1101http://fxz-2008.iteye.com/blog/ ... -
Jquery进度条
2013-04-12 09:08 798http://www.cnblogs.com/lhb25/ h ... -
11个适合触摸事件开发的JavaScript库
2013-04-10 09:23 770http://www.codecto.com/2012/08/ ... -
Jquery插件
2013-03-22 18:33 743http://www.cnblogs.com/ywqu/arc ... -
宝贝鱼
2013-03-18 23:54 633http://code.google.com/p/cshbbr ... -
HTML&JS MVC
2013-03-15 16:27 547http://www.bootcss.com/ http:// ... -
浏览器内核及Js引擎介绍
2013-03-15 16:18 699http://wenku.baidu.com/view/623 ... -
EXTJS Demo
2013-03-12 17:19 753http://web230531.host89.chinajs ... -
网站架构和两个3d技术
2013-01-17 16:52 0http://blog.csdn.net/lovingprin ... -
DWR数据反推实例
2013-01-16 16:42 1385http://blog.sina.com.cn/s/blog_ ... -
javascript调用服务端方法
2012-12-17 22:03 902http://www.php100.com/html/webk ... -
DWR推送技术
2012-12-13 16:13 10582DWR2.x的推技术也叫DWR Reverse Ajax(逆向 ... -
wireshark 协议过滤
2012-10-09 11:32 1540http://blog.csdn.net/cumirror/a ... -
一个很不错的Javascript绘图库
2012-09-27 17:18 0http://www.jgraph.com/ http://w ... -
dwr推送数据
2012-09-21 16:59 0Dwr数据推技术:http://blog.csdn.net/k ... -
Extjs4 Css美工相关
2012-09-03 10:39 2948转: http://www.sencha.com/lear ... -
Javascript基础一(apply, call, arguments, prototype)
2012-08-22 22:42 1030//javascript: apply, call, argu ... -
Extjs4的事件实例
2012-08-09 09:11 742http://www.cnblogs.com/luluping ... -
EXTJS中的Store是如何工作的
2012-08-08 21:04 889http://idoa3l3x.blogbus.com/log ... -
Extjs中的设计模式
2012-08-03 23:06 2326ExtJS设计模式 在前 ...
相关推荐
ExtJS4下拉树组件 ExtJS4下拉树组件
extjs下拉树,在网上找了很多,发现bug实在让人头大,干脆自己写了个下拉树组件,功能全面
自定义下拉树,你懂的,内附图和前后台源代码
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
网上搜索了许久未找到...Extjs4.2 带复选框的下拉树,解决了向下勾选子节点、向上勾选父节点,正选反选获取值等问题,勾选的节点显示displayfield值直接显示在下拉文本框中。需要引用ext-all.js和ext-all-neptune.css
下拉框中要添加一项 ’所有‘ ,由于是combox无法使用option
extjs4.2 日期控件扩展,带年月日时分秒的选择。
ExtJs4.2没有直接提供下拉树这个组件,默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 做了一点修改,文件中修改处有注释!
ExtJS4 Grid组件 Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充...
一、Extjs的组件结构远比我们想象的复杂 46 二、组件分类 47 三、组件的生命周期 48 四、组件渲染方法render 50 五、小结 52 第九章:按钮与日期选择器 53 一、开始组件学习之旅 53 二、被设计得面目全非的按钮 53 ...
Ext.PagingToolbar运行时不能动态设置每页条数的功能,此控件就可以实现这些功能,包含下拉选择分页条数和滑动选择分页条数
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
采用Javascript 、Css、Html脚本经典的折叠下拉式菜单。在此供大家参考,若有不足之处希望高手指点!
本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、...
在实践中总结的文档,适用于Ext的初学人群!
2.选中"ExtJS"点击"Add Library",在弹窗中的下拉项中选择"ExtJS" 3.选中"ExtJS"点击"Add File",选择压缩包中的"sdk.jsb3"文件 4.勾选全部组件 5.选中"ExtJS"点击"Default"按钮 恭喜你齐活了,打开js文件或者html...
这个不能用。不要吓。这个不能用。不要吓。
jQuery EasyUI 提供了用于创建跨浏览器网页的完整的组件集合,包括功能强大的 datagrid(数据网格)、treegrid(树形表格)、 panel(面板)、combo(下拉组合)等等。 用户可以组合使用这些组件,也可以单独使用...
Ext.Date是一个单例,封装了一系列日期操作函数,扩展JavaScript Date的功能,下面列出一些常用的功能。 基本函数: Ext.Date.add(date, interval, value) 给date增加或减少时间,这个函数不改变原有Date对象的值,...
7.5.11 树节点:ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器:ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...