`
zuimeitulip
  • 浏览: 58535 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

ExtJs中xtemplate的使用

 
阅读更多

这个例子演示的是怎么从后台取出数据然后将数据显示在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基础学习

    ExtJS学习

    Extjs 计算器 javascript计算器

    用Extjs 的xtemplate写的网页使用计算器 模仿Window的简单计算器,运行index.html可以直接跑

    ExtJs入门实例

    11. ExtJs2.0学习系列(11)--Ext.XTemplate 12. ExtJs2.0学习系列(12)--Ext.TreePanel之第一式 13. ExtJs2.0学习系列(13)--Ext.TreePanel之第二式 14. ExtJs2.0学习系列(14)--Ext.TreePanel之第三式(可增删改的树) 15...

    精通JS脚本之ExtJS框架.part2.rar

    15.5 在IE中使用Firebug 15.5.1 前端调试利器DebugBar 15.5.2 IE下的优秀JavaScript调试工具Companion.JS 15.5.3 DebugBar和Companion.JS的基本操作 15.6 调试技巧 15.6.1 在Firebug中直接调试脚本 15.6.2 ...

    extjsExtjs学习笔记——多个图片XTemplate排版居中,自动缩放处理

    该资源通过一个代码实例授予对Ext处理图片的居中、排版问题陌生的开发人员。适用于初学者和有一定开发基础的人群,文件下载下来就可以用。

    轻松搞定Extjs_原创

    六、Ext.Element类中的动画函数 34 七、小结 35 第六章:元素操作与模板 36 一、重要也不重要的东西 36 二、Ext.DomHelper类 36 三、Ext.XTemplate 38 四、小结 39 第七章:格式化 40 一、用户需要优秀体验的内容 40...

    精通JS脚本之ExtJS框架.part1.rar

    15.5 在IE中使用Firebug 15.5.1 前端调试利器DebugBar 15.5.2 IE下的优秀JavaScript调试工具Companion.JS 15.5.3 DebugBar和Companion.JS的基本操作 15.6 调试技巧 15.6.1 在Firebug中直接调试脚本 15.6.2 ...

    ExtJs4_笔记.docx

    一、ExtJs中的Ajax:Ext.Ajax.request 23 二、元素对象Ajax式更新:Ext.Updater,[已弃用] 29 第四章 Ext.XTemplate 模板 31 一、使用标签tpl和操作符for 33 二、在子模板的范围内访问父元素对象 34 三、数组元素索引...

    ExtJS入门教程(超级详细)

    23、Ext.XTemplate类 ………………… 21 24、Ext.data.Connection类 ……………… 22 25、Ext.Ajax类 ………………………… 22 26、Ext.data.Record类 ………………… 23 27、Ext.data.DataProxy类 …………… 24 28...

    ExtJS 核心的抽奖程序(共享源代码)

    不过多亏ExtJS给我解决了各种难题,让我很快开发出来这套抽奖程序,现在程序圆满完成任务,并且达到了很好的现场气氛,心中很自豪。 由于时间仓促,代码没有布局整理。现在把程序共享出来。有兴趣想玩玩的可以下载...

    Js的MessageBox效果代码

    在opera 里图层不能透明 对于页面内有iframe的也无法使用 在ie里无法遮住select的 MessageBox演示_软件开发网_www.jb51.net   普通演示     回调演示一     回调演示二     回调演示三  ...

    Ext Js权威指南(.zip.001

    1.2.4 在javascript中使用json / 4 1.2.5 在.net中使用json / 8 1.2.6 在java中使用json / 12 1.2.7 更多有关json的信息 / 15 1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...

    基于extjs的.NET3.5控件Coolite 1.0.0.34580(Preview预览版)

    基于extjs的.NET3.5控件Coolite 1.0.0.34580 (Preview预览版), *************************************************** * Version 1.0.0 升级日志 * *************************************************** 1. ...

    ext-locale:Ext JS的轻量级本地化

    另外,它可以在XTemplate中使用,并确保与视图绑定的紧密集成。 当前版本2.5.0的兼容性: Ext JS 6.5.0+ Sencha CMD 6.5+ *需要动态软件包加载器。 *对于旧版本,请尝试使用“旧”代码分支。 示例1-简单字符串...

    Ext 开发指南 学习资料

    10.3. 在form中使用fckeditor 10.4. 健康快乐动起来,fx里的动画效果 10.5. 悄悄的更新网页内容 A. 常见问题乱弹 A.1. ext到底是收费还是免费 A.2. 怎么查看ext2里的api文档 A.3. 如何在页面中引用ext A.3.1. 顺便...

Global site tag (gtag.js) - Google Analytics