[ExtJS] tpl的html中放置extjs控件

最新推荐文章于 2021-06-04 05:36:55 发布

原创

最新推荐文章于 2021-06-04 05:36:55 发布 · 4.9k 阅读

收录于

当前文章被以下社区和专栏收录：

本文探讨了在ExtJS开发中如何在tpl模板中创建自定义HTML样式，并实现这些样式元素与ExtJS控件的交互，特别是利用DataView和itemTpl创建的可编辑组件。内容涉及在DataView的模板中嵌入可点击的ExtJS控件，从而实现更灵活的用户界面设计。

在使用ExtJS开发时，有些样式不好写，需要用tpl自己手绘html样式。

但是这些绘制的html，又想要点击可以用extjs控件进行编辑，如下图

这个是用DataView一类，含有tpl（或itemtpl）一类控件绘制的

在进行替换时，主要通过

htmlDom对象.replaceWith(extjs控件.el);
或采用
htmlDom对象.doReplaceWith(extjs控件.element);

For Ex

{
            xtype: 'dataview',
            fullscreen: true,   
            itemsFocusable：false,//重要！ 让dataview里的控件可聚焦
            itemTpl: [
                '<div class="exttext" >点击变成{text}控件</div>',
                '<div class="time">点击变成时间控件{time}</div>'
            ],
            store: [    
               {
                    text: 'extjs',
                    time: new Date()
                },
            ],
            listeners: {
                initialize: function () {

标签