Extjs4 实现下拉树
1 楼 gcxyshiyu 2012-04-18 我在弹出窗口中添加此下拉树，第一次打开的时候正常，第二次打开弹出窗口时就下拉树被弹出窗口遮挡了，为什么？ 2 楼 gcxyshiyu 2012-04-18 Ext.require([ 'Ext.tree.*', 'Ext.tip.*', 'Ext.grid.*', 'Ext.toolbar.Paging',
'Ext.util.*', 'Ext.data.*' ]);
var micolor = 'color:blue;';
Ext.onReady(function() {
Ext.QuickTips.init();
var tree = Ext.create('Ext.tree.Panel', {
region : 'west',
store : treeStore,
viewConfig : {
plugins : {
ptype : 'treeviewdragdrop'
}
},
width : 150,
title : '<span style="font-weight:normal">功能菜单</span>',
useArrows : false,
listeners : {
'itemclick' : function(view, record, item, index, e) {
var id = record.get('id');
var text = record.get('text');
var leaf = record.get('leaf');
// xltree.setLocalValue(text, id);
},
scope : this
}
});
// tree.expandAll();
Ext.define('MyData', {
extend : 'Ext.data.Model',
fields : [ 'id', 'name', 'parentId', 'parentName'
// 第一个字段需要指定mapping，其他字段，可以省略掉。
, 'icon', 'url', 'iconCls', {
name : 'sortNo',
type : 'int'
}, 'authority', 'type', 'remark' ]
});
// 创建数据源
var store = Ext.create('Ext.data.Store', {
// 分页大小
pageSize : 5,
model : 'MyData',
// 是否在服务端排序
remoteSort : true,
proxy : {
// 异步获取数据，这里的URL可以改为任何动态页面，只要返回JSON数据即可
type : 'ajax',
url : 'menu!list.action',
reader : {
root : 'items',
totalProperty : 'total'
},
simpleSortMode : true
},
sorters : [ {
// 排序字段。
property : 'sortNo'
// 排序类型，默认为 ASC
// direction : 'DESC'
} ]
});
/** 下拉机构数 */
var xltree = new Ext.ux.TreeComboBox({
fieldLabel : '上级菜单',
name : 'parentName',
id : 'parentName',
anchor : '99%',
blankText : '菜单名称不能为空',
labelStyle : micolor,
allowBlank : false,
callback : function(id, text) {
// 赋值给隐藏域
form.form.findField("parentId").setValue(id);
}
});
// xltree.setLocalValue('2222', '0');
var form = Ext.create('Ext.form.Panel', {
border : false,
bodyPadding : 10,
defaultType : 'textfield',// 设置表单字段的默认类型
bodyStyle : 'padding:5 5 0',// 表单边距
frame : false,
fieldDefaults : {
// labelStyle : 'font-weight:bold',
labelAlign : 'right',
labelWidth : 70
},
defaults : {
margins : '0 0 10 0'
},
items : [ {
id : 'id',
name : 'id',
hidden : true
}, {
// xtype : 'textfield',
fieldLabel : '菜单名称',
blankText : '菜单名称不能为空',
labelStyle : micolor,
allowBlank : false,
name : 'name',
id : 'name',
anchor : '99%'
// width : 225
}, {
id : 'parentId',
name : 'parentId',
hidden : true
}, xltree, /*
* { // xtype : 'textfield', fieldLabel : '上级菜单', blankText :
* '上级菜单名称不能为空', allowBlank : false, labelStyle : micolor,
* name : 'parentName', id : 'parentName', // width : 225
* anchor : '99%' },
*/{
xtype : 'textfield',
fieldLabel : '请求地址',
// blankText : '菜单名称不能为空',
// allowBlank : false,
name : 'url',
id : 'url',
// width : 225
anchor : '99%'
}, {
fieldLabel : '图标CSS类',
name : 'iconCls',
id : 'iconCls',
allowBlank : true,
anchor : '99%'
}, {
fieldLabel : '图标文件',
name : 'icon',
id : 'icon',
allowBlank : true,
anchor : '99%'
}, {
fieldLabel : '备注',
name : 'remark',
id : 'remark',
allowBlank : true,
anchor : '99%'
} ]
});
function createNewWin(config) {
var win = Ext.create('Ext.window.Window', {
width : 420,
height : 285,
title : config.title,
closeAction : 'close',
// closable : false,
layout : 'fit',
modal : true,
plain : true,
resizable : false,
items : form,
buttons : [ {
text : '保存',
handler : function() {
if (form.getForm().isValid()) {
form.getForm().submit({
clientValidation : true,
waitMsg : '请稍后',
waitTitle : '正在验证登录',
url : 'login!login.action',
method : 'post',
success : function(form, action) {
},
failure : function(form, action) {
Ext.Msg.show({
width : 150,
title : "提示",
buttons : Ext.Msg.OK,
msg : action.result.msg,
icon : Ext.Msg.ERROR
})
}
});
}
}
}, {
text : '取消',
handler : function() {
win.close();
}
} ]
});
return win;
}
// 创建多选
var selModel = Ext.create('Ext.selection.CheckboxModel');
// 创建Grid表格组件
var grid = Ext.create('Ext.grid.Panel', {
region : 'center',
title : '<span style="font-weight:normal">菜单信息表</span>',
// width : 300,
// height : 150,
// border:false,
frame : true,
store : store,
selModel : selModel,
columnLines : false,
columns : [/*
* { xtype: 'rownumberer', text: '行号', width: 35 },
*/
{
text : "菜单名称",
width : 120,
dataIndex : 'name',
sortable : false,
flex : 1
}, {
text : "上级菜单名称",
width : 200,
dataIndex : 'parentName',
sortable : false
}, {
text : "请求地址",
width : 100,
dataIndex : 'url',
sortable : true
}, {
text : "菜单图标",
width : 100,
dataIndex : 'cls',
sortable : false
}, {
text : "菜单图标CSS",
width : 100,
dataIndex : 'iconCls',
sortable : true
}, {
text : "备注",
width : 100,
dataIndex : 'remark',
sortable : true
} ],
// 值为TRUE，表示禁止选择
disableSelection : false,
loadMask : true,
viewConfig : {
id : 'gv',
trackOver : false,
stripeRows : true
},
dockedItems : [ {
xtype : 'pagingtoolbar',
store : store,
// same store GridPanel is using
dock : 'bottom',
// 分页 位置
emptyMsg : '没有数据',
displayInfo : true,
displayMsg : '显示 {0} - {1} 条，共计 {2} 条'
// bStr: '每页',
// aStr: '条',p[;l;'
// beforePageText : '第',
// afterPageText : '页/共{0}页'
}, {
xtype : 'toolbar',
items : [ {
// iconCls : 'icon-add',
icon : '/invoicing/images/add.png',
text : '新增',
scope : this,
// 添加
handler : function() {
form.form.reset();
var win = createNewWin({
id : '',
title : '新增菜单'
});
win.show();
}
}, {
// iconCls : 'icon-add',
icon : '/invoicing/images/edit.png',
text : '修改',
scope : this,
// 修改
handler : function() {
var rows = grid.getSelectionModel().getSelection();
if (rows.length == 0) {
wzq.Msg.info("请选择要修改的记录!");
return;
}
var row = rows[0];
form.form.setValues(row.data);
var win = createNewWin({
id : '',
title : '修改菜单'
});
win.show();
}
}, {
// iconCls : 'icon-delete',
icon : '/invoicing/images/delete.png',
text : '删除',
// disabled: true,
itemId : 'delete',
scope : this,
handler : function() {
// var selModel = grid.getSelectionModel();
var selected = grid.getSelectionModel().getSelection();
var Ids = []; // 要删除的id
Ext.each(selected, function(item) {
Ids.push(item.data.id); // id 对应映射字段
})
// alert(Ids);
}
} ]
} ]
// bbar : Ext.create('Ext.PagingToolbar', {
// store : store,
// displayInfo : true,
// displayMsg : '显示 {0} - {1} 条，共计 {2} 条',
// emptyMsg : "没有数据"
// })
});
store.loadPage(1);
/**
* Viewport
*/
Ext.create('Ext.container.Viewport', {
layout : 'border',
items : [ tree, grid ]
});
}); 3 楼 gcxyshiyu 2012-04-18 贴上代码，帮忙看看，我在弹出窗口中添加此下拉树，第一次打开的时候正常，第二次打开弹出窗口时就下拉树被弹出窗口遮挡了，为什么？ 4 楼 gcxyshiyu 2012-04-18 点击第一次正常，点击第二次就被遮挡了 5 楼 haige409 2012-04-28 //赋值给隐藏域
T_RY_NEW_FORM.getForm().findField("BMJGDM").setValue(id);
大哥能不能写完整点？上面的东东是从哪冒出来的 6 楼 a3049967 2012-06-26 我在弹出窗口中添加此下拉树，第一次打开的时候正常，第二次打开弹出窗口时就下拉树被弹出窗口遮挡了，为什么？