1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    23
    Vote Rating
    0
    sbodanapu is on a distinguished road

      0  

    Default Answered: not able to display tree grid with hard coded values using plain html page

    Answered: not able to display tree grid with hard coded values using plain html page


    Hi,
    I am a beginner in Ext JS and i am asked to perform one simple task of displaying a tree grid using plain HTML page of which i am using hard coded values for data. But, i am not able to display this.
    Please find my code below and suggest me if i am doing anything wrong.

    index.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <link rel="stylesheet" type="text/css" href="/Users/renjithcs/Desktop/ext-4.1.1a/resources/css/ext-all.css">
    <script type="text/javascript" src="/Users/Desktop/ext-4.1.1a/ext-base.js"></script>
    <script type="text/javascript" src="/Users/Desktop/ext-4.1.1a/ext-all.js"></script>
    <script type="text/javascript" src="/Users/Desktop/treegrid.js"></script>

    </head>
    <body></body>
    </html>


    treegrid.js

    Ext.Loader.setConfig({
    enabled: true
    });Ext.Loader.setPath('Ext.ux', '../ux');

    Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*',
    'Ext.ux.CheckColumn'
    ]);

    Ext.onReady(function() {
    Ext.QuickTips.init();

    //we want to setup a model and store instead of using dataUrl
    Ext.define('Task', {
    extend: 'Ext.data.Model',
    fields: [
    {name: 'UniverseDetails', type: 'string'},
    {name: 'description', type: 'string'}
    ],
    idProperty: 'UniverseDetails'
    });
    var myData = [
    ['Apple','Founded by Steve Jobs'],
    ['Microsoft','The Dream company for every job seeker']
    ];


    var store = Ext.create('Ext.data.TreeStore', {
    model: 'Task',
    data: myData,
    folderSort: true
    });
    //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
    var tree = Ext.create('Ext.tree.Panel', {
    title: 'Core Team Projects',
    width: 500,
    height: 300,
    renderTo: Ext.getBody(),
    collapsible: true,
    useArrows: true,
    rootVisible: false,
    store: store,
    multiSelect: true,
    singleExpand: true,
    //the 'columns' property is now 'headers'
    columns: [{
    xtype: 'treecolumn', //this is so we know which column will show the tree
    text: 'Universe Details',
    flex: 2,
    sortable: true,
    dataIndex: 'UniverseDetails'
    },{
    //we must use the templateheader component so we can use a custom tpl
    xtype: 'templatecolumn',
    text: 'Description',
    flex: 1,
    sortable: true,
    dataIndex: 'description',
    align: 'center',
    tpl: Ext.create('Ext.XTemplate')
    }]
    });
    });

    Please help me as soon as possible.
    Thanks in Advance.

    Sandeep

  2. HI!

    it was a sample how to use proxy according to your needs and i guess you haven't either check my link, and do a copy paste.

    However, in your case, following will work

    check out this implementation:-
    Code:
    // model 
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'id',    type: 'int'},
            {name: 'name',  type: 'string'}
        ]
    });
    Code:
    var data = {
        details: [
            {
                id: 1,
                name: 'name1'
            },
            {
                id: 2,
                name: 'name2'
            }
        ]
    };
    Code:
    var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        model: 'User',
        data : data,
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'details'
            }
        }
    });

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    Answers
    124
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi!

    This is working fine for me, you may check it
    Code:
    Ext.define('Book', { 
       extend: 'Ext.data.Model',
        fields: [
           {name: 'book',     type: 'string'},
           {name: 'pages',     type: 'string'}
        ]
    });
    
    var store = Ext.create('Ext.data.TreeStore', {
      model: 'Book',
      data: YOUR DATA,
      folderSort: true
    });
    Code:
    Ext.create('Ext.tree.Panel', {title: 'Books',
         width: 500, height: 300,
         renderTo: Ext.getBody(),
         collapsible: true,
         useArrows: true,
         rootVisible: false,
         store: store,
         multiSelect: true,
         singleExpand: true,
         columns: [
          { 
             xtype: 'treecolumn',
              text: 'Name',
              flex: 2,
              sortable: true,
              dataIndex: 'book'
           },
           {
              text: 'Pages',
              flex: 1,
              dataIndex: 'pages',
              sortable: true
            } 
         ]
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #3
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,623
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Code:
    <script type="text/javascript" src="/Users/Desktop/ext-4.1.1a/ext-base.js"></script>
    <script type="text/javascript" src="/Users/Desktop/ext-4.1.1a/ext-all.js"></script>
    ext-base.js doesn't exist in ExtJS 4. Remove that line and change ext-all.js to ext-all-dev.js. The paths also look suspicious to me, looks like you're doing some seriously dodgy things with accessing files off the file-system.

    Open up a debugger and view the network traffic, make sure all the files are loading correctly.

  5. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    23
    Vote Rating
    0
    sbodanapu is on a distinguished road

      0  

    Default still not working

    still not working


    Quote Originally Posted by sword-it View Post
    Hi!

    This is working fine for me, you may check it
    Code:
    Ext.define('Book', { 
       extend: 'Ext.data.Model',
        fields: [
           {name: 'book',     type: 'string'},
           {name: 'pages',     type: 'string'}
        ]
    });
    
    var store = Ext.create('Ext.data.TreeStore', {
      model: 'Book',
      data: YOUR DATA,
      folderSort: true
    });
    Code:
    Ext.create('Ext.tree.Panel', {title: 'Books',
         width: 500, height: 300,
         renderTo: Ext.getBody(),
         collapsible: true,
         useArrows: true,
         rootVisible: false,
         store: store,
         multiSelect: true,
         singleExpand: true,
         columns: [
          { 
             xtype: 'treecolumn',
              text: 'Name',
              flex: 2,
              sortable: true,
              dataIndex: 'book'
           },
           {
              text: 'Pages',
              flex: 1,
              dataIndex: 'pages',
              sortable: true
            } 
         ]
    });
    HI sword..thanks for your informative reply..But, it is still not working with me..It is showing me the error "You are using a servor Proxy but have not supplied it with a URL". Can you please tell me where i am doing wrong

    Thanks,
    Sandeep.

  6. #5
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    Answers
    124
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi!

    You need to give an proxy to your store.
    When the model was registered, you did not supply a proxy configuration on the model. As a result, the model manager assigned a default proxy (which is has a default proxy type of 'ajax').

    sample for setting proxy:-
    Code:
    var Store = new Ext.data.Store({
       model: 'User',
       storeId: 'userStore',
       remoteSort: false,
       autoLoad: false,
       proxy: {
          type: 'localstorage',
           id: 'sampleId',
       } 
    });

    check this:-
    http://docs.sencha.com/ext-js/4-1/#!...tore-cfg-proxy
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  7. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    23
    Vote Rating
    0
    sbodanapu is on a distinguished road

      0  

    Default correct me if i am wrong

    correct me if i am wrong


    Quote Originally Posted by sword-it View Post
    Hi!

    You need to give an proxy to your store.
    When the model was registered, you did not supply a proxy configuration on the model. As a result, the model manager assigned a default proxy (which is has a default proxy type of 'ajax').

    sample for setting proxy:-
    Code:
    var Store = new Ext.data.Store({
       model: 'User',
       storeId: 'userStore',
       remoteSort: false,
       autoLoad: false,
       proxy: {
          type: 'localstorage',
           id: 'sampleId',
       } 
    });

    check this:-
    http://docs.sencha.com/ext-js/4-1/#!...tore-cfg-proxy
    Hi sword,
    Can you please correct me here if i am doing any thing wrong with the following code

    Ext.define('Book', {
    extend: 'Ext.data.Model',
    fields: [
    {name: 'book', type: 'string'},
    {name: 'pages', type: 'string'}
    ],
    proxy: {
    type: 'localstorage',
    id: 'sampleId',
    }
    });


    var myData = [
    ['Apple','500'],
    ['Microsoft','600']
    ];

    var store = Ext.create('Ext.data.TreeStore', {
    model: 'Book',
    storeId:'UserStore',
    remoteSort:false,
    autoLoad:false,
    data: myData,
    folderSort: true
    });

  8. #7
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    Answers
    124
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    HI!

    i guess, you need to give proxy to your store not to your model.

    Code:
    var store = Ext.create('Ext.data.TreeStore', {
      model: 'Task',
      data: myData,
      folderSort: true,
      proxy:{.....}
    });
    Also, check the link in my above post for better understanding. i.e.
    http://docs.sencha.com/ext-js/4-1/#!...tore-cfg-proxy
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  9. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    23
    Vote Rating
    0
    sbodanapu is on a distinguished road

      0  

    Default I think the problem is with the json format which i am using

    I think the problem is with the json format which i am using


    Quote Originally Posted by sword-it View Post
    HI!

    i guess, you need to give proxy to your store not to your model.

    Code:
    var store = Ext.create('Ext.data.TreeStore', {
      model: 'Task',
      data: myData,
      folderSort: true,
      proxy:{.....}
    });
    Also, check the link in my above post for better understanding. i.e.
    http://docs.sencha.com/ext-js/4-1/#!...tore-cfg-proxy
    Sword, thanks for your replies and hearing to me patiently.
    Now everything is almost done except the data not being displayed.I doubt whether the json format i am using is correct. Please have a look at this

    var store = Ext.create('Ext.data.TreeStore', {
    model: 'Book',
    storeId:'UserStore',
    remoteSort:false,
    autoLoad:false,
    data: treeGridData,
    proxy: {
    type: 'localstorage',
    id: 'sampleId',
    },
    reader: {
    type: 'json'
    },
    folderSort: true
    });



    json data :

    var treeGridData=[
    {
    "object": "fruit",
    "name": "fruit",
    "quantity": "100 kg ",
    expanded : true,
    "children": [
    {
    "object": "apple",
    "name": "apple",
    "quantity": "50 kg ",
    "leaf": true
    },
    {
    "object": "mango",
    "name": "mango",
    "quantity": "100 kg ",
    "leaf": true
    }
    ]
    }
    ];

    Thanks,
    Sandeep

  10. #9
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    Answers
    124
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default use memoryproxy

    use memoryproxy


    HI!

    it was a sample how to use proxy according to your needs and i guess you haven't either check my link, and do a copy paste.

    However, in your case, following will work

    check out this implementation:-
    Code:
    // model 
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'id',    type: 'int'},
            {name: 'name',  type: 'string'}
        ]
    });
    Code:
    var data = {
        details: [
            {
                id: 1,
                name: 'name1'
            },
            {
                id: 2,
                name: 'name2'
            }
        ]
    };
    Code:
    var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        model: 'User',
        data : data,
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'details'
            }
        }
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  11. #10
    Sencha User
    Join Date
    Jan 2012
    Posts
    23
    Vote Rating
    0
    sbodanapu is on a distinguished road

      0  

    Default


    Hi sword, I am finding it seriously difficult to find the error in my code.though i am not able to find one.Please go through this code and help me where i am going wrong..

    Code:
    Ext.onReady(function() {
    Ext.create('Ext.tree.Panel', {title: 'Books',
         width: 500, height: 300,
         
         collapsible: true,
         useArrows: true,
         rootVisible: true,
         store: store,
         multiSelect: true,
         singleExpand: true,
        columns: [
          { 
             xtype: 'treecolumn',
              text: 'Object',
              flex: 2,
              sortable: true,
              dataIndex: 'object'
           },
           {
              text: 'Name',
              flex: 1,
              dataIndex: 'name',
              sortable: true
           } ,
           {
              text: 'Quantity',
              flex: 1,
              dataIndex: 'quantity',
              sortable: true
           } 
         ],
         renderTo: Ext.getBody()
         
    });
    });
    
     var store=Ext.create('Ext.data.TreeStore', {
        storeId:'simpsonsStore',
        id:'storeName',
        autoLoad:true,
        fields:[{'type':'int','name':'id','mapping':'id'},{'name':'object','mapping':'object'}, 'name':'name','mapping':'name', 'name':'quantity','mapping':'quantity'],idProperty: 'id',
        data:{'record':[
            { 'id':1,'object':'fruit','name': 'apple','quantity':'40','leaf':true,'parentId':1,'iconCls':'task-folder'},
            { 'id':2,'object':'PC','name': 'HP','quantity':'2',iconCls:'task-folder','expanded':true ,
              children: [
                {
                    'id':21,
                    'object': "sand",
                    'name': "apple",
                    'quantity': "50 kg ",
                    'leaf': true,
                    'parentId':2
                },
                {
                    'id':22,
                    'object': "mud",
                    'name': "mango",
                    'quantity': "100 kg ",
                    'leaf': true,
                    'parentId':2
                }
               ]
            },
            {'id':3, 'object':'pen','name': 'cello','quantity':'30'},
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'record'
            }
        }
    });
    Last edited by sbodanapu; 22 Jan 2013 at 2:32 AM. Reason: wrong code

Thread Participants: 2