Results 1 to 3 of 3

Thread: What is wrong in the code ?

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Location
    Bangalore,IN
    Posts
    114
    Answers
    6

    Default What is wrong in the code ?

    In a border layout, i am rendering a tree to west and grid panel to center.

    The tree-data.json file has,

    Code:
    {
    text: '.',
    children: [{
        text:'Sendfile Config',
        expanded: true,
        children:[{
            text:'Create Link',
            id:'g-panel',
            leaf:true
        }]
     }]
    }
    ~


    Code:
    Ext.onReady(function(){
    
    
    function gettreestore()
    {
      var store = Ext.create('Ext.data.TreeStore',{
          root:{
             expanded:true
          },
          proxy:{
           type:'ajax',
           url:'tree-data.json'
          }
      });
    
    
    }
    
    
    function getgridstore()
    {
      var store = Ext.create('Ext.data.Store',{
          autoLoad:true,
          fields:[
            { name:'id',       type:'integer' },
            { name:'name',     type:'string' }
          ],
          data:[
            { 'id':1,    'name':'hello' }
          ]
      });
    
    
      return store;
    }
    
    function getgridpanel()
    {
      var grid;
        grid = {
           id:'g-panel',
           title:'Sendfile Config',
           xtype:'gridpanel',
           layout:'fit',
           store: getgridstore(),
           columns:[
            { text:'ID',   dataIndex:'id' },
            { text:'Name', dataIndex:'name' }
           ]
         };//grid condig
    
    
      return grid;//return config
    }
    
    
      var citems = [];
    
    
      citems.push(getgridpanel());
    
    
    
    
      contentPanel = Ext.create('Ext.panel.Panel',{
          id:'content-panel',
          region:'center',
          layout:'card',
          margin:'2 5 5 0',
          //activeItem:0,
          border:false,
          items:citems
      });
    
      var treeconfig = Ext.create('Ext.tree.Panel',{
         id:'tree-panel',
         title:'Choose Option',
         region:'west',
         split:'true',
         height:360,
         minSize:150,
         rootVisible:false,
         autoScroll:true,
         store: gettreestore()
     });
    
    
     Ext.create('Ext.container.Viewport',{
         layout:'border',
         items:[
            treeconfig,
            contentPanel       
         ]
     });
    
    
    });

  2. #2
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106

    Default

    The first problem I see is that gettreestore() isn't returning anything. It creates a private var named 'store', but never returns it...

    I recommend starting with the smallest/simplest block of working code, then build up from there. As an example, here's a minimal, functional layout that works. Start with this and add one component at a time, verifying that each new component works before moving on to the next:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-theme-gray/ext-theme-gray-all.css">
        <script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
        <script type="text/javascript"> 
          Ext.onReady(function() {
    
            Ext.create('Ext.container.Viewport', {
              layout:'border',
              items:[{
                xtype: 'treepanel',
                region: 'west',
                title: 'Simple Tree',
                width: 200,
                //store: store,
                rootVisible: false                          
              },{
                xtype: 'panel',
                region: 'center',
                layout: 'card',
                title: 'Card Layout Center Panel',
                items: [{
                  xtype: 'panel',
                  title: 'Card 1'
                }]
              }]
           });        
          });
        </script>
    
      </head>
      <body>
      </body>
    </html>
    In the example above, I'd first focus on getting the tree store functional, then swap out the 'Card 1' panel with your grid.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    Bangalore,IN
    Posts
    114
    Answers
    6

    Default

    Thanks. That's a mistake. The actual mistake is that we must specify the width for tree-panel.

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
  •