PDA

View Full Version : List (or uxBufList) and Selectfield - option change = itemTpl change problem



Surykat
18 Aug 2011, 4:12 AM
Next problem with which i'm fighting is to get in work a list component (I'm trying at bufflist from another thread, but it doesn't working with normal list also) with selectfield for changing itemTpl in list.

I want to raise itemTpl change by changing a selectfield option. Everything works fine until I select any item in list. Where any item is selected, changing option at selectfield cousing error:
Uncaught TypeError: Cannot call method 'addCls' of null

It is shown in Chrome. In Safari this error is:
TypeError: Result of expression 'Ext.fly(b)' [null] is not an object

I have also strange behavior in selecting items at bufflist. Only setting option 'multiSelect' to true giving me possibility to select anything item at list. Does someone working at something like this?

My code is:


this.kontrahenciPanel = new Ext.CustomPanel({
layout: 'fit',
scroll: 'vertical',
activeItem: 'myList',
dockedItems : [ {
xtype : 'toolbar',
dock : 'top',
defaults: { iconMask: true },


items : [{
xtype: 'selectfield',
id: 'mySelectfield',
name: 'filtr',
width: '30%',
options: [
{text: 'tpl1', value: '1'},
{text: 'tpl2', value: '2'},
{text: 'tpl3', value: '3'}
],
listeners: {
'change': function(sel, val) {
var list = Ext.getCmp('myList');
if(val == 1) list.itemTpl = '{tpl1}';
else if(val == 2) list.itemTpl = '{tpl2}';
else if(val == 3) list.itemTpl = '{tpl3}';

list.initComponent();
list.refresh();
}
}
}
}]
} ],
items : [ {
fullscreen : true,
id: 'myList',
xtype : 'bufflist',
itemTpl : '{tpl1}',
//disableSelection: false,
//multiSelect: true,
store : this.store
}]
});


Any ideas?

Surykat
19 Aug 2011, 12:26 AM
I have done 'step by step' debugging and I found that code crashes at line:

Ext.ux.BufferedList.superclass.initComponent.call(this);
in initComponent() function of uxbuflist.

Does someone could explain my where to drain more to found the solution of that error?

It also couse an error of assigning values to:


this.topProxy = this.getTargetEl().down('.ux-list-top-proxy');
this.bottomProxy = this.getTargetEl().down('.ux-list-bottom-proxy');

It says that getTargetEl() is null while list is selected.

Help appreciated.

Surykat
19 Aug 2011, 3:25 AM
SOLVED!

The solution was adding a bold code into dataview component code:


// invoked by the selection model to maintain visual UI cues
onItemSelect: function(record) {
var node = this.getNode(record);
if(node) {
Ext.fly(node).addCls(this.selectedItemCls);
}
},


// invoked by the selection model to maintain visual UI cues
onItemDeselect: function(record) {
var node = this.getNode(record);
if(node) {
Ext.fly(node).removeCls(this.selectedItemCls);
}
},


'Problem' is not keeping selection during change, but it is not problem at all in my case :)