extjs Combox下拉GridPanel菜单
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = wroot+'ext-3.2.0/resources/images/default/s.gif';
//
var data=[['1','非诚勿扰'],['2','让子弹飞'],['3','锦衣卫'],['4','狄仁杰4']];
// 控制gridpanel 列表行 为只能选择一行
var rsm = new Ext.grid.RowSelectionModel({ singleSelect:true });
var store = new Ext.data.Store({
autoDestroy: true,
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'mid'},
{name:'mname'}
])
});
var grid = new Ext.grid.GridPanel({
width:600,
height: 200,
frame: true,
border:true,
//enableHdMenu:false,
store: store,
enableColumnMove:false, //支持列移动
enableColumnResize:true,
autoExpandColumn : true,
trackMouseOver : true,
viewConfig:{
forceFit:true
},
sm:rsm ,
tbar:[{text:'确定一'},'-',new Ext.form.TextField({id: 'paramCnName',width:60}),{text:'查找一'}],
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header:'编号',dataIndex:'mid', sortable: true},
{header:'姓名',dataIndex:'mname', sortable: true}
]),
// 远程数据 才有效果
bbar:new Ext.PagingToolbar({
pageSize:10,
store:store,
displayInfo:true,
displayMsg:'显示第{0} 条 到 {1} 条记录,一共{2}条',
emptyMsg:'无记录'
}),
listeners:{
rowdblclick:function(grid , rowIndex ,e){
showMenu .hide();
var rowOptions = grid.getSelectionModel().getSelections();
for(var i=0; i< rowOptions.length; i++){
var uid = rowOptions[i].get('mid');
var uname = rowOptions[i].get('mname');
comb.setValue(uid);
comb.setRawValue(uname);
}
}
}
});
var showMenu = new Ext.menu.Menu({
items : [grid]
});
var comb = new Ext.form.ComboBox({
renderTo:'combox-panel-grid', /*渲染到一个容器里*/
width:600,
triggerAction: 'all',
typeAhead: true,
lazyRender:true,
editable:true,
emptyText:'请选择...',
valueField: 'mid',
displayField: 'mname',
tpl:'<div id="panel-item"></div>',
mode: 'local',
onSelect:Ext.emptyFn ,
store:new Ext.data.ArrayStore({ fields: ['mid','mname'], data:[[]] }),
listeners:{
expand:function(combo){
//重要
if(this.menu == null) {
this.menu = showMenu;
}
store.load();
this.menu.show(this.el, "tl-bl?");
// this.menu.show(combo.getEl());
}
}
});
});
<div id="combox-panel-grid"></div>
ComboBox组件中实现下拉树效果:
var combtree = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false,
mode: 'local',
triggerAction:'all',
maxHeight: 200,
tpl: "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>",
selectedClass:'',
onSelect:Ext.emptyFn
});
var tree = new Ext.tree.TreePanel({
loader:new Ext.tree.TreeLoader(),
border:false,
root:new Ext.tree.AsyncTreeNode({text: '目录',id:'0'}) ,
listeners:{
beforeload:function(node){
this.loader.dataUrl = '../../nodes.action?ID=' + node.id;
}}
});
tree.on('click',function(node){
combtree.setValue(node.text);
combtree.collapse();
});
combtree.on('expand',function(){
tree.render('tree');
});
combtree.render('combtree');
分享到:
相关推荐
combox下拉树combox下拉树combox下拉树combox下拉树combox下拉树combox下拉树combox下拉树
Combox下拉多值的源码,点击就可以用
Flex ComBox 下拉树功能例子 以及相关代码
可以实现vb的Combox自动下拉,用了别人的代码修改了一下。
VB 实现Combox下拉列表颜色选择控件 ,完美实现,代码完面!!
支持鼠标滚轮的ComBox下拉列表控件.rar
支持鼠标滚轮的ComBox下拉列表控件
C# winform Combox 下拉菜单 DropDownList 下拉选项空白无法显示文本的解决方案
VB增强版ListView ComBox下拉列表控件,属性说明: 1.LVHead:列标题字符串,各列标题间用半角逗号“,”隔开 2.LVWidth:列宽度,也用“,”隔开,数目应与LVHead相同,值的大小取要显示的字符数 3.Style:下列...
一个功能扩展的Combox下拉选项框COMBBOX,扩展后可在下拉框的起始位置显示颜色、图片、字体样式等,很有意思的功能,也比较实用,压缩包内含有控件源代码以及四个使用示例,都可正确编译。
c# datagirdview控件内嵌combox方法与内嵌combox可下拉可编辑与combox加载数据库数据
C# COMBOX 树下拉,多选下拉等功能仅供参考!
unigui自定义下拉combobox完善
对WPF的ComboBox进行了扩展,现在可以在下拉列表中嵌入DataGrid/ListView/ListBox等数据控件,实现了展开后列表的自动选择,自动滚屏,并完全支持数据的绑定操作
可实现combox样式,可自已编辑,一个文本框加下拉
支持TOOLTIP的COMBOX,C#版本(该版本存在一定的问题,请下载资源中的其它相关资源)
本资源为自定义的Combox 多选控件,Combox下拉框下含有CheckBox,可供选择。
使用2个方法: (1) DataGridTemplateColumn (2)DataGridComboBoxColumn。 这两中方法都可以编辑选择的数据,但是推荐使用第一种DataGridTemplateColumn 。
combox 实现搜寻功能combox 实现搜寻功能
中英文可筛选combox 源码注释 可以设置根据DisplayMember筛选或是ValueMember筛选