I have installed ngx-quill, quill with npm install. i was wondering how to add table functionality to the toolbar like this code pen
https://codepen.io/quill/pen/QxypzX
but would appreciate if i can add this functionality as a drop down list
i have tried to add it to the DOM manually but it doesn't apply and also have tried adding it to the Toolbar the button appears but how can i access this functionality.
public config = {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ header: 1 }, { header: 2 }],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ script: 'sub' }, { script: 'super' }],
[{ indent: '-1' }, { indent: '+1' }],
[{ direction: 'rtl' }],
[{ size: ['small', false, 'large', 'huge'] }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }],
[{ font: [] }],
[{ align: [] }],
['clean'],
['table'], // Inputted table Button
],
};
Related
I have to display a bar chart which has mixed data in the store with negative and positive values to be shown on y-axis. I want to display the chart like in this image: https://assets.highcharts.com/images/demo-thumbnails/highcharts/column-negative-default.png
var store = Ext.create('Ext.data.Store', {
fields: ['name','someField'],
data: [{
"name": "A",
"someField": -21414
}, {
"name": "B",
"someField": 22034
}, {
"name": "C",
"someField": -16270
}, {
"name": "D",
"someField": 20838
}, {
"name": "X",
"someField": 2720
}]
})
Ext.create('Ext.panel.Panel', {
items: [{
xtype: 'cartesian',
width: '100%',
height: 500,
store: store,
insetPadding: 40,
innerPadding: {
left: 40,
right: 40
},
axes: [{
type: 'numeric',
fields: 'someField',
position: 'left'
}, {
type: 'string',
fields: 'name',
position: 'bottom',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'someField',
}]
}]
});
The origin should be at 0.
I tried using postion:'radial' in place of 'bottom', but, using this removes the x-axis and also the labels are not seen.
How can I reverse the y-axis values so that they can be flipped below x-axis(upside down)?
I am trying to render sencha touch charts in an app,
following is the code of that view.
Ext.define('xxxx.view.dashboard.EventAnalyticsChart', {
extend : 'Ext.Panel',
xtype : 'analyticsChartPanel',
requires:['Ext.chart.grid.HorizontalGrid',
'Ext.chart.grid.VerticalGrid'],
initialize : function() {
},
config : {
layout:{
type:'card'
},
items : [
{
// Toolbar to be displayed on the File Rack Screen
xtype : 'toolbar',
ui : 'light',
docked : 'top',
title : "Dashboard",
},
{
xtype:'panel',
docked : 'top',
height:60,
layout:{
type:'vbox',
align:'center',
pack:'center'
},
items:[
{
xtype : 'chart',
background: 'white',
flipXY: true,
legend: {
position: "bottom"
},
store: {
fields: ['name', 'g1', 'g2', 'g3'],
data: [
{"name": "Work", "g1": 2.67, "g2": 14.87, "g3": 0.41},
{"name": "Office", "g1": 1.90, "g2": 5.72, "g3": 14.80},
{"name": "Google", "g1": 18.34, "g2": 0.04, "g3": 22.35},
{"name": "Facebook", "g1": 21.37, "g2": 2.13, "g3": 12.98},
]
},
interactions: ['panzoom'],
//set legend configuration
legend: {
position: 'right',
width: 80
},
//define the x and y-axis configuration.
axes: [
{
type: 'numeric',
position: 'bottom',
grid: true,
minimum: 0
},
{
type: 'category',
position: 'left'
}
],
series: [
{
type: 'bar',
xField: 'name',
yField: ['g1', 'g2', 'g3'],
axis: 'bottom',
highlight: true,
showInLegend: true,
style: {
stroke: 'rgb(40,40,40)',
maxBarWidth: 30
},
// Cycles the red, green, and blue fill mode over the 2008, 2009,.., 2011, 2012 items
// subStyle parameters also override style parameters
subStyle: {
fill: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"]
}
}
]
}
],
}
});
After building the sencha code, when the packaged code is run i get the below error.
Uncaught TypeError: Cannot call method 'substring' of undefined app.js:1
i think i am not loading some of the classes needed for the charts. Please do guide me with this.
thanks in advance.
Working fine after including following classes.
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.chart.series.Line',
'Ext.chart.interactions.PanZoom',
'Ext.chart.series.Bar'
I am creating two grids on my view. These two grids will be able to drag and drop items from one another as well as to themselves. Also, these grids must be editable. I am using rowediting plugin to edit the grid but I always get the error "Uncaught TypeError: Cannot call method 'getSelectionModel' of undefined." Without plugin the grid works fine and I don't get any error. What is the problem? Can someone point out? The code for my grid is:
Ext.define('DHT.view.Configuration.CategoriesConfig', {
extend: 'Ext.panel.Panel',
requires: ['DHT.model.Category','Ext.grid.*'],
alias: 'widget.categoriesconfig',
layout: {
type: 'hbox',
align: 'stretch'
},
floating: true,
closable: true,
modal: true,
height: 500,
width: 800,
title: 'Question Categories',
items: [{
xtype: 'grid',
title: 'Invisible',
width: '47%',
selType: 'rowmodel',
viewConfig: {
plugins: [{
ptype :'rowediting',
clicksToEdit: 2
},{
ptype: 'gridviewdragdrop',
dragGroup: 'invisible',
dropGroup: 'visible'
}, {
ptype: 'gridviewdragdrop',
dragGroup: 'invisible',
dropGroup: 'invisible'
}]
},
store: {
model: 'DHT.model.Category',
data: [
{ 'QuestionTypeID': 1, 'Description': 'A', 'SortOrder': 1 },
{ 'QuestionTypeID': 2, 'Description': 'B', 'SortOrder': 2 },
{ 'QuestionTypeID': 3, 'Description': 'C', 'SortOrder': 3 },
{ 'QuestionTypeID': 4, 'Description': 'D', 'SortOrder': 4 }
]
},
columns: [{
xtype: 'actioncolumn',
id: 'deleteButton',
width: '5%',
align: 'center',
items: [{
icon: 'Images/delete.png', tooltip: 'Delete'
}]},
{
header: 'Order',
dataIndex: 'SortOrder',
width: '34%',
sortable: false,
menuDisabled: true
},
{
header: 'Description',
editable: true,
editor: {
xtype: 'textfield',
allowBlank: false
},
dataIndex: 'Description',
width: '58%',
sortable: false,
menuDisabled: true
}]
},
{
xtype: 'panel',
title: '',
width: '6%',
title: ' '
},
{
xtype: 'grid',
title: 'Visible',
selType: 'rowmodel',
width: '47%',
viewConfig: {
plugins: [{
ptype :'rowediting',
clicksToEdit: 2
},{
ptype: 'gridviewdragdrop',
dragGroup: 'visible',
dropGroup: 'invisible'
}, {
ptype: 'gridviewdragdrop',
dragGroup: 'visible',
dropGroup: 'visible'
}]
},
store: {
model: 'DHT.model.Category',
data: [
{ 'QuestionTypeID': 5, 'Description': 'E', 'SortOrder': 1 },
{ 'QuestionTypeID': 6, 'Description': 'F', 'SortOrder': 2 },
{ 'QuestionTypeID': 7, 'Description': 'G', 'SortOrder': 3 },
{ 'QuestionTypeID': 8, 'Description': 'H', 'SortOrder': 4 }
]
},
columns: [{
xtype: 'actioncolumn',
id: 'deleteButton',
width: '5%',
align: 'center',
items: [{
icon: 'Images/delete.png', tooltip: 'Delete'
}]},
{
header: 'Order',
dataIndex: 'SortOrder',
width: '34%',
sortable: false,
menuDisabled: true
},
{
header: 'Description',
editable: true,
editor: {
xtype: 'textfield',
allowBlank: false
},
dataIndex: 'Description',
width: '58%',
sortable: false,
menuDisabled: true
}]
}]
});
My model:
Ext.define('DHT.model.Category', {
extend: 'Ext.data.Model',
fields: [
{
name: 'QuestionTypeID',
dataType: 'int'
},
{
name: 'Description',
dataType: 'string'
},
{
name: 'SortOrder',
dataType: 'int'
}
],
idProperty: 'QuestionTypeID'
});
The rowediting-plugin isn't type of the viewconfig, but a plugin of the grid itself, therefore you have to define it like this:
viewConfig: {
plugins: [
{
ptype: 'gridviewdragdrop',
dragGroup: 'invisible',
dropGroup: 'visible'
}, {
ptype: 'gridviewdragdrop',
dragGroup: 'invisible',
dropGroup: 'invisible'
}
]
},
plugins: {
ptype :'rowediting',
clicksToEdit: 2
},
I have a toolbar with some buttons. I want the buttons in the toolbar to be aligned to the right. How can I do that ? This is the code
items: [{
xtype: 'toolbar',
dock: 'top',
buttonAlign: 'right', // This one does not wrok
align: 'right', // This one does neither
items: [{
text: 'Foo1'
}, {
text: 'Foo2'
}, {
text: 'Foo3'
}]
}, {
// Some other items
}]
Add a Ext.toolbar.Fill before your other buttons:
items: [
{ xtype: 'tbfill' },
{ text: 'Foo1' },
{ text: 'Foo2' },
{ text: 'Foo3' }
]
A shortcut for this is to use '->':
items: [
'->',
{ text: 'Foo1' },
{ text: 'Foo2' },
{ text: 'Foo3' }
]
I have the following code which creates an expandable tree panel inside of a tree store. My problem is that with the autoscroll true and scroll true I have a scroll bar already.
When I expand a folder in the tree a gridscroll is created and appended to the main container creating two scroll bars side by side.
how can I trap the expanding folder and prevent the grid scroller from being rendered?
I think it is setAutoScroll(false) method on the column but I can't figure out how to set it.
Ext.Loader.setConfig({
enabled: true,
disableCaching: false
});
Ext.require(['Ext.form.*', 'Ext.tree.*', 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.tip.QuickTipManager', 'Ext.ux.grid.FiltersFeature', 'Ext.ModelManager']);
Ext.onReady(function() {
Ext.define('model1', {
extend: 'Ext.data.Model',
fields: [{
name: 'text',
type: 'string'
}, {
name: 'pathInfo',
type: 'string'
}]
});
storeAddTo = Ext.create('Ext.data.TreeStore', {
model: 'model1',
folderSort: true,
root: {
expanded: true,
children: myJSONTextAddTo
}
});
var treeConfigAddTo = {
//title: 'Select an existing folder from the list',
id: 'grid-foldersAddTo',
width: 320,
height: 330,
store: storeAddTo, //
rootVisible: false,
useArrows: true,
singleExpand: false,
renderTo: 'grid-foldersAddTo',
columns: [{
xtype: 'treecolumn',
text: 'Folders',
flex: 1,
sortable: false,
dataIndex: 'text',
filterable: false
}],
viewConfig: {
autoScroll: true,
scroll: true,
}
}
treeAddTo = Ext.create('Ext.tree.Panel', treeConfigAddTo);
});
data (myJSONTextAddTo)
[{
text: "Cars",
"pathInfo": "Cars",
children: [{
text: "Luxury",
"pathInfo": "Cars\\Luxury\\Bentley",
children: [{
text: "Bentley",
"pathInfo": "Cars\\Luxury\\Bentley",
children: []
}, {
text: "Porsche",
"pathInfo": "Cars\\Luxury\\Porsche",
children: [{
text: "Cars",
"pathInfo": "Cars\\Luxury\\Porsche\\Cars\\Luxury\\Porsche",
children: [{
text: "Luxury",
"pathInfo": "Cars\\Luxury\\Porsche\\Cars\\Luxury\\Porsche",
children: [{
text: "Porsche",
"pathInfo": "Cars\\Luxury\\Porsche\\Cars\\Luxury\\Porsche",
children: []
}]
}]
}]
}]
}, {
text: "Dealers",
"pathInfo": "Cars\\Dealers",
children: []
}, {
text: "Ferrari",
"pathInfo": "Cars\\Ferrari",
children: []
}, {
text: "Sports",
"pathInfo": "Cars\\Sports",
children: [{
text: "Chevy",
"pathInfo": "Cars\\Sports\\Chevy",
children: []
}]
}, {
text: "mycar",
"pathInfo": "Cars\\mycar",
children: []
}, {
text: "test2",
"pathInfo": "Cars\\test2",
children: []
}, {
text: "test3",
"pathInfo": "Cars\\test3",
children: []
}, {
text: "test4",
"pathInfo": "Cars\\test4",
children: []
}, {
text: "test5",
"pathInfo": "Cars\\test5",
children: []
}, {
text: "test 6",
"pathInfo": "Cars\\test 6",
children: [{
text: "Test 6.1",
"pathInfo": "Cars\\test 6\\Test 6.1",
children: []
}]
}]
}]
Take a look at this fiddle: http://jsfiddle.net/dbrin/Qc5XV/
I removed the view configs you had and removed the height constraint to allow the tree to grow. I hope that's what you were after. If you wanted to fix the height then uncomment the height config and the tree panel will auto scroll when needed. This seems right to me. You might have other panels surrounding the tree that are giving you problems if so, please let me know the layout and we can troubleshoot it further. Hope this helps.