Results 1 to 7 of 7

Thread: Create store from user input

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    92
    Answers
    6
    Vote Rating
    0
      0  

    Default Answered: Create store from user input

    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

  2. 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:
    Code:
    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();
            },

  3. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    117
      1  

    Default

    It is possible. You just need to convert user input data into an array of records then feed this result to your store.

  4. #3
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,100
    Answers
    113
    Vote Rating
    100
      1  

    Default

    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:

    Code:
    store.add({field1:value1, field2:value2});
    where value1 and value2 would be the values you would obtain from your user input string.

  5. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    92
    Answers
    6
    Vote Rating
    0
      0  

    Default

    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:
    Code:
    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();
            },

  6. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347
    Vote Rating
    117
      1  

    Default

    Code:
    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().

  7. #6
    Sencha User
    Join Date
    Aug 2012
    Posts
    92
    Answers
    6
    Vote Rating
    0
      0  

    Default

    thanks! Will do

  8. #7
    Sencha User
    Join Date
    Oct 2012
    Posts
    2
    Vote Rating
    0
      0  

    Default

    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.....

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •