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
    Answers
    124
    Vote Rating
    85
    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,580
    Answers
    540
    Vote Rating
    314
    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
    Answers
    124
    Vote Rating
    85
    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
    Answers
    124
    Vote Rating
    85
    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
    Answers
    124
    Vote Rating
    85
    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

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