Dorado 7 : 22.3.2.1 修改视图并添加控件

步骤1:新增并配置Menu控件

双击打开MenuManage.view.xml这个视图文件,在【ViewConfig】节点下的【View】节点下添加一个Menu控件。

设置Menu控件属性如下:

属性
说明
idmenuOper控件的Id

接下来在【menuOper】下新增3个MenuItem,MenuItem1~MenuItem3,分别设置MenuItem的属性如下:

MenuItem
name
caption
icon
tags
MenuItem1menuitemAdd添加同级节点url(>skin>common/icons.gif) -120px -0pxadd
MenuItem2menuitemAddChild添加下级节点url(>skin>common/icons.gif) -120px -0pxaddChild
MenuItem3menuitemDel删除当前节点url(>skin>common/icons.gif) -140px -0pxdel

如下图所示:

 

步骤2:将Menu控件绑定到DataTree

鼠标选中【datatreeMenu】控件,切换到Client Events事件列表,在onContextMenu事件上增加menuOper参数,如下图所示:

在onContextMenu事件编辑区中输入如下代码:

menuOper.show({
     position:{
         left:arg.event.pageX,
         top:arg.event.pageY
     }
});

 

步骤3:添加并配置Container

鼠标展开SplitPanel控件下的MainControl节点下的Container控件下,再添加一个Container控件,将右侧工作区切换到 Layout属性设置区中,将Container控件的Layout属性设置为hbox,并将其移动到FieldSet控件的上方:

 

步骤4:添加并配置Button

接下来在Container中添加4个Button控件,Button1~Button4,分别设置Button的属性如下:

Button
id
caption
icon
tags
Button1buttonAdd添加同级节点url(>skin>common/icons.gif) -120px -0pxadd
Button2buttonAddChild添加下级节点url(>skin>common/icons.gif) -120px -0pxaddChild
Button3buttonDel删除url(>skin>common/icons.gif) -140px -0pxdel
Button4buttonSave保存url(>skin>common/icons.gif) -160px -20px 

 

步骤5:新增并配置UpdateAction

接下来保存数据需要添加UpdateAction控件,在【ViewConfig】节点下的【View】节点下添加UpdateAction控件,设置控件属性如下:

属性
说明
idupdateactionSave控件的Id
dataResolvermenuService#saveAll通过执行menuService这个bean中的saveAll方法对传递到后台的主从表数据进行持久化
executingMessage正在保存...当此Action正在执行时希望系统显示给用户的提示信息
successMessage保存成功!当此Action执行成功之后自动提示的信息。
hotkeyctrl+s执行此Action的热键

然后为UpdateAction添加子节点UpdateItem,绑定需要提交的DataSet数据集:

鼠标选中updateactionSave,在右侧【Dorado7 ToolBox】工作区的【Others】分类下面双击【UpdateItem】,设置属性如下:

属性
说明
dataSetdatasetMenu实现DataSet数据采集

界面如下图所示:

 

步骤6:为buttonSave按钮绑定事件

在点击【buttonSave】控件时需要执行【updateactionSave】操作,因此需要设定按钮属性如下:

属性
说明
actionupdateactionSave通过绑定UpdateAction,点击按钮便执行UpdateAction操作

 

步骤7:利用控件标签为MenuItem和Button控件添加事件

鼠标选中【View】节点,切换到Client Events事件列表,在onReady事件编辑区中输入如下代码:

view.get("^add").addListener("onClick", function(self,arg,datatreeMenu){
    var currentNode = datatreeMenu.get("currentNode");
    if (!currentNode) {
        throw new dorado.Exception("请先点中一个树节点!");
    }
    
    var currentEntity = currentNode.get("data");
    currentEntity.createBrother({
        menuName : "<菜单名称>"
    });
});
view.get("^addChild").addListener("onClick", function(self,arg,datatreeMenu){
    var currentNode = datatreeMenu.get("currentNode");
    if (!currentNode) {
        throw new dorado.Exception("请先点中一个树节点!");
    }
    
    var currentEntity = currentNode.get("data");
    currentNode.expandAsync(function() {
        currentEntity.createChild("slMenuSet", {
            menuName : "<菜单名称>"
        });
    });
});
view.get("^del").addListener("onClick", function(self,arg,datatreeMenu,updateactionSave){
    var currentEntity = datatreeMenu.get("currentEntity");
    if (!currentEntity) {
        throw new dorado.Exception("请先点中一个树节点!");
    }
    currentEntity.remove();
    updateactionSave.execute();
});

到目前为止,View部分设置完毕,接下来需要准备后台服务。

Attachments:

22.3-11.png (image/png)
22.3-12.png (image/png)
22.3-13.png (image/png)
22.3-14.png (image/png)