I'm using Grapejs with Vue and so far it seems to work fine, I'm having a problem with the "grapesjs-preset-webpage" library.
I am not able to add more HTML options, such as "Columns", "Videos" and other settings that at least appear when using the CDN.
My question would be how do I add more blocks beyond the 3 that already come as default?
(link-block, qyote, text-basic).
My configuration file is like this:
<script>
import grapesjs from 'grapesjs'
import 'grapesjs/dist/css/grapes.min.css'
import 'grapesjs/dist/grapes.min.js'
import plugin from 'grapesjs-preset-webpage';
export default {
name: 'BuilderHtml',
mounted(){
grapesjs.init({
container: '#gjs',
height: '900px',
width: '100%',
plugins: [plugin],
storageManager: {
id: 'gjs-',
type: 'local',
autosave: true,
storeComponents: true,
storeStyles: true,
storeHtml: true,
storeCss: true,
},
deviceManager: {
devices:
[
{
id: 'desktop',
name: 'Desktop',
width: '',
},
{
id: 'tablet',
name: 'Tablet',
width: '768px',
widthMedia: '992px',
},
{
id: 'mobilePortrait',
name: 'Mobile portrait',
width: '320px',
widthMedia: '575px',
},
]
},
pluginsOpts: {
[plugin]: {
blocksBasicOpts: {
blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video'],
flexGrid: 1,
},
blocks: ['link-block', 'quote', 'text-basic', 'column3'],
},
}
})
}
}
</script>
I'm trying to add this configuration below, but no new block is appearing, did I do something wrong?
Related
My vue-echarts is not included in the dom. I am using the code from this link.
GitHub (npmjs.com)
I am using the vue2 version with the latest version of nuxt.
<template>
<v-chart class="chart" :option="option" />
</template>
<script>
import { use } from "echarts/core"
import { CanvasRenderer } from "echarts/renderers"
import { PieChart } from "echarts/charts"
import {
TitleComponent,
TooltipComponent,
LegendComponent
} from "echarts/components"
import VChart, { THEME_KEY } from "vue-echarts"
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent
])
export default {
name: "HelloWorld",
components: {
VChart
},
provide: {
[THEME_KEY]: "dark"
},
data() {
return {
option: {
title: {
text: "Traffic Sources",
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "left",
data: [
"Direct",
"Email",
"Ad Networks",
"Video Ads",
"Search Engines"
]
},
series: [
{
name: "Traffic Sources",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{ value: 335, name: "Direct" },
{ value: 310, name: "Email" },
{ value: 234, name: "Ad Networks" },
{ value: 135, name: "Video Ads" },
{ value: 1548, name: "Search Engines" }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
}
};
}
};
</script>
<style scoped>
.chart {
height: 400px;
}
</style>
I had an error earlier that said: SyntaxError Unexpected token 'export' but resolved it with the solution provided on the link :
https://github.com/ecomfe/vue-echarts/issues/536
What could be causing the chart to be not included in the DOM.
I found the issue, All I needed was to include the following module:
buildModules: ["#nuxtjs/composition-api/module"]
in my nuxt.config.js file.
My package.json file needed both of the following packages installed as well:
"devDependencies": {
"#nuxtjs/composition-api": "^0.29.2",
"#vue/composition-api": "^1.2.2"
}
A working version can be found at here.
I am creating my dashboard like this But when I render it, both my parts come vertically instead of being horizontol.Also there is a splitter vertical height between these two parts.How can I make them appear horizontally.
xtype: 'dashboard',
defaultContent: [
{
type: 'dashChart',
title: 'Graph 1',
columnIndex: 0,
height: 300
},
{
type: 'dashChart1',
title: 'Graph 2 ',
columnIndex: 1,
height: 300
}
],
parts: {
dashChart: {
viewTemplate: {
collapsible: false,
resizable: false,
layout: 'fit',
items: [
{
xtype: 'webdashboardpiechart'
}
]
}
},
dashChart2: {
viewTemplate: {
collapsible: false,
resizable: false,
layout: 'fit',
items: [
{
xtype: 'webdashboardareachart'
}
]
}
}
},
maxColumns: 2
}
Quick question I can not seem to get the accordion button to move from the right to the left and was wondering is there a specific way of doing it i have checked the docs but can not seem to do it. I have added some code and I cant add a image due to lack of reputation.
[EDIT]
I want move the accordion button before the Title.
{
xtype: "panel",
id: "calendarLeftMenu",
layout: {
type: 'accordion',
titleCollapse: true,
animate: false,
activeOnTop: false,
multi: true,
buttonAlign:"left"
},
items: [
{
xtype: "panel",
title: "Releases",
left: "0px",
buttonAlign:"left",
id: "release-panel",
style: "padding-left: 1px;",
listeners: {
beforeexpand: {
fn: function () {
if (Ext.get('release-on-btn').dom.className === 'switch-small-off-icon') {
return false;
}
}
}
},
tools: [
{
type: 'mytool',
id: 'release-collapse-btn',
renderTpl: releaseTabSwitcher,
width: 60,
region: "west",
weight: 100,
}
]
Figured it out.
header:{
titlePosition: 1
},
i want to add multiselect functionality to a field.
here is my current code for configuring jtable.
how to implement multiselect functionality for a specified field
fields: {
firstName: {
title: 'name',
width: '20%'
},
surname: {
title: 'surname',
width: '20%'
},
userName: {
title: 'username',
width: '20%',
key: true,
create: true
},
enabled: {
title: 'status',
type: 'radiobutton',
options: [
{Value: true, DisplayText: 'enabled'},
{Value: false, DisplayText: 'disabled'}
],
width: '20%'
},
roles: {
/***********************************************
// i wanna to enable multi-select for this field
/***********************************************
title: 'roles',
options: [
{Value: "ROLE_ADMIN", DisplayText: "admin"},
{Value: "ROLE_USER", DisplayText: "user"}
]
}
}
Field Type should be multiselectddl
Make sure you are using the jTable files available in this repository
https://github.com/stanleyta/jtable/commit/6876303615a239dc409dee481a877a8f934f340d
I am trying to create a grid with store having PagingMemoryProxy.
Pagination is working and I can see as well as change all pages
but the loadmask won't disappear so I am not able to edit the grid data.
here is my code
Ext.require('Ext.ux.data.PagingMemoryProxy');
var data = {
Accounts: [{
id: 1,
name: 'Ed Spencer'
}, {
id: 2,
name: 'Abe Elias'
}, {
id: 3,
name: 'Tom Elias'
}]
};
Ext.define('Account', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'string'
}, {
name: 'name',
type: 'string'
}]
});
var store = Ext.create('Ext.data.Store', {
storeId: 'myStore',
pageSize: 2,
model: 'Account',
data : data,
proxy: {
type: 'pagingmemory',
reader: {
type: 'json',
root: 'Accounts'
}
},
});
var pagingBar = new Ext.PagingToolbar({
store: store,
displayInfo: true,
displayMsg: 'Displaying Accounts {0} - {1} of {2}',
emptyMsg: "No Accounts to display"
});
var grid = new Ext.create('Ext.grid.Panel', {
title: 'Accounts',
store: store,
columns: [{
header: 'Id',
dataIndex: 'id',
editor: 'textfield'
}, {
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1,
pluginId: 'rowEditing'
})],
height: 200,
width: 400,
loadMask: false,
renderTo: "editor-grid",
bbar: pagingBar
});
Store load event is getting fired and I can see greyed out data behind the loading mask
Firbug is showing no error.
I am using Extjs 4.1.3. Any idea what's the problem.
Thanks in advance
Looks like a known bug, think its fixed in Extjs 4.2.1
As a temporary fix, you can hide the mask 'on store load' using
grid.getView().setLoading(false);
Sample here : https://fiddle.sencha.com/#fiddle/1v9