Question

我设计了一个表单，想要使用tpl文件生成输出。

sench中的所有示例都提供了＆＃34;数据＆＃34;属性预填充了一些json或xml数据以及我们如何使用＆＃34; tpl＆＃34;来渲染。

请参阅代码：

＃

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" rel="stylesheet" />
<script src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>
<script>
Ext.onReady(function () {
    Ext.define("customLink",{
        xtype:"link",
        extend:"Ext.Component",
        tpl:'<div style="margin:40px 40px"><a style="font-size:32px;text-transform: capitalize" href="{url}">{text}</a><div style="margin-top:20px">{paragraph}</div></div>',
        initComponent:function(){
            this.data={
                text:this.text,
                url:this.url,
                paragraph:this.paragraph
            };
            this.callParent(arguments);
        },
        renderTo:Ext.getBody()
    });
    Ext.create("customLink",{"text":"google","url":"http://www.google.com","paragraph":"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."});
});
</script>
</head>
<body>
</body>
</html>

＃

上面的代码将生成带有超链接的标题，后跟段落。

现在如果我想使用带有2个文本字段（一个用于标题，一个用于url）和一个textarea（用于段落）组件的表单提供链接，标题文本和段落。

如何实现这一目标？

Answer 1

您可以使用var formData = form.getForm().getValues()从表单中读取数据并使用link.update(formData)

更新链接

var form = this.up('form');
link.update(form.getForm().getValues());

https://fiddle.sencha.com/#fiddle/189e

如何从表单传递数据并使用ExtJS中的tpl进行解析

＃

＃

1 个答案: