ExtJs6 DataView组件实现日志控制台效果

最新推荐文章于 2023-01-07 10:00:00 发布

seasideX

最新推荐文章于 2023-01-07 10:00:00 发布

阅读量494

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ExtJS6

本文链接：https://blog.youkuaiyun.com/seasidexin/article/details/92795920

ExtJS6 专栏收录该内容

17 篇文章

订阅专栏

近期有实现特定效果的需求，最初考虑使用textarea组件，但它是纯文本，不支持变色和图标功能。而EXT6中的DataView组件非常适合该需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近期，有需求想实现这样一个效果

第一反应是 textarea 但是这个组件是不支持变色和图标功能的，它是个纯文本

EXT6中有个DataView组件非常合适，效果如下

var team = Ext.create({
     xtype: 'dataview',
     fullscreen: true,

     store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Peter',  age: 26  ,color:'style="color:red"' },
            {name: 'Ray',   age: 21 , color:'style="color:green"' },
            {name: 'Egon', age: 24 ,color:'style="color:yellow"' },
            {name: 'Winston', age: 24}
        ]
     },

     itemTpl: '<div {color}>{name} is {age} years old</div>'
 });

 team.getStore().add({
     name: 'Gozer',
     age: 21,
     color:'style="color:blue"'
 });

 team.getStore().getAt(0).set('age', 42);