extjs结合freemarker点击按钮后加载新页面流程

原创

荷秋

发布于 2023-05-23 16:16:27

1.4K0

发布于 2023-05-23 16:16:27

文章被收录于专栏：开发Notes

在freemarker文件中定义一个按钮，并绑定相应的事件处理函数。例如：

<button id="btn-order-detail" onclick="loadOrderDetail()">查看订单详情</button>

这样，在用户点击按钮时，便会调用loadOrderDetail()函数。

在extjs文件中定义loadOrderDetail()函数，并在该函数中向后端程序发送请求，获取订单详细信息。例如：

function loadOrderDetail() {
  var orderId = document.getElementById("order-id").value; // 获取选中订单的编号
  Ext.Ajax.request({
    url: "/api/getOrderDetail",
    method: "POST",
    params: { orderId: orderId },
    callback: function(options, success, response) {
      if (success) {
        var orderDetail = JSON.parse(response.responseText); // 解析订单详细信息
        renderOrderDetail(orderDetail); // 渲染订单详细信息到页面上
      } else {
        console.log("请求失败");
      }
    }
  });
}

其中，Ext.Ajax.request()方法是用于向后端程序发送请求的函数，可以指定请求URL、请求方法、请求参数等。在本例中，请求URL是/api/getOrderDetail，请求方法是POST，并且通过params参数传递了订单编号。当请求完成后，会调用回调函数callback，并根据请求结果进行相应的处理。

在extjs文件中定义renderOrderDetail()函数，并在该函数中将获取到的订单详细信息渲染到页面上。例如：

function renderOrderDetail(orderDetail) {
  var tpl = new Ext.XTemplate(
    '<div>订单编号：{orderId}</div>',
    '<div>客户姓名：{customerName}</div>',
    '<div>订单状态：{orderStatus}</div>'
  );
  var el = Ext.getCmp('order-detail'); // 获取要渲染的位置
  el.update(tpl.apply(orderDetail)); // 渲染订单详细信息
}

其中，Ext.XTemplate()方法是用于定义HTML模板的函数，可以根据需要自由定义模板结构和内容。在本例中，我们定义了一个简单的模板，并利用参数orderDetail将订单详细信息填充到模板中。最后，我们通过Ext.getCmp()方法获取要渲染的位置，并通过el.update()方法将渲染好的HTML代码更新到页面上。

总之，通过以上几个步骤，我们就能够实现在用户点击按钮时加载新页面的功能了。当然，具体的实现方式还需要根据具体业务需求进行调整。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

extjs