如何在 Ext.grid.panel 中定义视图

Posted 2023-02-26

【中文标题】如何在 Ext.grid.panel 中定义视图

【英文标题】：How to define view in Ext.grid.panel

【发布时间】：2013-03-22 11:26:16

【问题描述】：

我想修改网格的视图，我从基础开始（即在我定义自己的视图之前）。但是有些我什至无法将对象分配给视图属性。 请问，有人知道如何创建视图吗？我试过了。

例子会很棒。

var viewConfig = emptyText: "My msg",stripeRows: false;

this.grid = Ext.create('Ext.grid.Panel', 
            id: "t-"+this.gridName+"-grid",
            header: true,
            title: gridTitle,
            border: false,
            store: store,            
            columns: cm,
            selModel: sm,
            loadMask: true,
            //viewConfig: viewConfig, // works fine
            //view: new Ext.view.Table() ,//Ext.grid.View(),//Ext.grid.View(viewConfig ),
            provider: this.page.provider
        );

如果我取消注释 "view: new Ext.view.Table()" 行，那么它会引发错误并停止一切。 我一直在评论，在创建网格后，我可以使用 this.grid.getView() 属性访问视图。但是如何创建自己的视图对象（我可以在其中分配自定义模板）？？？

非常感谢。

【问题讨论】：

你有什么问题？要自定义视图，请使用您仍然提到的 viewConfig。

ViewConfig 工作正常，但我想定义自己的视图。但是如果我 decomment view: new Ext.view.Table() 它会引发错误 me.selModel 未定义。如何创建 Ext.view.Table() 的对象并分配给“view”属性？ this.grid = Ext.create('Ext.grid.Panel', id: "t-"+this.gridName+"-grid", header: true, title: gridTitle, border: false, store: store, columns: cm, selModel: sm, loadMask: true, view: new Ext.view.Table(), provider: this.page.provider );

【参考方案1】：

来自文档：

这是 Ext.grid.View 和 Ext.tree.View 的基类，是 不能直接使用。

如果您确实想自己创建一个，则需要配置以下必需选项。

itemSelector : String
store : Ext.data.Store
tpl : String/String[]

看看into the docs 如何创建您的自定义视图。 祝你好运！如果您需要任何帮助，请随时询问；）

Ext.define('Image', 
    extend: 'Ext.data.Model',
    fields: [
         name:'src', type:'string' ,
         name:'caption', type:'string' 
    ]
);

Ext.create('Ext.data.Store', 
    id:'imagesStore',
    model: 'Image',
    data: [
         src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' ,
         src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' ,
         src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' ,
         src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' 
    ]
);

var imageTpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div style="margin-bottom: 10px;" class="thumb-wrap">',
          '<img src="src" />',
          '<br/><span>caption</span>',
        '</div>',
    '</tpl>'
);

var theView = Ext.create('Ext.view.View', 
    store: Ext.data.StoreManager.lookup('imagesStore'),
    tpl: imageTpl,
    itemSelector: 'div.thumb-wrap',
    emptyText: 'No images available'
);

var grid = Ext.create('Ext.grid.Panel', 
    id: "t-"+this.gridName+"-grid",
    header: true,
    title: gridTitle,
    border: false,
    store: store,            
    columns: cm,
    selModel: sm,
    loadMask: true,
    view: theView,
    provider: this.page.provider,
    renderTo: Ext.getBody()
);
//not tested but should work

【讨论】：

首先我尝试使用 Ext.grid.View() 并放入 store:store,itemSelector:'tr.grid-row',tpl:'title' 但这甚至不起作用。 （store是ext.data.Jsonstore()的一个变量赋值对象），我试过tpl：new Ext.Template("Hello 0.");但没有任何效果。你知道互联网上有什么链接可以参考吗？？

并且还放了 store:store,itemSelector:'tr.grid-row',tpl:'title' 但这甚至不起作用。其中 store 是 ext.data.Jsonstore()) 的变量分配对象，我尝试了 tpl: new Ext.Template("Hello 0.");但没有任何效果。你知道互联网上有什么链接可以参考吗？？

您好，非常感谢您提供示例和链接，我尝试了以下示例，但这不起作用。这会在 extjs 4 api“实时预览”类型错误上引发以下错误：无法设置未定义的属性“视图”请参阅此链接 jsfiddle.net/3hAsM/2，因为我无法发布。