Justin152 Posted June 13, 2018 Share Posted June 13, 2018 Hi, I'm new to using uniGUI and using Sencha. Currently I am developing an application using a UnimDBGrid and I need to add a drop down button to one of the columns. I have tried a couple different approaches but none of them are quite working out. I was hoping someone would be kind enough to see what I might be doing wrong and provide some tips. My first attempt used the UniSession.AddJS call to add a new column and used the renderer procedure to add the necessary html code: UniSession.AddJS('var column = Ext.create(''Ext.grid.column.Column'', { text: ''Action'', width: 70, ' + 'renderer: function(value, metadata, record) {return ''<div class="dropdown"></div>''}});' + 'frmInspectEntry.gridEquipment.getHeaderContainer().insert(frmInspectEntry.gridEquipment.getColumns().length, column);' + 'frmInspectEntry.gridEquipment.refresh();'); This just shows the html as plain text in the grid. For my second attempt I tried to use a template instead, but the cell just appears blank.UniSession.AddJS('var column = Ext.create(''Ext.grid.column.Column'', { text: ''Action'', width: 70, ' + 'xtype: ''templatecolumn'', tpl: ''<tpl><div class="dropdown"></div><tpl>''}); ' + 'frmInspectEntry.gridEquipment.getHeaderContainer().insert(frmInspectEntry.gridEquipment.getColumns().length, column);' + 'frmInspectEntry.gridEquipment.refresh();'); Any guidance would be greatly appreciated Link to comment Share on other sites More sharing options...
Justin152 Posted June 14, 2018 Author Share Posted June 14, 2018 Minor update. I did make some progress in getting a template to apply, but it's changing my header instead of the cells themselves. I figured out I needed to specify a data object along with the template. None of my research shows that this should only change the header though. var column = Ext.create('Ext.grid.column.Column', { text: 'Action', width: 70, xtype: 'templatecolumn', data: {title: 'no data'}, tpl: '<b>Test</b>'}); frmInspectEntry.gridEquipment.getHeaderContainer().insert(frmInspectEntry.gridEquipment.getColumns().length, column); frmInspectEntry.gridEquipment.refresh(); Link to comment Share on other sites More sharing options...
mhmda Posted June 15, 2018 Share Posted June 15, 2018 The exact solution is to use Xtemplate, it is very powerful and you may include inline function inside the template, I always use it especially in mobile. Link to comment Share on other sites More sharing options...
mhmda Posted June 15, 2018 Share Posted June 15, 2018 http://docs.sencha.com/extjs/6.2.0/classic/Ext.XTemplate.html Link to comment Share on other sites More sharing options...
Justin152 Posted June 15, 2018 Author Share Posted June 15, 2018 Thanks for the information mohammad. I've looked through the link and updated my code but something is still not right. The template is changing my header from "Action" to "Test 2" and the html is not being properly rendered in the cells. The header is bold so it's rendering there. I'm not sure if there is some kind of property I need to set to fix this or what. Any insight is appreciated. var column = Ext.create('Ext.grid.column.Column', { text: 'Action', width: 70, xtype: 'templatecolumn', data: {}, tpl: new Ext.XTemplate('<br>Test 2</br>') }); frmInspectEntry.gridEquipment.getHeaderContainer().insert(frmInspectEntry.gridEquipment.getColumns().length, column); frmInspectEntry.gridEquipment.refresh(); Link to comment Share on other sites More sharing options...
mhmda Posted June 15, 2018 Share Posted June 15, 2018 Please refer to sample projects http://forums.unigui.com/index.php?/topic/8954-me-myself-cart-a-new-mobile-app-with-full-source-code/page-1&do=findComment&comment=49590 Link to comment Share on other sites More sharing options...
mhmda Posted June 15, 2018 Share Posted June 15, 2018 Unimdblist>unievents>beforeinit and see the template with functions Link to comment Share on other sites More sharing options...
Justin152 Posted June 20, 2018 Author Share Posted June 20, 2018 Thanks for all the help mohammad. I was finally able to get a button to show. Turns out I needed to set encodeHTML to false for the cell. Here is the code in case anyone else needs to render html in a mobile grid. var column = Ext.create('Ext.grid.column.Column', { text: 'Action', width: 70, xtype: 'gridcolumn', dataIndex: '4', cell: { xtype: 'gridcell', encodeHtml: false }, renderer: function (value, record) {return '<button id="' + value + '" type="button" class="dropbtn">Actions</button>'}}); frmInspectEntry.gridEquipment.getHeaderContainer().insert(frmInspectEntry.gridEquipment.getColumns().length, column); frmInspectEntry.gridEquipment.refresh(); }, Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now