iteye_8232
2009-10-21 11:44
浏览 313

EXT tree 增加节点

我写的树当点击右键 然后‘增加子节点’会弹出一个form 然后就进行后台处理 可是这样我的节点插入数据库 只能让tree这个页面刷新一下 新的节点才会显示出来 可以实现页面无刷新就显示吗?
具体代码:
items:[

      {text:'增加下级',handler:function(){//[color=red]右键增加下级的菜单 右键代码已省略[/color]



        var h=window.open([color=red]'addjiedian[/color].jsp?node='+node.id,"","width=300,height=120,toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,left=100,top=100");
        width=screen.width;
        height=screen.height;
        h.moveTo((width-300)/2,(height-120)/2);

}}]

当点击增加下级 就会打开'addjiedian.jsp这个页面 然后在这个页面写form 并提交到后台 这样实现好像不能无刷新 大家有啥好的方法吗
[b]问题补充:[/b]
其实我很想用ext的window弹出 但是我做不到 因为ext的window窗口只会弹出在我刚定义的页面 而我刚定义的页面只是一个viewport的子页面 所以这样window的位置很难看 不会在中间!啊 有好的办法吗
[b]问题补充:[/b]
大家说的自定义window的位置我都试过了 位置是可以更改 但是这个窗口却嵌入到这个页面里面 不会再整个viewport上面 哎 我截个图大家就会明白啦
大家看着窗口的位置 哎 拉不出来的 我搞了三天 最后搞不定 就只好用window.open了
[b]问题补充:[/b]
对啊 我右边就是一个iframe啊 自动嵌套进来的页面 整个框架是一个viewport
这样应该怎么解决啊
[b]问题补充:[/b]
我发一下我的viewport代码 就是整个框架

function fill(){ Ext.MessageBox.alert("回调"); } Ext.onReady( function (){ new Ext.Viewport( { layout:"border", items:[ { title:"南宁供电局企业门户BI管理", width:202, region:"west", collapsible:true, html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="../biManage/tree.jsp"> </iframe>' [color=red]//这个就是左边那棵树 [/color] } , { xtype:"panel", region:"center", items: [{ id:'center1', title:"广西项目", html:'<iframe id="main" name="main" scrolling="auto" frameborder="0" width="100%" height="100%" src="../biManage/ControlNew.jsp" > </iframe>' }] }]}) [color=red]//上面这个就是我右边那么页面[/color] })

[b]问题补充:[/b]
我的窗口位置已经解决啦 现在就是无刷新添加树的问题 大家看我的代码 应该怎么实现 具体代码如下:
items:[

{text:'增加下级',handler:function(){//[color=red]右键增加下级 会弹出一个window然后 将form嵌入到window里面[/color]  var form=new Ext.form.FormPanel({//[color=red]定义一个form 输入节点名称[/color] defaultType:'textfield',

labelAlign:'right',
url:'<%=request.getContextPath()%>/addyezi.do?id='+node.id,

items:[{fieldLabel:'节点名称',name:'nodename'}],
buttons:[{text:'新增',handler:function(){
form.getForm().submit({}}}]
});
var win=new Ext.Window({//[color=red]定义一个弹出window[/color] el:'win',
items:[form]})//[color=red]将form嵌入到这个window里面[/color]
}
添加到数据库什么的 这些都能实现啦!就是ext的无刷新 我还不知道在哪个地方应该怎么添加代码 大家能具体一点吗 我谢谢啦 万分感谢 一点没思路
[b]问题补充:[/b]
阿蔡 我的那个问题已经解决啦 我现在解决的是无刷新问题呀!那个iframe我已经去掉了 不用再考虑这个了 呵呵 帮我解答一下我上面发的那个核心代码 改怎么加代码 变成无刷新 查API 也没头绪

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

15条回答 默认 最新

  • CaiHuajiang 2009-10-21 15:03
    已采纳

    靠,,没法了,,要么就把iframe换掉,,,
    要么就window.open 或者window.showmodaldialog()
    上面不是列出window.open()办法么,,试试吧。
    ext本身不能解决这个问题

    打赏 评论
  • 成尚謙 2009-10-21 11:49

    在树节点的页面定义
    function refreshNode()
    {
    //获取你当前操作的节点,
    node.expand();
    }

    addjiedian.jsp提交成功后返回的页面或者Ajax成功后的处理方法中:
    你提交到后台成功返回的页面中(或者ajax提交成功后的方法中),使用parent.refreshNode();
    //window.close();

    打赏 评论
  • CaiHuajiang 2009-10-21 11:57

    为什么要弹出个新页面,而不用ext的window,这样新页面中查找上个页面的内容几麻烦。。。
    这样,先给树treepanel定义一个id名tp
    这样打开的新页面中在完成提交工作后使用下列语句刷新上个页面的树
    [code="java"]opener.getCmp("tp").root.reload();[/code]
    记住,这个页面也要加入ext的js。

    打赏 评论
  • CaiHuajiang 2009-10-21 12:06
    打赏 评论
  • 成尚謙 2009-10-21 13:45

    [code="java"]

    ...
    /*自己调试,或者写一个函数获取居中的left和top*/
    var left = 300;//左
    var top = 200;//顶

        var cfg = {......};
    var moreInfoWin = new Ext.Window(cfg);
    
    moreInfoWin.on("beforeshow",function(){
        moreInfoWin.setPosition(left,top);                                       
    });
    
    moreInfoWin.show();
    

    ...

    [/code]

    打赏 评论
  • awol2005ex 2009-10-21 14:03

    不用window.open 而用 window.showModalDialog 打开新窗口 ,就能在新窗口调用
    window.dialogArguments 从而调用父窗口的方法来新建节点了

    打赏 评论
  • CaiHuajiang 2009-10-21 14:53

    晕死,怎么会这样,你不会把右边定义成了iframe吧。。。。

    打赏 评论
  • 成尚謙 2009-10-21 17:05

    我不创建树了,看一下我中间的注释,把要的代码放到你的点击树节点的触发函数里面去:
    [code="js"]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    WINDOW
    .newtop{background:url(images/headbg.gif); height:51px; border:1px #99BBE8 solid; margin:5px;} .newtop_log{background-image:url(images/head.gif); background-repeat:no-repeat; width:171px; height:51px; float:left; } .newtop_t{ height:51px; float:left; } .newtop_t01{ padding:16px 0 0 0;text-align:left; width:200px;} .newtop_t01 .title { font-weight:700; color:#153881; font-size:14px;} .newtop_r {float:right; height:51px; text-align:right; width:600px; text-align:left; line-height:51px;} .newtop_r a {color:#153881; font-weight:700; text-decoration:underline;} table,tr,td{ font-size: 12px; color: #3F3F3F; line-height: 150%; } /** *学校基础信息管理菜单树 */ var basicTreeData = [ { id:Ext.id(), text:'学校班级信息管理', href:'xxx', hrefTarget:'main', leaf:true } ]; var basicTree = new Ext.tree.TreePanel({ id:'basicTree', useArrows:false, autoScroll:true, animate:false, enableDD:false, containerScroll: true, border:false, width:250, autoHeight:true, singleExpand:true, loader:new Ext.tree.TreeLoader(), listeners:{ contextmenu : function(node,e){e.preventDefault();} ,click : function(node,e){ /*模仿点击树节点*/ var moreInfoWin = new Ext.Window({ id:'catalogTreeWin', title:"新增节点", html:'表单内容', width:500, height:425, closeAction:"close", plain:false, modal:true, resizable:false, autoScroll:true, border:false }); moreInfoWin.on("beforeshow",function(){ /*你要做的就是设置一个合适的top和left,可以上网找一个求屏幕剧中的top和left的函数*/ var top = 200; var left = 400; /*改变top和left,看看什么位置合适*/ moreInfoWin.setPosition(400,200); }); moreInfoWin.show(); e.preventDefault(); } }, rootVisible : false, root: { expanded:true, text: '学校基础信息管理', draggable:false, id:Ext.id(), children:basicTreeData } }); Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '/plug-in/ext/resources/images/default/s.gif'; var footHtml = '<div style="text-align:center;vertical-align:middle;">主办:广州市教育局&nbsp;&nbsp;&nbsp;承办:广州市教育信息中心&nbsp;广州远程教育中心&nbsp;&nbsp;&nbsp;客户服务邮箱:info@gzedu.com </div>'; Ext.QuickTips.init(); var viewport = new Ext.Viewport({ layout : 'border', border:true, items: [{ id: 'northCmp', xtype:'panel', region : 'north', border:true, layout:'fit', contentEl:'topContext' }, { id: 'westCmp', region: 'west', border: true, width : 250, split : true, minSize: 200, maxSize: 300, xtype : 'panel', title:'管理菜单', collapsible: true, margins:'0 0 0 5', layout:'accordion', layoutConfig:{ animate:true }, items: [{ id:'basic', xtype:'panel', title : '学校基础信息管理', border : false, layout:'fit', items:[basicTree] } ] }, { id: 'centerCmp', region:'center', xtype:'tabpanel', deferredRender:false, autoScroll:true, border:false, bodyBorder:false, activeTab:0, items:[ { xtype:'panel', id:'mainCmp', title:'主界面', contentEl:'mainIframeDiv' } ] }, { id: 'southCmp', region: 'south', title:'版权', border: true, collapsible:true, collapsed:true, height : 80, xtype : 'panel', layout: 'fit', html:footHtml }] }); Ext.get("index").on("click",function(e){ e.preventDefault(); window.location.reload(); }); Ext.get("logout").on("click",function(e){ e.preventDefault(); window.location.href='xxxx'; }); Ext.get("copyright").on("click",function(e){ e.preventDefault(); var southCmp = Ext.getCmp("southCmp"); if(southCmp) southCmp.toggleCollapse(true); }); });

     
    数字校园运营管理平台
    您好!欢迎进入数字校园运营管理平台! 首页 退出 版权
    <div id="toolbar"></div>
    


    [/code]

    打赏 评论
  • 成尚謙 2009-10-21 17:31
    打赏 评论
  • CaiHuajiang 2009-10-21 17:59

    楼上的回答固然好,可惜遗憾的是不能解决楼主的问题。
    因为左边的树也是一个iframe。
    :cry: :cry: :cry:
    到是有个最简单的办法,如果反正弹出页面是要关的话,使用window.showModalDialog()可以使得弹出窗口返回之前,后面的js暂时不会进行,等弹出页面设置了returnValue后,js才继续进行。

    打赏 评论
  • 成尚謙 2009-10-21 18:34

    弹出窗口居中可以与IFRAME无关。
    楼主说的无刷新是什么意思啊?

    打赏 评论
  • 成尚謙 2009-10-21 18:37

    如果你是想不刷新整个页面的话,你用ajax提交树节点的修改请求就可以了:新增按钮的处理函数里面使用ajax提交

    打赏 评论
  • 成尚謙 2009-10-21 19:00

    [code="java"]
    Ext.Ajax.request({
    url : 'addjiedian.jsp',
    disableCaching:true,
    params : formData,
    method : 'POST',
    success : function(response, options){
    var result = Ext.util.JSON.decode(response.responseText);
    if(result.success && result.success == 'true'){
    document.all.indexForm.uType.value = result.data;
    //刷新树操作
    }else{
    msgTip.hide();
    Ext.Msg.alert('提示', result.data);
    }
    },
    failure : function(response,options){
    msgTip.hide();
    Ext.Msg.alert('提示', ' 新增失败 ');
    }
    });
    [/code]

    打赏 评论
  • CaiHuajiang 2009-10-21 19:22

    [quote]帮我解答一下我上面发的那个核心代码 改怎么加代码 变成无刷新 查API 也没头绪 [/quote]

    这个应该不难,我在上面就写了
    找到gridpanel,然后就是
    gridpanel.store.load({
    params:{start:10,limit:20}
    });
    这样显示的就是第10条到30条的记录了。

    打赏 评论
  • CaiHuajiang 2009-10-21 19:23

    看API Ext.data.Store的load()和reload()方法

    打赏 评论

相关推荐 更多相似问题