I am looking to build an interface for our users to view & edit a table of sample set properties. Based on the docs I see here, it looks like the LabKey-recommended solution is to use ExtJS to achieve this. I tried to create a quick proof-of-concept example to see how this might work building a very simple interface on a wiki page, but the rendering of the ExtJS grid panel isn't remotely usable in its current form (see attached screenshot). I'm assuming the issue is easily solved by loading an additional stylesheet in my wiki, but I've yet to find one bundled with LabKey that properly renders my ExtJS grids. Is there a step that I'm missing in order to create usable ExtJS components in LabKey?
Below is the code I used to make this example:
<head>
<script type='text/javascript' src='https://mylkserver.brown.edu/labkey/ext-4.2.1/ext-all.js'></script>
<script type='text/javascript'>
LABKEY.requiresExt4ClientAPI(function(){
var lkstore = Ext.create('LABKEY.ext4.data.Store', {
containerPath: '/NDDdb',
schemaName: 'assay.General.NanoDrop QC',
queryName: 'NanoDropQCSummary',
parameters: {'runID': 122},
autoLoad: true
});
var panel = Ext.create('Ext.grid.Panel', {
store: lkstore,
layout: {
type: 'vbox',
align: 'stretch',
padding: 5
},
columns: [{
id: 'sID',
header: 'P number',
dataIndex: 'sID',
flex: 1,
editor: {
allowBlank: false
}
}, {
xtype: 'checkcolumn',
header: 'QC status',
dataIndex: 'QCstat',
width: 60,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
}
}, {
header: '# of reads',
dataIndex: 'nReads',
width: 20,
editor: {
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
lazyRender: true,
listClass: 'x-combo-list-small'
}
}],
selModel: {
selType: 'cellmodel'
},
renderTo: 'QCPanel',
width: 600,
height: 300,
title: 'View QC data',
frame: true
});
})
</script>
</head>
<body>
<div id = "QCPanel" /></form>
</body>
Screen Shot 2018-05-10 at 5.37.14 PM.png