- 个性化主页设置，左边是一棵树，左边是一个portal.点击树加载到portal中去，实现了与数据库的交互.
- ccom.dzf.indexset = function(config) {
- Ext.apply(this,config);
- this.init();
- };
- Ext.extend(com.dzf.indexset, Ext.util.Observable, {
- init : function() {
- this.createWin();
- },
- createWin : function() {
- var proxy = this;
- var win = new Ext.Window({
- height : 450,
- width : 800,
- items : [{
- xtype : 'tabpanel',
- border : false,
- activeTab : 0,
- defaults : {
- height : 380
- },
- items : [{
- title : '主页设置',
- layout : 'column',
- border : false,
- items : [{
- columnWidth : .2,
- title : '模块列表',
- defaults : {
- height : 380
- },
- items : [this.getTree()]
- }, {
- xtype : 'portal',
- columnWidth : .8,
- id : 'portalset',
- defaults : {
- height : 380
- }
- }]
- }, {
- title : '设置密码'
- }]
- }],
- buttons : [{
- text : '确定',
- handler : function() {
- win.close();
- var portal= Ext.getCmp(proxy.panelid);
- //portal.desto;
- items=portal.items.items[0].destroy();
- // for(var i=0;i<items.length;i++){
- // var p=items[i].items.items;
- // items[i].doLayout();
- for(var j=0;j<p.length;j++){
- count++;
- }
- // }
- // portal.doLayout();
- new com.dzf.index({
- panelid : 'center-panel',
- margins : '35 5 5 5',
- style : 'padding:0px 10px 0px 10px'
- });
- }
- }]
- });
- win.show();
- },
- getTree : function() {
- var tree = new Ext.tree.TreePanel({
- border : false,
- onlyLeafCheckable : false,
- checkModel : "multiple",
- id : 'tree',
- autoScroll : true,
- enableDD : false,
- containerScroll : true,
- rootVisible : false,
- loader : new Ext.tree.DWRTreeLoader({
- dwrCall : indexportalService.getUserModule,
- getParams : function(node) {
- return {};
- },
- baseAttrs : {
- uiProvider : Ext.tree.TreeCheckNodeUI
- }
- }),
- tools : [{
- id : 'refresh',// 根据id的不同会出现不同的按钮
- handler : function() {
- var tree = Ext.getCmp('extExample-tree-checkboxTree');
- tree.root.reload();// 让根节点重新加载
- tree.body.mask('数据加载中……', 'x-mask-loading');// 给tree的body加上蒙版
- tree.root.expand(true, false, function() {
- tree.body.unmask();// 全部展开之后让蒙版消失
- indexportalService.getPortalColumns(com.dzf.indexset.prototype.BuildPortColumn);
- });
- }
- }]
- });
- var root = new Ext.tree.AsyncTreeNode({
- text : '根',
- draggable : false
- });
- tree.setRootNode(root);
- root.expand(true, false, function() {
- indexportalService.getPortalColumns(com.dzf.indexset.prototype.BuildPortColumn);
- });
- // root.loadComplete(true, false, function() {
- // indexportalService.getPortalColumns(com.dzf.indexset.prototype.BuildPortColumn);
- // });
- treeCheckAction = function(node, checked) {
- var id = node.id;
- var title = node.text;
- var portlet = Ext.getCmp(id+"set");
- if (checked) {
- if (portlet) {
- return;
- }
- var count=0;
- var portal= Ext.getCmp("portalset").items.items;
- for(var i=0;i<portal.length;i++){
- var p=portal[i].items.items;
- for(var j=0;j<p.length;j++){
- count++;
- }
- }
- if(count<=4){
- var order = 0;
- var parent = Ext.getCmp("portalcolumn" + node.attributes.userid
- + node.attributes.modulecolumn + "set");
- var panel = new Ext.ux.Portlet({
- id : id+"set",
- title : title
- });
- if (!parent) {
- parent = Ext.getCmp("portalset").items.items[0];
- }
- parent.add(panel);
- parent.doLayout();
- order = parent.items.items.length - 1;
- var params = {
- id : id,
- order : order,
- columnwidth : parent.columnWidth
- };
- indexportalService.savePortlet(params);
- }else{
- node.ui.checkbox.checked = false;
- Ext.MessageBox.alert("提示","你最多能选择5个！")
- }
- } else {
- com.dzf.indexset.prototype.removePorlet(portlet);
- }
- }
- tree.on("check", treeCheckAction, this);
- return tree;
- },
- tools : [{
- id : 'close',
- handler : function(e, target, panel) {
- com.dzf.indexset.prototype.removePorlet(panel);
- }
- }],
- removePorlet : function(panel) {
- // Ext.Msg.confirm('删除模块', '您确认要删除"' + panel.title + '"吗?',
- // function(btn,
- // text) {
- // if (btn == 'yes') {
- var id = panel.id;
- var columnid = panel.ownerCt.id;
- var params = {
- id : id,
- columnid : columnid
- };
- // 发送删除数据的请求
- indexportalService.removePorlet(params, function(data) {
- var json = Ext.util.JSON.decode(data);
- if (json.success) {
- var id = panel.id;
- var parent=panel.ownerCt;
- parent.remove(panel, true);
- parent.doLayout();
- if(id.indexOf("set")>0)
- id=id.substring(0,id.indexOf("set"));
- Ext.getCmp("tree").getNodeById(id).ui.checkbox.checked = false;
- } else {
- Ext.Msg.alert('WebMessage', panel.title + '删除失败！');
- }
- });
- // } else {
- // return;
- // }
- // });
- },
- BuildPortColumn : function(data) {
- var jsonData = Ext.util.JSON.decode(data);
- for (var i = 0; i < jsonData.length; i++) {
- var columnid = jsonData[i].fuserprocolumn_id + "set";
- var columnwidth = jsonData[i].fuserprocolumn_width / 100;
- var portal = Ext.getCmp("portalset");
- var PortalColumn = new Ext.ux.PortalColumn({
- id : columnid,
- columnWidth : columnwidth,
- style : 'padding:10px 0 10px 10px',
- defaults : {
- tools : com.dzf.indexset.prototype.tools,
- height : 60
- }
- });
- portal.add(PortalColumn);
- portal.doLayout();
- }
- indexportalService
- .getPortalPortlet(com.dzf.indexset.prototype.BuildPortletSet);
- },
- BuildPortletSet : function(data) {
- var jsonData = Ext.util.JSON.decode(data);
- for (var i = 0; i < jsonData.length; i++) {
- var columnid = jsonData[i].fuserprocolumn_id + "set";
- var id = jsonData[i].modelcode+"set";
- var title = jsonData[i].modelname;
- var order = jsonData[i].fuserprofile_order;
- var parent = Ext.getCmp(columnid);
- if (!parent) {
- parent = Ext.getCmp("portalset").items.items[0];
- }
- var panel = new Ext.ux.Portlet({
- id : id,
- title : title
- });
- parent.add(panel);
- parent.doLayout();
- if(id.indexOf("set")>0)
- id=id.substring(0,id.indexOf("set"));
- Ext.getCmp("tree").getNodeById(id).ui.checkbox.checked = true;
- }
- }
- })
- protal源码改了下 可以进行移动保存
- Ext.ux.Portlet = Ext.extend(Ext.Panel, {
- anchor : '100%',
- collapsible : true,
- draggable : true,
- cls : 'x-portlet'
- });
- Ext.reg('portlet', Ext.ux.Portlet);
- Ext.ux.PortalColumn = Ext.extend(Ext.Container, {
- layout : 'anchor',
- autoEl : 'div',
- defaultType : 'portlet',
- cls : 'x-portal-column'
- });
- Ext.reg('portalcolumn', Ext.ux.PortalColumn);
- Ext.ux.Portal = Ext.extend(Ext.Panel, {
- layout : 'column',
- autoScroll : true,
- cls : 'x-portal',
- defaultType : 'portalcolumn',
- initComponent : function() {
- Ext.ux.Portal.superclass.initComponent.call(this);
- this.addEvents({
- validatedrop : true,
- beforedragover : true,
- dragover : true,
- beforedrop : true,
- drop : true
- });
- },
- initEvents : function() {
- Ext.ux.Portal.superclass.initEvents.call(this);
- this.dd = new Ext.ux.Portal.DropZone(this,
- this.dropConfig);
- },
- beforeDestroy : function() {
- if (this.dd) {
- this.dd.unreg();
- }
- Ext.ux.Portal.superclass.beforeDestroy.call(this);
- }
- });
- Ext.reg('portal', Ext.ux.Portal);
- Ext.ux.Portal.DropZone = function(portal, cfg) {
- this.portal = portal;
- Ext.dd.ScrollManager.register(portal.body);
- Ext.ux.Portal.DropZone.superclass.constructor.call(this,
- portal.bwrap.dom, cfg);
- portal.body.ddScrollConfig = this.ddScrollConfig;
- };
- Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {
- ddScrollConfig : {
- vthresh : 50,
- hthresh : -1,
- animate : true,
- increment : 200
- },
- createEvent : function(dd, e, data, col, c, pos) {
- return {
- portal : this.portal,
- panel : data.panel,
- columnIndex : col,
- column : c,
- position : pos,
- data : data,
- source : dd,
- rawEvent : e,
- status : this.dropAllowed
- };
- },
- notifyOver : function(dd, e, data) {
- var xy = e.getXY(), portal = this.portal, px = dd.proxy;
- // case column widths
- if (!this.grid) {
- this.grid = this.getGrid();
- }
- // handle case scroll where scrollbars appear during drag
- var cw = portal.body.dom.clientWidth;
- if (!this.lastCW) {
- this.lastCW = cw;
- } else if (this.lastCW != cw) {
- this.lastCW = cw;
- portal.doLayout();
- this.grid = this.getGrid();
- }
- // determine column
- var col = 0, xs = this.grid.columnX, cmatch = false;
- for (var len = xs.length; col < len; col++) {
- if (xy[0] < (xs[col].x + xs[col].w)) {
- cmatch = true;
- break;
- }
- }
- // no match, fix last index
- if (!cmatch) {
- col--;
- }
- // find insert position
- var p, match = false, pos = 0, c = portal.items.itemAt(col), items = c.items.items;
- for (var len = items.length; pos < len; pos++) {
- p = items[pos];
- var h = p.el.getHeight();
- if (h !== 0 && (p.el.getY() + (h / 2)) > xy[1]) {
- match = true;
- break;
- }
- }
- var overEvent = this.createEvent(dd, e, data, col, c, match && p
- ? pos
- : c.items.getCount());
- if (portal.fireEvent('validatedrop', overEvent) !== false
- && portal.fireEvent('beforedragover', overEvent) !== false) {
- // make sure proxy width is fluid
- px.getProxy().setWidth('auto');
- if (p) {
- px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);
- } else {
- px.moveProxy(c.el.dom, null);
- }
- this.lastPos = {
- c : c,
- col : col,
- p : match && p ? pos : false
- };
- this.scrollPos = portal.body.getScroll();
- portal.fireEvent('dragover', overEvent);
- return overEvent.status;;
- } else {
- return overEvent.status;
- }
- },
- notifyOut : function() {
- delete this.grid;
- },
- notifyDrop : function(dd, e, data) {
- delete this.grid;
- if (!this.lastPos) {
- return;
- }
- var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;
- var dropEvent = this.createEvent(dd, e, data, col, c, pos !== false
- ? pos
- : c.items.getCount());
- if (this.portal.fireEvent('validatedrop', dropEvent) !== false
- && this.portal.fireEvent('beforedrop', dropEvent) !== false) {
- dd.proxy.getProxy().remove();
- dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);
- if (pos !== false) {
- c.insert(pos, dd.panel);
- } else {
- c.add(dd.panel);
- }
- /**
- * 取得当前portlet在portal column中的索引
- */
- var index = 0;
- var portletId = dd.panel.id;
- if (pos != false) {
- var portlets = c.items;
- for (var i = 0; i < portlets.length; i++) {
- if (c.items.itemAt(i).id === portletId) {
- index = i;
- break;
- }
- }
- } else {
- if (pos.toString() == '0') {
- index = 0;
- } else {
- index = c.items.length - 1;
- }
- }
- c.doLayout();
- //更新移动后的Portlet
- var params ={
- id : dd.panel.id,
- columnid:c.id,
- forder : index
- };
- indexportalService.movePortlet(params);
- this.portal.fireEvent('drop', dropEvent);
- // scroll position is lost on drop, fix it
- var st = this.scrollPos.top;
- if (st) {
- var d = this.portal.body.dom;
- setTimeout(function() {
- d.scrollTop = st;
- }, 10);
- }
- }
- delete this.lastPos;
- },
- // internal cache of body and column coords
- getGrid : function() {
- var box = this.portal.bwrap.getBox();
- box.columnX = [];
- this.portal.items.each(function(c) {
- box.columnX.push({
- x : c.el.getX(),
- w : c.el.getWidth()
- });
- });
- return box;
- },
- // unregister the dropzone from ScrollManager
- unreg : function() {
- // Ext.dd.ScrollManager.unregister(this.portal.body);
- Ext.ux.Portal.DropZone.superclass.unreg.call(this);
- }
- });
11-17
4345
4345
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
