I've run into an issue that is preventing me from clearing the option selected in the dropdown list. I'm using the field OEM in this example which is configured dropdown field (list editor). A dropdown menu opens up with all the values to select, along with the values I've added the clear option into editorParams which generate an x beside the option in the select which you can see in the gif I posted. However it is not allowing me to click it as the edit seems to be losing focus the moment I click that button and is no longer in an editable state.
Any suggestions on how to resolve it?
Select Clear Issue
Tabulator version: 5.2.7
Tabulator constructor:
var quote_tracker = new Tabulator("#quote_tracker", {
ajaxURL: "https://"+"<?php echo $host;?>/data/getQuotes.php", //ajax URL
height: "82vh",
layout: "fitColumns",
//selectable: 1,
pagination:true,
paginationButtonCount:3,
paginationSize:2000,
paginationCounter:"rows",
initialSort:[
{column:"quote_id", dir:"desc"}
],
columns: [ //Define Table Columns
{ title: "Quote #", field: "quote_id", sorter:"number",sorterParams:{alignEmptyValues:"bottom"}, hozAlign: "center", headerHozAlign: "center", tooltip: true, headerTooltip: true, editable:false, contextMenu:cellContextMenu},
{ title: "Sales Person", field: "sales_person" ,sorter:"string",sorterParams:{alignEmptyValues:"bottom"}, hozAlign: "center", headerHozAlign: "center", tooltip: true, headerTooltip: true, editable:false, contextMenu:cellContextMenu},
{ title: "Customer", field: "customer",sorter:"string",sorterParams:{alignEmptyValues:"bottom"}, hozAlign: "center", headerHozAlign: "center", tooltip: true, headerTooltip: true,widthGrow:2, editable:false, contextMenu:cellContextMenu},
{ title: "OEM", field: "oem", sorter:"string",sorterParams:{alignEmptyValues:"bottom"}, hozAlign: "center", headerHozAlign: "center", tooltip: true, headerTooltip: true, editable:false, contextMenu:cellContextMenu,editor:"list",
editorParams:{values:oems,sort:"asc",clearable:true},
cellDblClick:function(e, cell){
cell.edit(editPerms);
}},
{ title: "Program", field: "program",sorter:"string",sorterParams:{alignEmptyValues:"bottom"}, hozAlign: "center", headerHozAlign: "center", tooltip: true, headerTooltip: true, editable:false, contextMenu:cellContextMenu,editable:false,editor:"input",
cellDblClick:function(e, cell){
cell.edit(editPerms);
}},
{ title: "Description", field: "description",sorter:"string",sorterParams:{alignEmptyValues:"bottom"}, hozAlign: "center", headerHozAlign: "center", tooltip: true, headerTooltip: true,widthGrow:2,editable:false,editor:"input", contextMenu:cellContextMenu,
validator:function(cell,value){
if(value.trim() == ""){
return false;
} else {
return true;
}
},
cellDblClick:function(e, cell){
cell.edit(editPerms);
}},
{ title: "Contact", field: "contact",sorter:"string",sorterParams:{alignEmptyValues:"bottom"}, hozAlign: "center", headerHozAlign: "center", tooltip: true, headerTooltip: true,editable:false,editor:"input", contextMenu:cellContextMenu,
cellDblClick:function(e, cell){
cell.edit(editPerms);
}},
{ title: "Location", field: "folder_location",sorter:"string",sorterParams:{alignEmptyValues:"bottom"}, hozAlign: "center", headerHozAlign: "center", tooltip: true, headerTooltip: true,widthGrow:2, editable:false,contextMenu:cellContextMenu},
{ title: "Comments", field: "comments", sorter:"string",sorterParams:{alignEmptyValues:"bottom"}, hozAlign: "center", headerHozAlign: "center", tooltip: true, headerTooltip: true ,widthGrow:2,editable:false,editor:"input",contextMenu:cellContextMenu,
cellDblClick:function(e, cell){
cell.edit(editPerms);
}},
{ title: "Created Date", field: "create_date", sorter:"string",sorterParams:{alignEmptyValues:"bottom"}, hozAlign: "center", headerHozAlign: "center", tooltip: true, headerTooltip: true, editable:false, contextMenu:cellContextMenu, formatter:"datetime", formatterParams:{inputFormat:"yyyy-MM-dd HH:mm:ss",outputFormat:"yyyy-MM-dd"}},
//{ title: "Created By", field: "created_by", hozAlign: "center", headerHozAlign: "center", tooltip: true, headerTooltip: true },
],
});
Upgrading to Tabulator Version 5.3 resolved this issue.
Related
I have the following code for the node.js high-Charts export-server the legend is showing but the label formatted is not applied and the function is not executed also
I have tried the load function also and it is not working, I tried custom HTML and it is now showing also
let chartDetails = {
type: "png",
options: {
chart: {
type: "pie",
showInLegend: true,
dataLabels: {
enabled: false
}
},
title: {
align: 'left',
floating: false,
text: 'Main Title',
style: {
fontSize: '24px'
}
},
subtitle: {
verticalAlign: 'middle',
align: 'center',
floating: false,
text: '<b>300</b><br>Total Issues',
style: {
fontSize: '30px'
}
},
plotOptions: {
pie: {
innerSize: '70%',
shadow: false,
showInLegend: true,
dataLabels: {
enabled: false,
}
}
},
legend: {
enabled: true,
floating: true,
borderWidth: 0,
align: 'right',
layout: 'vertical',
verticalAlign: 'middle',
useHTML: true,
labelFormatter: function () {
console.log("this: is equal to ");
console.log(this);
return 'custom word';
}
}
,
series: [
{
data: [
{
name: "a",
y: 100
},
{
name: "b",
y: 20
},
{
name: "c",
y: 50
}
]
}
]
}
};
I expected 'custom word' instead 'a','b','c' is showing
It seems when using node-export-server as a module callback functions are not supported. Check this thread on the module github: https://github.com/highcharts/node-export-server/issues/122.
As a workaround, you can use labelFormat property instead of labelFormatter:
legend: {
enabled: true,
floating: true,
borderWidth: 0,
align: 'right',
layout: 'vertical',
verticalAlign: 'middle',
useHTML: true,
labelFormat: "custom word"
}
I was wondering what would be the best way of achieving a layout like this in extJS:
I have 4 different components that I would like to place in each respective box but am having trouble figuring out exactly how I can do it.
Here is a snippet of some code I have been working on:
Ext.define('/../../../chefCreateAndPinRolesLayoutContainer', {
extend: 'Ext.container.Container',
height: '100%',
width: '100%',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
items: [
Ext.create('/../../../chefRequiredCookbooksGridPanel'),
Ext.create('/../../../chefRoleSetupFormPanel')
]
}, {
flex: 1,
items: [
Ext.create('/../../../chefOptionalCookbooksGridPanel'),
Ext.create('/../../../chefAttributeGridContainer')
]
}]
});
Here is what my current layout comes out to:
I'd like for it to fill the whole Tab Panel and have equal widths and heights per section.
Any ideas?
Thanks
You can try the below snippet, where internal container items(A, B, C, D) can be replaced with your custom items.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
border: 1,
items: [
{
xtype: 'container',
html: 'Cell A content',
flex: 1
},{
xtype: 'container',
html: 'Cell B content',
flex: 1
}
]
}, {
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'container',
html: 'Cell C content',
flex: 1
},{
xtype: 'container',
html: 'Cell D content',
flex: 1
}
]
}]
}]
});
}
});
i have a treegrid and i need to make it as editorGrid.
My treegrid is
var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
height: 500,
renderTo: Ext.getBody(),
autoLoad:false,
plugins: [editor],
columns:[
{
header: 'Name',
dataIndex: 'name',
width: 230
},{
header: 'length',
width: 150,
sortType: 'asFloat',
dataIndex: 'length'
},{
header: 'size',
width: 150,
sortType: 'asFloat',
dataIndex: 'size'
},{
header: 'dataType',
width: 150,
dataIndex: 'dataType'
},{
header: 'extName',
width: 150,
dataIndex: 'extName'
},{
header: 'overlay',
width: 150,
dataIndex: 'overlay'
},{
header: 'qualified',
width: 150,
dataIndex: 'qualified'
}],
loader: myTreeLoader
});
and the editor which i used is
var editor = new Ext.ux.grid.RowEditor({
saveText: 'Save',
errorSummary : true,
monitorValid: true,
clicksToEdit: 1,
// floating: true,
shadow: true,
layout: 'hbox',
cls: 'x-small-editor',
buttonAlign: 'center',
baseCls: 'x-row-editor',
elements: 'header,footer,body',
frameWidth: 5,
buttonPad: 3,
focusDelay: 250,
cancelText: 'Cancel',
//commitChangesText: 'You need to Update or Cancel your changes',
// errorText: 'Errors',
defaults: {
normalWidth: true
}
});
it gives an error "Object doesn't support this property or method"
Could Someone pls give a solution
The "Ext.ux.tree.TreeGrid" in Extjs v3.x.x is not a real "grid" (based on treepanel + treeloader...), that's why you can't use "Ext.ux.grid.RowEditor" (because roweditor need a grid + store...).
2 Solutions:
Switch to Extjs v4.x.x and you can use "Ext.grid.plugin.CellEditing":
ExtJs TreeGrid with editor column. Exists?
Override createNode (in "Ext.ux.tree.TreeGridLoader") or modify the "Ext.ux.tree.TreeGridNodeUI":
http://www.sencha.com/forum/showthread.php?118393-treegrid-checkbox-extension
Checkbox Column in ExtJS TreeGrid
(Examples to put checkboxes you can modify to put others components...)
Good luck...
i have the problem with displaying fields on form
var test = Ext.create('Ext.form.Panel', {
renderTo: 'test',
title: '1. zzzz',
width: 800,
bodyPadding: 5,
defaults: {
anchor: '100%'
},
items: [
{
xtype: 'fieldset',
defaults: {
anchor: '100%'
},
layout: 'column',
items: [
{
xtype: 'panel',
fieldDefaults: {
msgTarget: 'side',
labelWidth: 75
},
columnWidth: .5,
flex: 1,
defaultType: 'textfield',
defaults: {
anchor: '100%',
flex: 1
},
items: [
{
xtype: 'numberfield',
hideTrigger: true,
fieldLabel: 'zzzz',
//anchor: '100%',
//anchor: '-5',
name: 'SRD_NUMBER'
},
{
fieldLabel: 'zzzz',
//anchor: '-5',
name: 'SRD_NAME_BR'
},
{
fieldLabel: 'zzzzz',
//anchor: '-5',
name: 'SRD_NAME_FL'
},
{
xtype: 'numberfield',
hideTrigger: true,
fieldLabel: 'zzzz',
disabled: true,
//anchor: '-5',
name: 'SRD_FOP'
},
{
fieldLabel: 'zzzz',
//anchor: '-5',
name: 'SRD_NAME_ORDER'
},
{
xtype: 'panel',
id: 'dep-img',
border: false,
height: 50,
width: 100,
cls: 'x-form-item',
html: '<img src="http://dep-image/id/10000001482" width="100" height="50" title="zzz">'
},
{
xtype: 'filefield',
name: 'file1',
msgTarget: 'side',
border: 3,
//anchor: '100%',
fieldLabel: 'zzzz',
buttonText: 'zzzzzz'
},
{
fieldLabel: 'zzz',
//anchor: '-5',
name: 'company'
},
{
fieldLabel: 'zzzz',
//anchor: '-5',
name: 'company'
}]
}
]
} //fieldset
]//glob
});
i need to fit fields width to column width.
on this page http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.FieldContainer 2 examples
and in second example they set defaults {layout: '100%'} and it looks like it does not work.
found own salvation: by adding layout: 'fit' or layout: 'anchor' to fieldset anchor
defaults: {
layout: 'fit',
flex: 1
},
thanks to all
You must set height property to your form and if it still is not displaying then give height to fieldset too.
found own salvation: by adding layout: 'fit' or layout: 'anchor' to fieldset anchor
defaults: {
layout: 'fit',
flex: 1
},
thanks to all
I would specify layout:'fit' on the formPanel since you are using a single fieldset.
The rest i dont understand. It looks like you specify column layout but using just one column.
Could you clean up the example and i would be happy to help.
After a quick look... Have you tried putting anchor: '0' on both fields and containers?
Also, you should use fieldDefaults instead of
defaults: {
anchor: '100%',
flex: 1
},
I need to create an advanced, fluid Border layout for our Report system.
The West pane would be split into 2 separate panes, top for the filter form, and the bottom for navigation.
The Center pane would be split into 3 separate panes, top for the primary data grid, and 2 bottom panes for sub report grids. I may at some point need 3 bottom panes, but I'm hoping to avoid that.
Here is an example of what I am looking for: http://dl.dropbox.com/u/298258/Amistaff/desiredLayout.png
What I have so far is definitely less than satisfactory.
http://dl.dropbox.com/u/298258/Amistaff/currentLayout.png
Here is the code:
var ReportForm = new Ext.FormPanel({
url: '',
frame: false,
border: false,
title: 'Filter Results',
width: 260,
labelWidth: 50,
padding: '10 0 0 5',
standardSubmit: true,
items: [
{
fieldLabel: 'Client',
hiddenName: 'ClientID',
mode: 'local',
store: frmClientStore,
displayField: 'CompanyName',
valueField: 'ClientID',
width: 150,
editable: true,
triggerAction: 'all',
xtype: 'combo'
}
],
buttons: [
{text:'Export',handler:function(){}},
{text:'Search',handler:function(){}},
{text:'Reset',handler:function(){}}
]
});
var ReportGrid = new Ext.grid.GridPanel({
id: 'ReportGrid',
width: '100%',
height: '50%',
viewConfig: {
forceFit: true
},
autoHeight: true,
loadMask: true,
stripeRows: true,
store: ReportStore,
margins: '5 5 5 5',
cm: ReportColumnModel
,bbar: new Ext.PagingToolbar
(
{
pageSize: 10,
store: ReportStore,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}'
}
)
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'west',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
width: 260,
minSize: 175,
maxSize: 400,
margins: '5 5 5 5',
items: [
ReportForm,
{
region: 'south',
title: 'Superuser',
border: false,
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: 'General',
xtype: 'panel',
height: 200,
html: '',
},
{
title: 'Exams',
height: 200,
html: ''
}
]
}
]
},
new Ext.Panel({
region: 'center',
deferredRender: false,
layout: 'fit',
margins: '5 5 5 0',
items: [
ReportGrid,
new Ext.Panel({
region: 'south',
border: false,
height: '50%',
html: 'foo',
layout: 'fit',
items: [
new Ext.Panel({
region: 'west',
width: '50%',
border: false,
html: 'West'
}),
new Ext.Panel({
region: 'east',
width: '50%',
border: false,
html: 'East'
})
]
})
]
})
]
});
Thanks...
EDIT:
Many thanks to amol for the answer below. I have one additional question. If I collapse the form in the west region, how do I make it resize the navigation panel to fill the remaining space?
code -
var ReportForm = new Ext.FormPanel({
url: '',
frame: false,
border: false,
title: 'Filter Results',
width: 260,
labelWidth: 50,
padding: '10 0 0 5',
standardSubmit: true,
items: [
{
fieldLabel: 'Client',
hiddenName: 'ClientID',
mode: 'local',
//store: frmClientStore,
displayField: 'CompanyName',
valueField: 'ClientID',
width: 150,
editable: true,
triggerAction: 'all',
xtype: 'combo'
}
],
buttons: [
{text:'Export',handler:function(){}},
{text:'Search',handler:function(){}},
{text:'Reset',handler:function(){}}
]
});
var ReportGrid = new Ext.grid.GridPanel({
id: 'ReportGrid',
flex:1,
viewConfig: {
forceFit: true
},
loadMask: true,
stripeRows: true,
//store: ReportStore,
margins: '5 5 5 5',
cm: new Ext.grid.ColumnModel({
columns:[
{header:'A column', dataIndex:'afield'},
{header:'B column', dataIndex:'bfield'}
]
}),
store:new Ext.data.ArrayStore({
autoLoad:true,
fields:['afield', 'bfield'],
data:[['value 1','value 3'],['value 2', 'value4']]
}),
bbar: new Ext.PagingToolbar
(
{
pageSize: 10,
//store: ReportStore,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}'
}
)
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'west',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
width: 260,
minSize: 175,
maxSize: 400,
margins: '5 5 5 5',
items: [
ReportForm,
{
region: 'south',
title: 'Superuser',
border: false,
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: 'General',
xtype: 'panel',
height: 200,
html: ''
},
{
title: 'Exams',
height: 200,
html: ''
}
]
}
]
},
new Ext.Panel({
region: 'center',
deferredRender: false,
layout: 'vbox',
layoutConfig:{align:'stretch'},
margins: '5 5 5 0',
items: [
ReportGrid,
{
border: false,
flex:1,
layout: 'hbox',
layoutConfig:{align:'stretch'},
defaults:{flex:1},
items: [
new Ext.Panel({
html: 'West'
}),
new Ext.Panel({
html: 'East'
})
]
}
]
})
]
});