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
    8,927
    Answers
    656
    Vote Rating
    443
    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

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