如何在嵌套屬性中使用Ext.ComponentQuery.query

如何在Sencha Touch中將嵌套屬性使用Ext.ComponentQuery.query？如何在嵌套屬性中使用Ext.ComponentQuery.query

e.g

var myHardtoGetObj = topLevelView.down('someview[config.categoryCfg.id=1]')[0];

這讓我「未捕獲的錯誤」

給出：

Ext.define('SomeView', { 
    xtype : 'someview', 
    config : { 
     categoryCfg : { 
      id : 5, 
      name : 'someName' 
     } 
    } 
});

這可能嗎？

謝謝。

來源

2014-08-29 Jonathan Caballero

做這樣的事情的典型方法是添加自定義僞類匹配：

Ext.ComponentQuery.pseudos.hasCategoryId = function(components, selector) { 
    var result = [], 
     c, i, len; 

    for (i = 0, len = components.length; i < len; i++) { 
     c = components[i]; 

     if (c.config.categoryCfg && c.config.categoryCfg.id == selector) { 
      result.push(c); 
     } 
    } 

    return result; 
}

然後你就可以使用這個僞類在全球有Ext.ComponentQuery.query，並在本地與方法，如query，down等：

var allMatched, someComponent; 

allMatched = Ext.ComponentQuery.query(':hasCategoryId(1)'); 
someComponent = myPanel.down(':hasCategoryId(42)');

在ComponentQuery doc中查看更多皮膚貓的方法。

來源

2014-09-08 16:10:05

非常感謝我真的很喜歡這種方法。 – 2014-09-12 12:47:30

它會是最好的地方宣佈這個僞？控制器的啓動方法，我將使用僞？ – 2014-09-12 13:21:52

Ext.ComponentQuery是全局的，它的僞也是全局的。我建議將代碼放置在頂部的某個位置，以便在整個應用程序中可用。 – 2014-09-12 16:51:58

雖然不完全回答這個問題，但你可以做一點工作來讓它工作。

你可以像這樣

Ext.define('myCoolClass', { 
    config : { 
     nestedConfig : { 
      nestedId : 5 
     }, 

     nestedId : null 
    }, 

    updateNestedConfig: function (nestedConfig) { 
     if (nestedConfig.nestedId) { 
      this.setNestedId(nestedConfig.nestedId); 
     } 
    } 
});

添加更新方法您nestedConfig通過這樣做，你現在有正常成分查詢屬性

Ext.ComponentQuery.query('[nestedId=555]')

訪問作爲一個例子。如果你看看Sencha的源代碼，他們使用這很像在NavigationView和TabPanels

來源

2014-09-03 16:16:44

有兩次nestedId在這種情況下聽起來不正確，我寧願只是擺脫nestedConfig，並在配置級別定義所有屬性... plus將不得不創建另一個函數來設置值... – 2014-09-03 16:36:07

順便說一句，它應該是'MyCoolClass';） – 2014-09-12 12:04:49

這真的是一個有趣的問題。似乎沒有一個絕對簡單的解決方案，但有一個相當快速的解決方法。您可以修改您的視圖代碼：

Ext.define('SomeView', { 
    xtype : 'someview', 
    config : { 
     categoryCfg : { 
      id : 5, 
      name : 'someName' 
     } 
    }, 

    hasCategoryId: function (id) { 
     return this.getCategoryCfg().id == id; 
    } 
});

然後你就可以做出這樣的查詢：

Ext.ComponentQuery.query('someview{hasCategoryId(1)}');

或

topLevelView.down('someview{hasCategoryId(1)}');

注：選擇的語法是xtype {memberMethod（）}之間沒有空格。這樣兩個選擇器必須匹配（與CSS中的.class1.class2相同）。此外，選擇器必須按此順序排序，因爲結果集按順序被每個選擇器過濾，如果某些組件沒有hasCategoryId方法，它將以'{hasCategoryId（1）}'打破。

來源

2014-09-04 09:48:25 todinov

這確實是一個選擇，但作爲一個朋友告訴我 - 不知道該如何反對使用實際屬性... – 2014-09-05 03:01:45

如何在嵌套屬性中使用Ext.ComponentQuery.query

回答

相關問題