【问题标题】:"each" method in extjs data storeextjs 数据存储中的“每个”方法
【发布时间】:2011-04-04 01:37:37
【问题描述】:

所以,我的代码中有一个数据存储,我正在将其加载到一个函数中。在该商店中,我想使用each method 将每条记录以某种格式附加到面板的正文中。

我想弄清楚的是如何使用这种“每个”方法。以前有人用过吗?总的来说,我对函数和编程比较陌生,所以我试图弄清楚“fn”和“范围”相对于我自己的代码是什么。

如果有人以前在 ExtJS 框架中使用过这种方法,任何帮助都会很棒。

【问题讨论】:

    标签: extjs methods each store


    【解决方案1】:

    为您的案例使用 Dataview。将商店和 XTemplate 添加到您的数据视图中,并将此数据视图作为项目添加到您的面板中。它会是这样的:

    this.store = new Ext.data.JsonStore({
                url : 'myproxy.php',
                baseParams : {
                    action : 'get_basket_files'
                },
                root : 'rows',
                id : 'filename',
                fields : ['filename', 'filepath', 'filesize', 'fileclass']
            });
    
    this.filesTemplate = new Ext.XTemplate(
            '<div class="files_container"><tpl for=".">',
            '<div id="{filename}" class="basket-fileblock"><div class="{fileclass}"></div>',
    '<div class="filetext">{filename}</div></div> ','</tpl></div>');
    
    this.filesTemplate.compile();
    
    this.filesDataView = new Ext.DataView({
                itemSelector : 'div.basket-fileblock',    //Required
                style : 'overflow:auto',
                multiSelect : true,
                store : this.store,
                tpl : this.filesTemplate
            });
    
    var panel = new Ext.Panel({
                layout : 'fit',
                items : [this.filesDataView]
            });
    

    这里的 XTemplate 是每个项目的 HTML 模板。查看 ExtJS 文档,该文档提供了许多 XTemplate 示例。

    再举个例子,ExtJS的每个函数都可以这样使用:

    假设一个项目数组是 myItems。所以,

    Ext.each(myItems, function(eachItem){
         //Do whatever you want to do with eachItem
    }, this);
    

    【讨论】:

      【解决方案2】:

      听起来您想要Ext.DataView

      DataView 使用 Template 或 XTemplate 在存储中创建数据的呈现。

      因此,您实例化配置的数据视图,包括对您的商店的引用和要使用的模板,并将该数据视图添加到您的面板。

      【讨论】:

        猜你喜欢
        • 2018-03-14
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-09-30
        • 2013-08-31
        • 2013-08-25
        • 1970-01-01
        • 2013-02-12
        相关资源
        最近更新 更多