1. #1
    Sencha User
    Join Date
    Jul 2015
    Posts
    10
    Vote Rating
    0
    theRedPill is on a distinguished road

      0  

    Default Unanswered: Grid Panel with combobox in each cell of one column

    Hi all!

    Currently I have a grid with an ArrayStore that I load with JSON items. Each record in the grid is a Message and each Message has an array of "To" objects. My goal is to be able to have each cell in the To column to be a combobox so that when the user clicks the To value of a Message, they can see all the To objects in that array.

    Is this possible? A few of the threads I've seen describe a situation where they want to set the editor of a column to be a combobox with a static list of values. These examples do not really apply to my situation.


    Just to be clear, the grid has an ArrayStore and the To field is of type 'auto'. Here is the column definition I've tried so far and it just displays [object Object], [object Object], .... inside of the cell:

    Code:
    {text: 'To',
    flex: 1,
    dataIndex: 'tos',
    editor: {xtype: 'combobox',
    store: new Ext.data.Store({fields: [{name: 'nodeId',type: 'int'}, {name: 'nodeName',type: 'string'}]}),
    queryMode: 'local',
    valueField: 'nodeId',
    displayField: 'nodeName'
    }}


    Here's example JSON:

    Code:
    [{messageId: 21,
    sender: 'JOHN SMITH',
    tos: [{nodeId: 4, nodeName: "NODE NAME"}, {nodeId: 6, nodeName: "NODE NAME 2"}],
    subject: "SUBJECT TEXT"
    }, another message object]
    Thanks for any help you guys can provide!!

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    8,778
    Vote Rating
    240
    Answers
    345
    Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of

      0  


    Join me at SenchaCon 2016!

  3. #3
    Sencha User
    Join Date
    Jul 2015
    Posts
    10
    Vote Rating
    0
    theRedPill is on a distinguished road

      0  

    Default

    sorry I couldn't see it after I submitted so I wasn't sure what happened

  4. #4
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    210
    Vote Rating
    20
    Answers
    41
    jdkhamba will become famous soon enough jdkhamba will become famous soon enough

      0  

    Default

    There is a slightly twisted way to achieve what you are trying through forced rendering of ext components inside grid cells using dom query rendering. Here is a fiddle:

    https://fiddle.sencha.com/#fiddle/tn2

  5. #5
    Sencha User
    Join Date
    Jul 2015
    Posts
    10
    Vote Rating
    0
    theRedPill is on a distinguished road

      0  

    Default

    Your fiddle is exactly what I'm trying to accomplish. I'm having trouble getting it to work in my widget though. When the data is loaded into the store, the To column is showing as blank.

    Here is the snippit of the code I tried:

    Code:
    {
    text: 'To', flex: 2, dataIndex: '', renderer: toRenderer }, { text: 'Draft', flex: 1, dataIndex: 'isDraft', align: 'left' }, { text: 'Publish Date', flex: 1, dataIndex: 'publishDate', align: 'left' }], listeners: { viewready: function(view) { var els = view.el.query('div[ext-xtype]'); Ext.each(els, function(domEl) { var xtype = Ext.get(domEl).getAttribute('ext.xtype'); var rowIndex = Ext.get(domEl).getAttribute('recindex'); var toData = gridPanel.getStore().getAt(rowIndex).get('Tos'); var comboStore = Ext.create('Ext.data.Store', { fields: ['nodeId', 'nodeName'], data: toData }) Ext.widget(xtype, { renderTo: domEl, store: comboStore, displayField: 'nodeName', valueField: 'nodeId' }); }, this); view.up('messagelookup').doLayout(); } }

  6. #6
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    210
    Vote Rating
    20
    Answers
    41
    jdkhamba will become famous soon enough jdkhamba will become famous soon enough

      0  

    Default

    I need to see the full code in order to help you. Please post a new fiddle with some test data and try and replicate the issue.

    One thing I can think of is that the casing might be different in your data 'tos' is in lower case but the 'Tos' in the fiddle is camel case. Check that all the properties name and case are accurate.

  7. #7
    Sencha User
    Join Date
    Jul 2015
    Posts
    10
    Vote Rating
    0
    theRedPill is on a distinguished road

      0  

    Default

    I'm not experienced in creating Fiddle's I'm sorry. I changed the Tos to tos to match the data property, but it still is not showing up. Here is more detailed snippits of code:


    Code:
    Ext.define('MM.view.MessageLookup', {
    	extend: 'Ext.panel.Panel',
    	xtype: 'messagelookup',
    	itemId: 'messageLookup',
        layout: 'border',
        tbar: [{
        	xtype: 'headerfieldcontainer'
        }],
        items: [{
        	xtype: 'messagegrid'
        }, {
        	xtype: 'messagedetails'
        }]
    });

    Code:
    Ext.define('MM.store.MessageGridStore', {
    	extend: 'Ext.data.Store',
    	xtype: 'messagegridstore',
    	itemId: 'messageGridStore',
    	model: 'MM.model.MessageGridModel',
    	proxy: {
    		type: 'memory',
    		reader: {
    			type: 'json'
    		}
    	}
    });

    Code:
    Ext.define('MM.model.MessageGridModel', {
    	extend: 'Ext.data.Model',
    	fields: [{
    		name: 'senderUserName'
    	}, {
    		name: 'from'
    	}, {
    		name: 'classification'
    	}, {
    		name: 'isDraft'
    	}, {
    		name: 'messageId'
    	}, {
    		name: 'nodeId'
    	}, {
    		name: 'planId'
    	}, {
    		name: 'messageType'
    	}, {
    		name: 'info',
    		type: 'auto'
    	}, {
    		name: 'oper'
    	}, {
    		name: 'newsgroup'
    	}, {
    		name: 'procs',
    		type: 'auto'
    	}, {
    		name: 'declassifyDate'
    	}, {
    		name: 'creationDate'
    	}, {
    		name: 'dSlash'
    	}, {
    		name: 'rSlash'
    	}, {
    		name: 'subject'
    	}, {
    		name: 'publishDate'
    	}, {
    		name: 'tos',
    		type: 'auto'
    	}, {
    		name: 'toNames',
    		type: 'auto'
    	}, {
    		name: 'body',
    		type: 'auto'
    	}, {
    		name: 'refs',
    		type: 'auto'
    	}]
    });

    Code:
    var toRenderer = function(value,metadata,record,rowIndex){
        return '<div ext-xtype="combo" recindex=' + rowIndex+ '></div>';
        
    };
    
    
    Ext.define('MM.view.MessageGrid', {
    	extend: 'Ext.grid.Panel',
    	xtype: 'messagegrid',
    	itemId: 'messageGrid',
    	region: 'west',
    	layout: 'fit',
    	width: 700,
    	viewConfig: {stripeRows: false, enableTextSelection: false},
    	autoScroll: true,
    	store: 'MessageGridStore',
    	emptyText: 'No Messages to Display',
    	plugins: [{
    		ptype: 'cellediting',
    		clicksToEdit: 1
    	}],
    	columns: [{
    		text: 'From', 
    		flex: 1,
    		dataIndex: 'from',
    		align: 'left'
    	}, {
    		text: 'Sender',
    		flex: 1,
    		dataIndex: 'senderUserName',
    		align: 'left'
    	}, {
    		text: 'Subject',
    		flex: 1,
    		dataIndex: 'subject',
    		align: 'left'
    	}, {
    		text: 'To', 
    		flex: 2,
    		dataIndex: '',
    		renderer: toRenderer
    	}, {
    		text: 'Draft', 
    		flex: 1,
    		dataIndex: 'isDraft',
    		align: 'left'
    	}, {
    		text: 'Publish Date',
    		flex: 1,
    		dataIndex: 'publishDate',
    		align: 'left'
    	}],
    	listeners: {
    		viewready: function(view) {
    			var els = view.el.query('div[ext-xtype]');
    			Ext.each(els, function(domEl) {
    				var xtype = Ext.get(domEl).getAttribute('ext.xtype');
    				var rowIndex = Ext.get(domEl).getAttribute('recindex');
    				var toData = gridPanel.getStore().getAt(rowIndex).get('tos');
    				var comboStore = Ext.create('Ext.data.Store', {
    					fields: [{name: 'nodeId', type: 'auto'}, {name: 'nodeName', type: 'string'}],
    					data: toData
    				})
    				Ext.widget(xtype, {
    					renderTo: domEl,
    					store: comboStore,
    					displayField: 'nodeName',
    					valueField: 'nodeId'
    				});
    			}, this);
    			view.up('messagelookup').doLayout();
    		}
    	}
    });

  8. #8
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    210
    Vote Rating
    20
    Answers
    41
    jdkhamba will become famous soon enough jdkhamba will become famous soon enough

      0  

    Default

    The approach to use the dom Query rendering removes the need to use a plugin. I am not sure the usage of an editor is interfering with the rendered component.

    Try not using the editor at all.Create a custom component that is extended from combobox and put listeners on that combo in order to update the correct rows.

    Also creating a fiddle is real easy. Just go to fiddle.sencha.com and enter your code, select your framework and version and just save it.

Similar Threads

  1. Grid Panel with combobox in each cell of one column
    By theRedPill in forum Ext: Q&A
    Replies: 2
    Last Post: 24 Sep 2015, 8:08 AM
  2. Replies: 1
    Last Post: 10 Feb 2015, 5:40 AM
  3. Replies: 1
    Last Post: 18 Sep 2014, 9:40 PM
  4. [FIXED] x-grid-cell-last on a one column grid.Panel
    By corneadoug in forum Ext:Bugs
    Replies: 2
    Last Post: 25 Nov 2012, 8:44 PM

Thread Participants: 2

Tags for this Thread