PDA

View Full Version : Little help with ItemSelector



vitalka
12 May 2011, 5:46 AM
Hi, i have itemSelectors and 2 stores:

store.


var st = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url : '/respondents?format=ext_json',
method : 'GET'
}),
fields : ['id','email'],
sortInfo : {
field : 'email',
direction : 'ASC'
},
reader: new Ext.data.JsonReader({
root : 'respondents',
id : 'id',
totalProperty : 'results'
},[
{ name: 'id', mapping: 'respondent.id' }
,{ name: 'email', mapping: 'respondent.email' }
]),
remoteSort : false, // turn on server-side sorting
autoLoad : true
});

var st2 = new Ext.data.JsonStore({
autoLoad : false,
url : '/respondents?format=ext_json',
root : 'respondents',
fields : ['email'],
displayField : ['email']
});

st.load();


itemSelector

{
xtype : 'itemselector',
name : 'selected_respondents',
imagePath : '../ux/images/',
// allowBlank : false,
multiselects: [{
legend : 'All Respondents',
width : 180,
height : 400,
store : st,
// allowBlank : false,
displayField : 'email',
valueField : 'id',
hiddenName : 'email'
},{
legend : 'Selected Respondents',
width : 170,
height : 400,
store : st2,
displayField : 'email',
valueField : 'id',
hiddenName : 'email',
// allowBlank : false
}]
},
{
fieldLabel :'To do',
xtype : 'button',
text : 'Refresh respondents ↑',
height : 30,
icon : '/images/icons/silk/arrow_refresh_small.png',
width : 180,
handler: function()
{
// st2.reload();
st.reload();
}
}

What i want? So if I press refresh button -> loading my store with users, okei. When I delete suer, and press refresh, user is gone, EXCELLENT! BUT! problem is when i do drag and drop, and dragged into Another column my item, and press refresh again, store loads again, and load all my users again. So its dublicate! How to avoid it? Maybe I need paste if into handler (button0 and check something? But i dont understand how...
Could you help me avoid dublicity when I dragged some item into another column and press refresh again?

friend
12 May 2011, 6:20 AM
After your store declarations, you can add a listener for the load event on the st store, then remove any records which have a matching id in the st2 store.



st.on('load', function(store, records, opts) {
// note that getRange() with no params returns all records.
Ext.each(st2.getRange(), function(record, index, allRecords) {
var userId = record.get('id');
var targetRecord = st.getById(userId);
if (targetRecord != null) {
st.remove(targetRecord);
}
});
});

vitalka
12 May 2011, 6:40 AM
thanks for response, sory for being newbie, but i should it write in my handler (button) instead of st.reload(); ?

friend
12 May 2011, 9:19 AM
Once you call st.load(), the load is asynchronous and you have no way of knowing when it's finished.

That's why stores gives you access to the load event, which is guaranteed to fire only after the store has finished loading.

Your best bet is to place the provided st.on() code sample immediately after your declaration of the st2 store.