{
 "hidden": false,
 "children": [{
  "configs": {
   "itemId": "module",
   "serverScript": "app.set({\
  nowDateParam: DateUtil.formatDate(new JavaDate())\
});"
  },
  "expanded": true,
  "children": [
   {
    "configs": {"itemId": "bind controls"},
    "expanded": true,
    "children": [
     {
      "configs": {
       "itemId": "sex",
       "allowBlank": "false",
       "createInstance": "false"
      },
      "expanded": true,
      "children": [
       {
        "configs": {
         "itemId": "radio1",
         "boxLabel": "男"
        },
        "expanded": false,
        "children": [],
        "type": "radio"
       },
       {
        "configs": {
         "itemId": "radio2",
         "boxLabel": "女"
        },
        "expanded": false,
        "children": [],
        "type": "radio"
       }
      ],
      "type": "radiogroup"
     },
     {
      "configs": {
       "tagConfigs": "{\
  getTextValue: function() {\
    return '此项可根据业务需要自定义输出。任何控件输出的显示值取自控件的getTextValue和getValue方法(前者优先级更高)。\\
该控件中的方法在表格的tagConfigs中定义。';\
  }\
}",
       "itemId": "demoGrid",
       "createInstance": "false",
       "editable": "true",
       "multiSelect": "true"
      },
      "expanded": true,
      "children": [
       {
        "configs": {
         "itemId": "store",
         "autoLoad": "true",
         "url": "m?xwl=examples/employee/dict-edit/select"
        },
        "expanded": false,
        "children": [],
        "type": "store"
       },
       {
        "configs": {
         "itemId": "tbar",
         "region": "north"
        },
        "expanded": true,
        "children": [
         {
          "configs": {
           "itemId": "newBtn",
           "tooltip": "添加新的记录",
           "text": "添加",
           "iconCls": "record_add_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "Wb.addEdit(app.demoGrid);"}
         },
         {
          "configs": {
           "itemId": "delBtn",
           "tooltip": "删除选择的记录",
           "text": "删除",
           "iconCls": "record_delete_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "Wb.remove(app.demoGrid);"}
         }
        ],
        "type": "toolbar"
       }
      ],
      "type": "grid"
     },
     {
      "configs": {
       "itemId": "datetime1",
       "createInstance": "false"
      },
      "expanded": false,
      "children": [],
      "type": "datetime"
     }
    ],
    "type": "folder"
   },
   {
    "configs": {
     "layout": "fit",
     "itemId": "viewport1"
    },
    "expanded": true,
    "children": [{
     "configs": {"itemId": "tab1"},
     "expanded": true,
     "children": [
      {
       "configs": {
        "itemId": "excelForm",
        "excelForm": "wb/system/excel/demo/form-report.xlsx",
        "bodyStyle": "background-image:url(wb/images/site/bg.gif)",
        "cls": "x-unselectable",
        "title": "表单",
        "iconCls": "db_form_icon"
       },
       "expanded": true,
       "children": [{
        "configs": {
         "isConfig": "true",
         "itemId": "tbar"
        },
        "expanded": true,
        "children": [
         {
          "configs": {
           "itemId": "saveBtn",
           "tooltip": "验证表单数据并提交表单",
           "text": "保存表单",
           "iconCls": "save_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "if (Wb.verify(app.excelForm))\
  Wb.info('数据已经保存。');\
//可以使用Wb.request提交整个panel数据\
// Wb.request({\
//   url: '',\
//   out:app.excelForm,//或使用params:Wb.getValue(app.excelForm)\
//   success: function(resp) {}\
// });"}
         },
         {
          "configs": {
           "itemId": "dynamicLoadBtn",
           "tooltip": "使用代码的方式在运行期加载Excel Form",
           "text": "动态加载",
           "iconCls": "form_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "Wb.loadExcel({\
  container: app.excelForm,\
  file: 'demo/form-report.xlsx',\
  params: {\
    nowDateParam: Wb.format(new Date(), 'Y-m-d')\
  },\
  success: function() {\
    Wb.toast('表单已经被重新加载。');\
  }\
});"}
         },
         {
          "configs": {
           "itemId": "exportBtn",
           "tooltip": "把表单中的数据导出到Excel模板文件",
           "text": "导出表单",
           "iconCls": "file_xls_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "var data = Wb.getValue(app.excelForm); //获取excelForm的所有控件值\
data.nowDateParam = Wb.format(new Date(), 'Y-m-d'); //添加额外的参数\
Wb.getExcel(data, 'demo/form-report.xlsx');"}
         }
        ],
        "type": "toolbar"
       }],
       "type": "panel"
      },
      {
       "configs": {
        "itemId": "excelReport",
        "title": "报表",
        "iconCls": "report_icon",
        "autoScroll": "true"
       },
       "expanded": true,
       "children": [{
        "configs": {
         "isConfig": "true",
         "itemId": "tbar"
        },
        "expanded": true,
        "children": [
         {
          "configs": {
           "itemId": "pushLoadBtn",
           "tooltip": "推送报表数据到服务器并生成报表",
           "text": "推送加载报表",
           "iconCls": "list_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "//发起request请求获得报表数据\
Wb.request({\
  url: 'm?xwl=examples/feature/use-excel/get-data',\
  success: function(resp) {\
    //保存服务器返回的报表数据到客户端以便报表的直接导出\
    app.reportData = Wb.decode(resp.responseText);\
    //生成报表\
    Wb.loadExcel({\
      container: app.excelReport, //填充报表到容器控件\
      file: 'demo/form-report.xlsx', //报表模板文件\
      sheetIndex: 1, //模板文件中的sheet索引号\
      params: app.reportData\
    });\
  }\
});"}
         },
         {
          "configs": {
           "itemId": "pushExportBtn",
           "tooltip": "推送报表数据到服务器并导出报表",
           "text": "推送导出报表",
           "iconCls": "file_xls_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "//发起request请求获得报表数据\
Wb.request({\
  url: 'm?xwl=examples/feature/use-excel/get-data',\
  success: function(resp) {\
    //获得报表数据成功之后，使用推送数据并导出\
    //如果报表的生成非常耗时，可以在查询时把报表数据保存到变量，然后直接推送变量中的数据即可导出报表\
    //Wb.getExcel(app.reportData, 'demo/form-report.xlsx', 1); //app.reportData为查询报表时生成的对象\
    Wb.getExcel(Wb.decode(resp.responseText), 'demo/form-report.xlsx', 1); //1为使用的Sheet索引号\
  }\
});"}
         },
         {
          "configs": {
           "itemId": "item2",
           "text": "-"
          },
          "expanded": false,
          "children": [],
          "type": "item"
         },
         {
          "configs": {
           "itemId": "backLoadBtn",
           "tooltip": "在后台查询数据并生成报表",
           "text": "后台加载报表",
           "iconCls": "dp_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "Wb.request({\
  url: 'm?xwl=examples/feature/use-excel/get-data-report',\
  //params:{},可以在此传递参数实现报表的动态查询\
  success: function(resp) {\
    app.excelReport.update(resp.responseText);\
  }\
});"}
         },
         {
          "configs": {
           "itemId": "backExportBtn",
           "tooltip": "在后台查询数据并导出报表",
           "text": "后台导出报表",
           "iconCls": "file_xls_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "Wb.download('m?xwl=examples/feature/use-excel/get-data-report&download=1');"}
         },
         {
          "configs": {
           "itemId": "item3",
           "text": "-"
          },
          "expanded": false,
          "children": [],
          "type": "item"
         },
         {
          "configs": {
           "itemId": "exportAllBtn",
           "tooltip": "合并导出表单和报表中2个Sheet的数据至1个Excel文件",
           "text": "导出表单和报表",
           "iconCls": "file_xls_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "//app.reportData在pushLoadBtn的click事件中定义\
if (!app.reportData) {\
  Wb.warn('请先点击[' + app.pushLoadBtn.text + ']按钮来加载报表。');\
  return;\
}\
//获取表单的所有参数\
var params = Wb.getValue(app.excelForm);\
//把报表参数加到params\
params.rows = app.reportData.rows;\
Wb.getExcel(params, 'demo/form-report.xlsx');"}
         },
         {
          "configs": {
           "itemId": "printBtn",
           "tooltip": "输出当前的报表至打印机",
           "text": "打印报表",
           "iconCls": "printer_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "Wb.print(app.excelReport);"}
         }
        ],
        "type": "toolbar"
       }],
       "type": "panel"
      },
      {
       "configs": {
        "itemId": "others",
        "defaults": "{\
  margin: 8\
}",
        "title": "其他",
        "iconCls": "list_icon"
       },
       "expanded": true,
       "children": [
        {
         "configs": {
          "itemId": "label1",
          "text": "从客户端提交数据到服务器端并生成Excel文件下载。"
         },
         "expanded": false,
         "children": [],
         "type": "label"
        },
        {
         "configs": {
          "itemId": "downloadBtn",
          "text": "提交数据并下载"
         },
         "expanded": false,
         "children": [],
         "type": "button",
         "events": {"click": "Wb.download('get-excel', {\
  filename: 'filename', //文件名，可选参数\
  title: '标题', //标题，可选参数\
  headers: [{\
    text: 'fieldText1',\
    width: 100,\
    field: 'fieldName1'\
  }, {\
    text: 'fieldText2',\
    width: 200,\
    field: 'fieldName2'\
  }],\
  rows: [{\
    fieldName1: 'foo',\
    fieldName2: 123\
  }, {\
    fieldName1: 'bar',\
    fieldName2: 456\
  }]\
});"}
        }
       ],
       "type": "panel"
      }
     ],
     "type": "tab"
    }],
    "type": "viewport"
   }
  ],
  "type": "module"
 }],
 "roles": {"demo": 1},
 "title": "使用Excel生成表单和报表",
 "iconCls": "",
 "inframe": false,
 "pageLink": ""
}