PDA

View Full Version : Load Store Dinamically in component ItemSelector, please help me.



claudioprv
14 Jan 2013, 6:14 PM
I changed sencha example of ItemSelector Ux component, this component is a very usefull for me if it work right, but I have some questions about your working.

See my code, it is close to work, but I don't understand enough for to know where is the fail of my code, I'm extjs beginner and I trying discover how working with this wonderfull framework.



Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../../ext/ux');
Ext.require([
'Ext.form.Panel',
'Ext.ux.form.MultiSelect',
'Ext.ux.form.ItemSelector',
'Ext.tip.QuickTipManager',
'Ext.ux.ajax.JsonSimlet',
'Ext.ux.ajax.SimManager'
]);


Ext.define('numberModel',{
extend: 'Ext.data.Model',
fields: [
{name: 'number', type: 'string'},
{name: 'numberName', type: 'string'}]
});

var numberStore = Ext.create('Ext.data.Store',{
model: 'numberModel',
proxy: {
type: 'ajax',
//url: 'numbers.json',
format: 'json'
},
autoLoad: false
})


var loadMyAjax = function (pUrl){
Ext.Ajax.request({
url: pUrl,
success: function(response, opts) {
numberStore.loadData(Ext.decode(response.responseText));
console.log('Numbers');
console.log(response);
}
});
}




Ext.onReady(function(){
/**
I need load Ajax dinamically with click button, because my call have others parameters like loadMyAjax('http://teste.php?id='+ pId);
*/
loadMyAjax('numbers.json');


Ext.tip.QuickTipManager.init();
function createDockedItems(fieldId) {
return [{
xtype: 'toolbar',
dock: 'top',
items: {
text: 'Options',
menu: [{
text: 'Get value',
handler: function(){
var value = Ext.getCmp(fieldId).getValue();
Ext.Msg.alert('Value is a split array', value.join(', '));
}
}, {
text: 'Set value (2,3)',
handler: function(){
Ext.getCmp(fieldId).setValue(['2', '3']);
}
},{
text: 'Toggle enabled',
checked: true,
checkHandler: function(item, checked){
Ext.getCmp(fieldId).setDisabled(!checked);
}
},{
text: 'Toggle delimiter',
checked: true,
checkHandler: function(item, checked) {
var field = Ext.getCmp(fieldId);
if (checked) {
field.delimiter = ',';
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
'see that values are now submitted as a single parameter separated by the delimiter.');
} else {
field.delimiter = null;
Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
'see that values are now submitted as separate parameters.');
}
}
}]
}
}, {
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: {
minWidth: 75
},
items: ['->', {
text: 'Clear',
handler: function(){
var field = Ext.getCmp(fieldId);
if (!field.disabled) {
field.clearValue();
}
}
}, {
text: 'Reset',
handler: function() {
Ext.getCmp(fieldId).up('form').getForm().reset();
}
}, {
text: 'Save',
handler: function(){
var form = Ext.getCmp(fieldId).up('form').getForm();
form.getValues(true);
if (form.isValid()){
Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
form.getValues(true));
}
}
}]
}];
}


/*
* Ext.ux.form.MultiSelect Example Code
*/
var msForm = Ext.widget('form', {
title: 'MultiSelect Test',
width: 400,
bodyPadding: 10,
renderTo: 'multiselect',
items:[{
anchor: '100%',
xtype: 'multiselect',
msgTarget: 'side',
fieldLabel: 'Multiselect',
name: 'multiselect',
id: 'multiselect-field',
allowBlank: false,
store: numberStore,
valueField: 'number',
displayField: 'numberName',
value: ['3', '4', '6'],
ddReorder: true
}],
dockedItems: createDockedItems('multiselect-field')
});

var isForm = Ext.widget('form', {
title: 'ItemSelector Test',
width: 700,
bodyPadding: 10,
height: 300,
renderTo: 'itemselector',
layout: 'fit',
items:[{
xtype: 'itemselector',
name: 'itemselector',
id: 'itemselector-field',
anchor: '100%',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
store: numberStore,
displayField: 'numberName',
valueField: 'number',
value: ['3', '4', '6'],
allowBlank: false,
msgTarget: 'side',
fromTitle: 'Available',
toTitle: 'Selected'
}],
dockedItems: createDockedItems('itemselector-field')
});


});

if you change this code:


var numberStore = Ext.create('Ext.data.Store',{
model: 'numberModel',
proxy: {
type: 'ajax',
//url: 'numbers.json',
format: 'json'
},
autoLoad: false
})


for this



var numberStore = Ext.create('Ext.data.Store',{
model: 'numberModel',
proxy: {
type: 'ajax',
url: 'numbers.json',
format: 'json'
},
autoLoad: true
})


it will working fine to me.
but I need load data dinamically, and I need something like this:



var loadMyAjax = function (pUrl){
Ext.Ajax.request({
url: pUrl,
success: function(response, opts) {
numberStore.loadData(Ext.decode(response.responseText));
console.log('Numbers');
console.log(response);
}
});
}

/**
I need load Ajax dinamically with click button, because my call have others parameters like loadMyAjax('http://teste.php?id='+ pId);
*/
loadMyAjax('numbers.json');



I have another question about this component that is stranger for me, it have dual list. In left side available items, and in right side I have a list of Selected items.
Then I will load available items with a store like the code below.
Then at now it's ok for me.
But in right list I need to set it with values:


var isForm = Ext.widget('form', {
title: 'ItemSelector Test',
width: 700,
bodyPadding: 10,
height: 300,
renderTo: 'itemselector',
layout: 'fit',
items:[{
xtype: 'itemselector',
name: 'itemselector',
id: 'itemselector-field',
anchor: '100%',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
store: numberStore, /* Available Items */
displayField: 'numberName',
valueField: 'number',
value: ['3', '4', '6'], /* Selected Items */
allowBlank: false,
msgTarget: 'side',
fromTitle: 'Available',
toTitle: 'Selected'
}],
dockedItems: createDockedItems('itemselector-field')
});




How I will load this selected items from server?
I have to load these value in a variable with ajax or exists a best solution for this?

I put a sample and video for better understand here:

Sample (http://aplicacoes.sankhya.com.br/temp/multiselect/multiselect-demo2.html)

Thanks in Advance,
Claudio

mitchellsimoens
16 Jan 2013, 12:53 PM
Can I ask why you are using Ext.Ajax to load the json file instead of using a proxy/reader on the store?

claudioprv
16 Jan 2013, 5:13 PM
Hi Mitchell,


Can I ask why you are using Ext.Ajax to load the json file instead of using a proxy/reader on the store?

Can I ask why you are using Ext.Ajax to load the json file instead of using a proxy/reader on the store?


Because I load my store after click on button, and the json file is just a sample for you understand.
In my original source I use the following:




var loadMyAjax = function (pUserId){
Ext.Ajax.request({
params: {Id:pUserId},
url: '../lib/users.php',
success: function(response, opts) {
numberStore.loadData(Ext.decode(response.responseText));
}
});
}
....
....
....
/* when click button then */
loadMyAjax(35);




I need set a parameter via variable, and I don't know how to make this, because I will filter data on database with my php script.

Thanks,
ClaudioPrv