extjs中关于itemselector的选取器

最新推荐文章于 2022-11-04 11:18:06 发布

原创最新推荐文章于 2022-11-04 11:18:06 发布 · 8.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#extjs #function #border #layout #dwr

js|--|ext|--|dwr|--|AJAX 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用ExtJS框架实现的人员选择器组件案例，该组件允许从一个包含用户列表的面板中选择用户，并提供了清除选项的功能。此外，还集成了树形菜单来展示部门结构，点击树节点会加载相应的成员列表。

//这只是成型的JavaScript，另外在js中要引用到itemselector相关的js，css，imgs，和下面用到的DWR配置等（略） var window_itemselector; Ext.onReady(function(){ var ds= new Ext.data.Store({ id:'userid', reader:new Ext.data.JsonReader({root:'rows',totalProperty:'totalCount'}, [{name:'userid',type:'string'},{name:'realname',type:'string'}]) }); Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var isForm = new Ext.form.FormPanel({ //title: '这是个测试', width:700, items:[{ xtype:"itemselector", name:"itemselector", //fieldLabel:"选择", hideLabel:true, width:300, height:300, dataFields:["userid", "realname"], toData:[[myuserid, myusername]], valueField:"userid", displayField:"realname", imagePath:"project/frame/resource/images/", toLegend:"已选栏", fromLegend:"可选栏", fromStore:ds, toTBar:[{ text:"清除所有", handler:function(){ var i=isForm.getForm().findField("itemselector"); i.reset.call(i); } }] }] }); var tree = new Ext.tree.TreePanel({ animate : true, enableDD : true, containerScroll : true, rootVisible : true, region : 'west', width : 150, split : true, autoScroll : true, collapseMode : 'mini', border : false, // margins: '5 0 5 5', //异步数据加载 loader: new Ext.tree.TreeLoader({ dataUrl: 'treeData.jsp'//数据来源 }), root: new Ext.tree.AsyncTreeNode({ text: '部门', id: '10000000000000', expanded: true }) }); /////////////////当点击树，可选栏中加载数据 tree.on('click', function(node) { projectDwr.getUsername(node.id,function(a){//数据来源通过DWR与后台交互 ds.loadData({ totalCount : a[0], rows : eval(a[1]) }) }); }); var itlayout = new Ext.Panel({ region : 'center', border : false, layout : 'fit', items : isForm }); var tritlayout = new Ext.Panel({ layout : 'border', border : true, items : [tree, itlayout] }); var windowconfig = { title : '添加人员', width : 600, height : 400, closeAction :'hide', autoScroll : true, //bodyStyle : 'background:white;padding:5px;', layout : 'fit', items : [tritlayout], tbar: ['->',{ text: '保存', id:'saveBtn', cls:'x-btn-text-icon', icon:'images/icons/save.gif', handler: function(){ if(isForm.getForm().isValid()){ itemDwr.insert_user(projectid,isForm.getForm().getValues(true),function(a){ if(a==true){ alert("保存成功") window_itemselector.hide() }else if(a==false){ alert("保存失败") } }) } } },'-',' ',{text:'取消',cls:'x-btn-text-icon',icon:'images/icons/undo.gif',handler:function(){window_itemselector.hide()}}] } window_itemselector = new Ext.Window(windowconfig); // window.show(); if(projectid==""){ Ext.getCmp("saveBtn").disable(); } });