extjs4动态加载panel|Extjs4动态加载Panel内的组件实例

时间:2018-10-15  来源:extjs  阅读:


该示例基于Extjs 4.0.7版本。
像下面的代码所示,假如已经有一个Panel组件,然后我们希望这个form类型的Panel能够动态的加载显示不同的Display组件。

1. Web端代码

下面的代码截取关键部分显示:

 代码如下 }, {
    region: "west",
    id: "overviewPropertyPanel",
    xtype: "form",
    margins: "0 5 0 0",
    bodyPadding: 10,
    width: 280,
    layout: "anchor",
     
    // The form will submit an AJAX request to this URL when submitted
    url: "Overview",
    reader: Ext.create("Ext.data.reader.Json", {
        model: "OverviewProperties"
    }),
     
    defaults: {
        anchor: "100%",
        xtype: "displayfield",
        labelWidth: 120,
        style: {
            "font-weight": "bold",
            "font-family": "Arial"
        },
        fieldStyle: {
            "font-weight": "bold",
            "font-family": "Arial"
        }
    },
    loader: {
        url: "Overview",
        renderer: "component",
        listeners: {
            "beforeload": function() {
                Ext.getCmp("overviewPropertyPanel").removeAll();
            }
        }
    }
}, {


首先动态加载的组件有很多是通用的参数,如css等,可以将其提出放到Panel的defaults参数中,然后增加一个loader参数。loader里重要的参数介绍如下:
url: 获取数据的路径
renderer: 加载的内容的类型,有html、data、component三种。其中component对应Ext.Component组件
autoLoad: 是否自动加载
baseParams: 可以定义Request参数,每一次请求都会附带上该参数,并且不会被load方法里的params里的参数覆盖
callback: 回调函数
failure: 加载数据失败的回调函数
success: 加载数据成功的回调函数
loadMask: 加载的时候是否显示Mask
listeners: 事件(beforeload, exception, load)
上面的代码中会通过’beforeload’事件在加载新的组件之前将之前的组件全部清除掉。

可以通过下面的方法让Panel执行加载操作:

 代码如下

Ext.getCmp("overviewPropertyPanel").load({          //property from update
    method: "GET",
    params: {
        nodeId: getCurrentNodeId(),
        param: "property"
    }
});

后台代码

 代码如下

JSONArray dataArray = new JSONArray();
 
//DisplayField 1
JSONObject invNumObj = new JSONObject();
invNumObj.put("fieldLabel", "DisplayLabel 1");
invNumObj.put("name", "display1");
dataArray.add(invNumObj);
     
//DisplayField 2
JSONObject normalNumObj = new JSONObject();
normalNumObj.put("fieldLabel", "DisplayLabel 2");
normalNumObj.put("name", "display2");
dataArray.add(normalNumObj);
 
return dataArray.toString();

返回给前台的JSON数据为:

 代码如下 [{"fieldLabel":"DisplayLabel 1","name":"display1"},{"fieldLabel":"DisplayLabel 2","name":"display2"}]

这样就可以在前台看到新加载的两个Display组件被顺利加载出来了。
..

extjs4动态加载panel|Extjs4动态加载Panel内的组件实例

http://m.bbyears.com/wangyezhizuo/45081.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新