1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    40
    Vote Rating
    0
    teddy11 is on a distinguished road

      0  

    Default Unanswered: MVC grid and tabs

    Unanswered: MVC grid and tabs


    I am using the example provided on this site -
    http://www.extjsframework.com/mvc/si...vc-application.
    I want to be able to add tabs to the panel that will display different grids in each tab.
    I changed the extend in Panel.js to

    Code:
    extend: 'Ext.tab.Panel'
    .
    and added a "Grid2.js"
    Code:
       
     Ext.define('USERS.view.Grid2' , {
     extend: 'Ext.grid.Panel', 
     alias : 'widget.userlist',
     title : '2nd Tab',
     store: 'Users', 
     columns: [{
      header: 'Name',
      dataIndex: 'name',
      flex: 1
     },{
      header: 'Email',
      dataIndex: 'email',
      flex: 1
     }]
    });
    Lastly, I made the following changes in the controller (Users.js) --
    HTML Code:
        views: ['Panel', 'Grid', 'Grid2'], and added
        Ext.create('USERS.view.Grid2').show();
    The tab is correctly displayed but only one tab is showing and the title is the one for Grid2.
    1. How do I add multiple tabs using a controller?
    2. What can I do to make the grid show up?
    Thanks.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Here is a quick example of creating tabs and adding a grid to each. In the MVC pattern, you will just need to reference the tab as expected.

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'change'],
        data:{'items':[
            { 'name': 'Lisa',  'email':'lisa@simpsons.com',  'change':100  },
            { 'name': 'Bart',  'email':'bart@simpsons.com',  'change':-20  },
            { 'name': 'Homer', 'email':'home@simpsons.com',  'change':23   },
            { 'name': 'Marge', 'email':'marge@simpsons.com', 'change':-11   }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    
    Ext.define('MY.grid', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.simpsonsgrid',
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
        ]
    });    
    
    Ext.onReady(function() {
    	var items = [{}];
    
    	var button1 = new Ext.Button({
    		text: 'Create Tab',
    		width: 150,
    		renderTo: Ext.getBody(),
    		handler: Ext.Function.bind(addTab, this, [ this.text ], true)
    	});
    
    	var tabPanel = Ext.createWidget('tabpanel', {
    		itemId: 'mytabpanel', 
    		renderTo: Ext.getBody(),
    		resizeTabs: true,
    		enableTabScroll: true,
    		width: 600,
    		height: 500,
    		defaults: {
    			autoScroll: true,
    			bodyPadding: 10
    		},
    		items: items
    	});
    
    	function addTab(item,event,text,id){
    		var id = tabPanel.items.length;
    		var tab = tabPanel.add({
    			title: 'text-'+id,
    			itemId: 'id-'+id,
    			layout: {
    			    type: 'vbox',
    			    align : 'stretch',
    			    pack  : 'start',
    			},
    			closeAction: 'close',
    			closable: true,
    			border: false,
    			items: [
    			{
    				xtype: 'simpsonsgrid',
    				title: 'Simpsons Grid '+id
    			}]
    
    		});
    
    		tabPanel.doLayout();
    		tabPanel.setActiveTab(tab);
    	}
    });
    Scott.

Thread Participants: 1