这个例子演示的是怎么从后台取出数据然后将数据显示在xtemplate中
Ext.Ajax.request({
method:'POST',
url:'Index_list.action', //要访问的url地址
params:{'indexId':indexId}, //传递的参数
success: function (data) {
var response = Ext.util.JSON.decode(data.responseText); //action总返回的json的对象
var tpl = new Ext.XTemplate(
'<tpl for="root">', //
'<p>Index Name :{indexName}</p>',
'<p>Once Limit :{once_limit}</p>',
'<p>Cnt Limit :{cnt_limit}</p>',
'<p> Charge :{charge}</p>',
'<input type="button" value="Show Price" onclick="showPanel()"/>', //showPanel()是一个函数
'</tpl>' //可以自己定义
);
tpl.compile();
tpl.overwrite(Ext.getCmp("index_Message").body, response);
}
});
struts.xml中的配置信息
<package name="index" namespace="/" extends="json-default">
<action name="Index_*" class="indexAction" method="{1}">
<result name="success" type="json"></result>
</action>
</package>
Action类里面的方法的执行
public String list() throws IOException
{
PrintWriter out = ServletActionContext.getResponse().getWriter();
list = indexService.list(indexId);
jsonString ="{success:true,root:"+createGridJson()+"}";
out.println(jsonString);
out.flush();
out.close();
return SUCCESS;
}
/**
* @return list
*/
private String createGridJson() {
StringBuffer sb = new StringBuffer();
sb.append("[");
for(int i=0;i<list.size();i++)
{
Object [] o = (Object[]) list.get(i);
sb.append("{indexName:'"+o[0]+"',");
sb.append("once_limit:"+o[1]+",");
sb.append("cnt_limit:"+o[2]+",");
sb.append("charge:"+o[3]+"},");
}
sb.deleteCharAt(sb.lastIndexOf(","));
sb.append("]");
return sb.toString();
}
这样前台的xtemplate就能显示啦。我这个Action类中写的传递到前台的json对象可能有些麻烦,大家有好的方法和我分享哦,因为我是个新手,知识想把每天自己学习的内容和大家分享一下。
分享到:
相关推荐
通过这些知识点,初学者和有经验的开发者都能掌握在ExtJS中使用XTemplate处理图片的居中和自动缩放。这不仅有助于提升用户体验,也是现代Web开发中的必备技巧。记得实践这些示例,以便更好地理解和运用这些概念。
ExtJS学习
在实际开发中,熟练掌握 `Ext.XTemplate` 的使用能够提高页面的交互性和数据展示效率,使得前端界面更加灵活和智能化。通过合理的模板设计,开发者可以轻松地将后端提供的数据转化为用户友好的界面元素,从而提升...
在Extjs中推荐使用`Ext.onReady`事件来确保页面的DOM完全加载后再执行脚本,这样可以保证脚本执行的正确性。 #### 6. 元素操作与模板 - **DomHelper类**: 提供了一种简洁的方法来创建和操作DOM元素。 - **...
在这个特定的项目中,“Extjs 计算器 javascript计算器”是利用ExtJS的XTemplate功能创建的一个模拟Windows简单计算器的Web应用。XTemplate是ExtJS提供的一种模板引擎,用于动态渲染数据到HTML元素中,使得我们可以...
- **新组件**:ExtJS 2引入了许多新的组件,如Grid、XTemplate、DataView等。 通过以上内容的详细介绍,我们不仅能够了解到ExtJS的基本用法,还能够深入掌握其高级特性,从而更加高效地利用ExtJS进行Web应用的开发...
- 定义一个合计行的模板,可以使用EXTJS的XTemplate。模板中包含合计值的占位符,这些占位符将在数据计算完成后被替换为真实的合计值。 4. **插入合计行到DOM**: - 在自定义View的`onRender`方法中,找到...
- **JavaScript 类的定义**:在 ExtJS 中,可以使用面向对象的方式定义 JavaScript 类,这有助于组织和管理代码。 - **命名空间**:命名空间用于组织代码,避免全局变量冲突。ExtJS 使用命名空间来组织其内部类和...
1. **ExtjsOOP基础**:Ext.js在2.0版本中加强了对面向对象编程的支持,文档中会介绍如何定义JavaScript类,以及如何使用Extjs命名空间和类的继承。这里也会提到Extjs的OOP特性和配置选项的使用方法。 2. **消息框的...
在本说明中,我们将深入探讨ExtJS中的模板(Template)使用,包括其概念、创建方法、以及如何结合代码示例进行实际应用。 一、ExtJS模板简介 在ExtJS中,模板是一种便捷的方式,用于动态生成HTML内容。它们通常与...
- **配置(config)选项**: 详细解释了Extjs中配置选项的作用及使用方式。 - **Ext.apply()和Ext.applyIf()**: 这两个方法用于合并对象属性,是Extjs中常用的设计模式之一。 #### 消息框 消息框是与用户交互的重要...
ExtJS通过Ext.DomHelper类提供了对DOM元素的操作能力,通过Ext.XTemplate类支持模板的使用。这使得动态生成HTML片段和绑定数据变得更加简单高效。 ### 第六部分:格式化 ExtJS通过Ext.util.Format类提供了丰富的...
使用`summaryRenderer`,结合Ext.XTemplate,可以创建包含多个统计信息和格式化的小计行。 总结,ExtJS 4.2的分组小计功能强大且灵活,能有效地帮助开发者构建具有数据分析功能的Web应用。通过理解并熟练运用上述...
在描述中提到的"ExtJS效果Tabs形式"指的是使用ExtJS实现的标签页(Tabs)布局。这种布局方式在Web应用中非常常见,用于组织和展示多个相关的视图或内容区域。在本文中,我们将深入探讨如何使用ExtJS创建和管理标签页...