`
shuicao
  • 浏览: 23892 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

ExtJS之XTemplate

阅读更多
使用XTemplate可以自定义输出:
var tp_checkbox = new Ext.XTemplate(
  '<table><tr><td>{head}</td></tr></table>',
  '<table><tr><tpl for="item"><td nowrap="nowrap">',
  '<p>{#}、<input type="checkbox" name="item" value ={.}>{.}</p>',
  '<td>&nbsp&nbsp&nbsp</td>',
  '</td></tpl></tr></table>');

简单运用
new Ext.Panel({
  items : [{
     xtype : 'fieldset',
     layout : 'fit',
     title : '题目',
     autoHeight : true,
     buttonAlign : 'right',
     items : item_grid_onedit,
     buttons : [{
        text : '题目预览',
        handler : function() {
          var data ="{head:'"
                     +lPanel.getForm().getValues()['head'] +"'";
          data = data + ",questionItemTitle:['"
          item_grid_onedit.getStore().each(function(rec) {
             data = data + rec.get('title') + "','";
          });
          data = data.substr(0, data.length - 2);
          data = data + "]}";
          data = Ext.util.JSON.decode(data);
          tp_checkbox.overwrite(previewPanelOnEdit.body, data);
        }
     }]
  }]
});
分享到:
评论

相关推荐

    ExtJS基础学习

    ExtJS学习

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

    在本文中,我们将深入探讨如何使用ExtJS的XTemplate来实现多张图片的居中排版和自动缩放处理。ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和模板功能,帮助开发者构建用户界面。XTemplate是ExtJS中的一个...

    轻松搞定Extjs 带目录

    表格组件GridPanel是Extjs中的亮点之一,它不仅可以展示大量数据,还支持复杂的列模型和行操作。此外,GridPanel的分页功能和扩展组件如摘要行、可展开行、分组视图等,让数据的展示更加直观和易于管理。 通过学习...

    Extjs 计算器 javascript计算器

    在这个特定的项目中,“Extjs 计算器 javascript计算器”是利用ExtJS的XTemplate功能创建的一个模拟Windows简单计算器的Web应用。XTemplate是ExtJS提供的一种模板引擎,用于动态渲染数据到HTML元素中,使得我们可以...

    给Extjs的GridPanel增加“合计”行

    - 定义一个合计行的模板,可以使用EXTJS的XTemplate。模板中包含合计值的占位符,这些占位符将在数据计算完成后被替换为真实的合计值。 4. **插入合计行到DOM**: - 在自定义View的`onRender`方法中,找到...

    Extjs之--带分页的lovcombo控件

    例如,可以使用Ext.XTemplate来定义每个列表项的显示样式。 5. 事件处理:监听LOV Combo的select事件,以便在用户选择值后进行相应的业务处理。 6. CSS样式:在本案例中,lovcombo.css文件可能包含了对LOV Combo...

    轻松搞定Extjs

    - **开始组件学习之旅**: 引导读者进入Extjs组件的学习之旅。 - **被设计得面目全非的按钮**: 介绍了Extjs中按钮组件的灵活性和可定制性。 - **日期选择器Ext.DatePicker**: 详细介绍了日期选择器组件的使用方法,...

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

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    extjs模板的使用

    在 ExtJS 中,模板主要通过 `Ext.XTemplate` 类来实现,它可以将数据对象与预定义的 HTML 结构相结合,生成符合需求的动态 HTML。 1. **基本使用**: - `Ext.XTemplate` 创建模板时,可以使用一对 `&lt;tpl&gt;` 标签...

    Extjs 4.2分组小计

    使用`summaryRenderer`,结合Ext.XTemplate,可以创建包含多个统计信息和格式化的小计行。 总结,ExtJS 4.2的分组小计功能强大且灵活,能有效地帮助开发者构建具有数据分析功能的Web应用。通过理解并熟练运用上述...

    extjs可视化设计器

    5. **模板和样式**:学习EXTJS的模板语言(XTemplate)和CSS样式,定制组件的外观和格式。 6. **导出和导入代码**:知道如何将设计好的界面导出为EXTJS代码,并能将已有的EXTJS代码导入到设计器中进行编辑。 7. **...

    ExtJS中文手册.pdf

    - **新组件**:ExtJS 2引入了许多新的组件,如Grid、XTemplate、DataView等。 通过以上内容的详细介绍,我们不仅能够了解到ExtJS的基本用法,还能够深入掌握其高级特性,从而更加高效地利用ExtJS进行Web应用的开发...

    ExtJS效果Tabs形式

    ExtJS是一种强大的JavaScript框架,主要用于构建富客户端的Web应用程序。在描述中提到的"ExtJS效果Tabs形式"指的是使用ExtJS实现的标签页(Tabs)布局。这种布局方式在Web应用中非常常见,用于组织和展示多个相关的...

    Extjs4下拉菜单ComboBox中用Grid显示通用控件

    tpl: new Ext.XTemplate('&lt;div class="x-boundlist-inner"&gt;', '&lt;tpl for="."&gt;', '&lt;div class="x-boundlist-item"&gt;', '{name}', '&lt;/div&gt;', '&lt;/tpl&gt;', '&lt;/div&gt;'), multiSelect: true, // 多选模式 width: 300 } ...

    ext_image.rar_ext_image_extjs_extjs 4.2 img_extjs image_extjs图片上

    模板(`Ext.XTemplate`或`Ext.util.Format`)则用于格式化和渲染每个图片项的HTML。 图片上传功能通常借助于ExtJS的表单组件(`Ext.form.Panel`)和上传字段(`Ext.form.field.File`)。在ExtJS 4.2中,上传组件...

    extjs多选下拉框

    EXTJS的`XTemplate`可以用来定制显示格式,比如用复选框表示每个选项。 4. **事件处理**:多选下拉框通常需要监听用户的选择行为,如点击选项、全选/全不选等。EXTJS的事件系统(如`select`、`checkchange`等)在...

Global site tag (gtag.js) - Google Analytics