結果が表示されない場合に含まれるデータの提案を送信するボタンを表示するリスト コンポーネントがあります。
List コンポーネント自体は次のように実装されます。
{
xtype: 'list',
itemTpl: '{name}',
// This is not ideal!
emptyText: [
'<div class="x-button-normal x-button">',
'<span class="x-button-label">',
'Suggest <i><span id="suggest-name"></i>',
'</span>',
'</div>'
].join(''),
store: 'TheStore'
}
これは、ストアに部分文字列フィルターを設定するだけの検索フィールドのハンドラーです。
'keyup': function(self, e, eOpts) {
queryString = self.getValue();
var store = Ext.getStore('TheStore');
store.clearFilter();
if(queryString){
var thisRegEx = new RegExp(queryString, "i");
store.filterBy(function(record) {
if (thisRegEx.test(record.get('name'))) {
return true;
};
return false;
});
// Changes the button so it shows name
document.getElementById('suggest-name').innerText = queryString;
}
},
現在、Sencha Touch ボタンの外観をエミュレートする単純な HTML に emptyText を設定していますが、これは、コンポーネント システムに関連付けられていないため (タップすると押されるなど)、ボタンの動作がまったくないことを意味します。代わりに適切なボタンが表示されるため、emptyText 属性を設定 (またはエミュレート) するにはどうすればよいですか?