1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    11
    Vote Rating
    0
    meena.chauhan is on a distinguished road

      0  

    Default Issue in populating data in EXTJS grid

    Issue in populating data in EXTJS grid


    I have an html page with a button and on click of this button ajax call is made I add a grid inside the div.

    The problem I am facing is placing the data of the JSONArray in the extjs grid.

    What is the right way of creating a store with the JSON data for a EXTJS grid.

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="../../css/ext-all.css">
    <script type="text/javascript" src="../../js/ext-base.js"></script>
    <script type="text/javascript" src="../../js/ext-all.js"></script>
    <script type="text/javascript" src="extjs-grid.js"></script>
    <script type="text/javascript" src="main.js"></script>
    </head>
    <body>
    <button type="button" onclick="loadJsonData()">Get Data</button>
    <div id="table"/>
    </body>
    </html
    <!------------------------------------------------------------------------>
    function loadJsonData()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    alert("JSON Response recieved...");
    var jsonData = Ext.decode(xmlhttp.responseText);
    populateDatagrid(jsonData);
    }
    }

    xmlhttp.open("GET","http://localhost:8080/EXTJS-POC/controller",true);
    xmlhttp.send();
    }

    <!------------------------------------------------------------->
    Below is the Servlet code

    public class ControllerServlet extends HttpServlet{
    /**
    *
    */
    private static final long serialVersionUID = 1L;
    public void doGet (HttpServletRequest req, HttpServletResponse res)
    throws ServletException, IOException
    {
    try{
    Class.forName("net.sourceforge.jtds.jdbc.Driver");
    Connection theConnection = DriverManager.getConnection("jdbc:jtdsqlserver://localhost:1433/aa;instance=MYSQLSERVER2008", "sa", "clienta");
    Statement theStatement=theConnection.createStatement();
    ResultSet theResult=theStatement.
    executeQuery("SELECT subdma_cd,period_id ,SUM(CLTV) as CLTV FROM [aa_clienta_d04].[dbo].[_Fact_Gross_Adds_Inwards] group by subdma_cd,period_id");
    JSONArray jsonArray = convertResultSetToJSON(theResult);
    res.setContentType("application/json");
    res.getWriter().write(jsonArray.toString());
    theConnection.close();
    }catch(ClassNotFoundException cex){
    cex.printStackTrace();
    }
    catch(SQLException ex){
    ex.printStackTrace();
    }
    }

    <!------------------------------------------------------------->
    Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*'
    ]);
    function populateDatagrid(jsonData) {
    Ext.QuickTips.init();

    // setup the state provider, all state information will be saved to a cookie
    Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));

    alert("testing json");
    var length = jsonData.length;

    alert(jsonData[0].subdma_cd+","+ jsonData[0].period_id+"'"+jsonData[0].CLTV+","+length);;
    var myStore = Ext.create('Ext.data.ArrayStore', {
    fields: [
    {name: 'subdma_cd'},
    {name: 'period_id'},
    {name: 'CLTV'}

    ],
    data: jsonData
    });
    // create the Grid
    var grid = Ext.create('Ext.grid.Panel', {
    store: myStore,
    stateful: true,
    stateId: 'stateGrid',
    columns: [
    {
    text : 'subdma_cd',
    sortable : false,
    dataIndex: 'subdma_cd'
    },
    {
    text : 'period_id',
    width : 75,
    sortable : true,
    dataIndex: 'period_id'
    },
    {
    text : 'CLTV',
    width : 75,
    sortable : true,
    dataIndex: 'CLTV'
    }
    ],
    height: 350,
    width: 600,
    title: 'Array Grid',
    renderTo: 'table',
    viewConfig: {
    stripeRows: true
    }
    });

    };

  2. #2
    Sencha User
    Join Date
    Mar 2012
    Posts
    11
    Vote Rating
    0
    meena.chauhan is on a distinguished road

      0  

    Default


    I got the solution to this problem, I should use JSONStore instead of ArrayStore.

  3. #3
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,731
    Vote Rating
    104
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    Sweet... And next time please post in Help section and use CODE tags.

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi