PDA

View Full Version : Create store from user input



alex9311
29 Oct 2012, 4:27 PM
I'm looking to take user input from a textfield and bring it into my application as store data when submitted. The user input would be comma/line delimited and would fit into a model I defined.

Is this possible in some way? Any tips to get me started in the right direction are much appreciated

vietits
29 Oct 2012, 5:26 PM
It is possible. You just need to convert user input data into an array of records then feed this result to your store.

Farish
29 Oct 2012, 11:48 PM
as vietits said, you can convert the user's input into an array and use store.loadData() to load it into your store. If you have one record only with 2 fields (e.g. field1 and field2), you can do the following:


store.add({field1:value1, field2:value2});

where value1 and value2 would be the values you would obtain from your user input string.

alex9311
30 Oct 2012, 4:58 PM
thanks for the tips! Here is what I ended up doing, if you see any ways it could be improved/optimized I would be happy to hear it

So, specifically, my app takes user input in a text area like:

freshman, 40
sophmores, 30
senior, 35

and updates a grid, barchart, and pi chart with that data

submit function:

submit:function(button){
console.log('submitclicked!');
var window = button.up('window');
var form = window.down('form');
var textarea = form.down('textarea');
var rawdata = textarea.getRawValue();
var viewport = Ext.ComponentQuery.query('viewport')[0];
var panel = viewport.down('panel');
var grid = panel.down('grid');
var chart = panel.down('chartchart');
var bar = panel.down('chartbarchart');
//console.log('raw data:');
//console.log(rawdata);
var firstarraydata = rawdata.split('\n');
//console.log(firstarraydata);
var secondarraydata = new Array();
for (var i=0; i < firstarraydata.length; i++){
secondarraydata[i] = firstarraydata[i].split(',');
}
for (var i=0; i < secondarraydata.length; i++){
secondarraydata[i][1] = Number(secondarraydata[i][1]);
}
//console.log(secondarraydata);
var newStore = Ext.create('Ext.data.Store', {
model: 'C.model.Chart',
fields: [{
name:'level', mapping: 0
}, {
name: 'category', mapping: 1
}],
data: secondarraydata
});
grid.reconfigure(newStore);
chart.bindStore(newStore);
bar.bindStore(newStore);
window.close();
},

vietits
30 Oct 2012, 5:39 PM
submit:function(button){
console.log('submitclicked!');
var window = button.up('window');
var form = window.down('form');
var textarea = form.down('textarea');
var rawdata = textarea.getRawValue();
var viewport = Ext.ComponentQuery.query('viewport')[0];
var panel = viewport.down('panel');
var grid = panel.down('grid');
var chart = panel.down('chartchart');
var bar = panel.down('chartbarchart');
//console.log('raw data:');
//console.log(rawdata);
// var firstarraydata = rawdata.split('\n');
// //console.log(firstarraydata);
// var secondarraydata = new Array();
// for (var i=0; i < firstarraydata.length; i++){
// secondarraydata[i] = firstarraydata[i].split(',');
// }
// for (var i=0; i < secondarraydata.length; i++){
// secondarraydata[i][1] = Number(secondarraydata[i][1]);
// }
// //console.log(secondarraydata);
var dataArray = rawdata.split('\n');
for (var i = 0, len = dataArray.length; i < len ; i++){
dataArray[i] = dataArray[i].split(',');
dataArray[i][1] = Number(dataArray[i][1]);
}

var newStore = Ext.create('Ext.data.Store', {
model: 'C.model.Chart', // you only need model or fields, not both
fields: [{
name:'level', mapping: 0
}, {
name: 'category', mapping: 1
}],
// data: secondarraydata
data: dataArray
});
grid.reconfigure(newStore);
chart.bindStore(newStore);
bar.bindStore(newStore);
window.close();
},

Also, you should create store one time, bind it to grid, chart, bar. And then call <store>.loadData(dataArray) instead of creating a new store each time calling submit().

alex9311
31 Oct 2012, 2:22 PM
thanks! Will do

shilpa1931990
3 Nov 2012, 3:01 AM
hey i am inplementing same logic but textfields values are not getting inserted into store. please can you provide complete code of all files. I am very new to extjs so it will help me lot.....