Ext.Template模板进阶
上一篇说到,模板值有两种定义形式,可以是数组,也可以是JSON对象,先来看看这两种不同定义的实现吧.
1.模板值以数组形式提供:
2.模板值以JSON对象格式提供:
上面两种方式的运行结果都是一样的:
问题深入:从了解Ext.Template到现在,你可能会有这样的想法和尝试--如何在上面这个模板中追加更多的记录?
尝试一:多次使用append方法
运行结果:
发现虽然也实现了追加两条记录,但表头也出现了两次,显然是尝试失败的.
尝试二:
运行结果:
结果是一条记录也没有追加到模板中去,再次尝试失败.那是不是就没有办法实现了呢?当然不是,否则ExtJS中有一个模板类就毫无意义了.
这里就要用到一个更高级的模板类Ext.XTemplate,它的主要配置和用法和Ext.Template基本相同,但它功能更强大.更多关于Ext.XTemplate的知识就不再多说了,先关注解决现在遇到的问题,那上面的问题如何用Ext.XTempladte来实现呢?其实和我们的第二种尝试差不多,把模板定义由Ext.Template换成Ext.XTemplate,用到了<tpl>标签和for循环来实现.
运行结果:
终于成功追加了两条记录了,看来是成功了!
1.模板值以数组形式提供:
2.模板值以JSON对象格式提供:
上面两种方式的运行结果都是一样的:
问题深入:从了解Ext.Template到现在,你可能会有这样的想法和尝试--如何在上面这个模板中追加更多的记录?
尝试一:多次使用append方法
运行结果:
发现虽然也实现了追加两条记录,但表头也出现了两次,显然是尝试失败的.
尝试二:
运行结果:
结果是一条记录也没有追加到模板中去,再次尝试失败.那是不是就没有办法实现了呢?当然不是,否则ExtJS中有一个模板类就毫无意义了.
这里就要用到一个更高级的模板类Ext.XTemplate,它的主要配置和用法和Ext.Template基本相同,但它功能更强大.更多关于Ext.XTemplate的知识就不再多说了,先关注解决现在遇到的问题,那上面的问题如何用Ext.XTempladte来实现呢?其实和我们的第二种尝试差不多,把模板定义由Ext.Template换成Ext.XTemplate,用到了<tpl>标签和for循环来实现.
运行结果:
终于成功追加了两条记录了,看来是成功了!