This is my code and I have installed the node module too but it's not working.
var editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
fromElement: true,
plugins: ["gjs-blocks-basic"],
pluginsOpts: {
"gjs-blocks-basic": {
block: {
category: 'basic',
}
}
},
I think you have an extra key block inside plugin options, it should be category.
const editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
fromElement: true,
plugins: ["gjs-blocks-basic"],
pluginsOpts: {
"gjs-blocks-basic": {
category: "Basic"
}
});
customize plugin doesn't add in single quote
const editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload:0,
container: '#gjs',
plugins: ['gjs-preset-webpage',myPlugin,'myNewComponentTypes' ],
pluginsOpts: {
'grapesjs-plugin-export': { /*option*/ },
'myPlugin':{ category: "myPlugin"},
},
Make plugin in function Reference
//PLUGIN
function myPlugin(editor) {
editor.BlockManager.add('my-block',{
label:'Plug',
category: 'Basic',
content:'<div class="my-block"><p>Plugin Success</p></div>',
});
}
Try this:
const editor = grapesjs.init({
container: "#editor",
fromElement: true,
width: "auto",
storeManager: false,
plugins: [gjsBlockBasic],
pluginsOpts: {
gjsBlockBasic: {},
},
blockManager: {
appendTo: "#blocks",
},
})
Add "blocks" to a div where you want to display block basic options.
<div id="blocks"/>
Related
I am creating a new project in that I am using Grid.
Here is my grid.
Ext.define('myProj.view.base.grid.myGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.myGrid',
controller: 'myProj-controller-base-grid-myGridcontroller',
requires: [
"myProj.controller.base.grid.myGridcontroller",
'Ext.grid.feature.Grouping',
'Ext.grid.plugin.BufferedRenderer',
'Ext.grid.filters.Filters',
],
mixins: ['Deft.mixin.Injectable'],
inject: ["gridStore"],
config: {
gridStore: null,
},
emptyText : "No data available",
plugins: {
gridfilters: true
},
overflowY: 'auto',
width:'100%',
stripeRows: false,
columnLines: false,
selModel: {
selType: 'checkboxmodel',
mode: 'SINGLE',
allowDeselect: true
},
initComponent: function () {
let _this=this;
Ext.apply(this, {
store: this.getListGridStore(),
});
this.callParent(arguments);
}
});
Now I want to overideto my filter. I have writtent my override code I am looking many examples but I am not geeting how to connect these two codes. ANy help will be usefull.
The overide code which I wanted to place here look like this.
Ext.override(Ext.grid.filters.filter.List, {
createMenuItems: function (store) {
debugger;
}
});
I believe the override works but the createMenuItems function is not called.
Did you define the filter for each column? Like in the code example shown here.
{
dataIndex: 'rating',
text: 'Rating',
width: 75,
filter: {
type: 'list',
value: 5
}
}
This is my container where I want to load text, this code is inside a modal (pop up) I need that my pop up take the text height that was loaded.
Ext.define('Base.view.Notes', {
extend: 'Ext.Container',
xtype: 'notes',
config: {
modal: true,
scrollable: null,
itemId: 'generalNotesContainer',
width: '90%',
height: '90%',
margin: '2em 5% 5% 5%',
maxHeight: "90%",
minHeight: "90%",
floating: true,
centered: true,
layout: 'vbox',
items: [
//other item
{
xtype: 'container',
itemId: 'generalNotesContent',
padding: "10",
scrollable: true,
flex: true,
html: ''
}
]
}
});
Use Ext.window.MessageBox and dont give any configs like height,width.It will handle dimensions as per its content.Currently you have used Container as parent,replace it by messagebox.
I got to resize the pop up doing this:
Ext.define('Base.controller.WorkOrders', {
config: {
refs: {
woView: 'woview',
generalNotesContent: 'container#generalNotesContent',
},
control:{
woView:{
activate: 'woViewActivate'
}
}
},
woViewActivate: function(){
this.loadNotes();
},
loadNotes: function(){
var gNotesView = Ext.widget('notes');
Ext.Viewport.add(gNotesView);
var html = "<div>My html</div>"
this.getGeneralNotesContent().setHtml(html);
var NotesHtml = this.getGeneralNotesContent();
this.getGeneralNotesContent().setHeight(NotesHtml.innerHtmlElement.dom.scrollHeight);
//if it is needed extra height we can do this
//var extraHeight= 70;
//this.getGeneralNotesContent().setHeight(NotesHtml.innerHtmlElement.dom.scrollHeight+ extraHeight);
gNotesView.show();
}
this is how how looks my screen
If I want to create function to alert title name in this code, how to write function to alert it without including jwplayer library to my HTML file?
http://jsfiddle.net/fs7p0ec4/1/
jwplayer( "my_media_player" ).setup({
image: "http://example.com/poster.jpg",
title: "testHLS",
rtmp: { bufferlength: "2" },
bufferlength: "2",
width: "100%",
aspectratio : "16:9",
playlist: [{sources: [ { file: "http://example.com/playlist.m3u8" } ]}],
primary: "flash",
repeat: true,
controlbar: true,
stretching: "exactfit"
});
var jwplayerClass = function(xx){ }
jwplayerClass.prototype.setup = function(info) {
var XWP = info.playlist[0].sources[0].file;
alert(XWP); return this
};
var jwplayer = function (xx) {
return new jwplayerClass(xx);
};
I have a border layout with two panels inside center and west regions. By default, west panel is collapsed and if you click on any part of the title bar while is collapsed, the panel is temporary expanded until you move the mouse pointer out of its boundaries.
What I want to do is to have this same "temporary expand" not by clicking on the panel's title bar, but just hovering over it. How can I make that possible?
Here is my code:
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'Center Panel',
region: 'center',
flex: 1
},{
xtype: 'panel',
title: 'West Panel',
region: 'west',
flex: 1,
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true
}]
}).show();
});
Please refer to the following fiddle for your convenience: http://jsfiddle.net/3FJ58/3/
Thanks in advance!
Yes, this is possible but you have to extend from Ext.panel.Panel to override the getPlaceholder method that is used by the borderlayout
getPlaceholder: function(direction) {
var me = this,
collapseDir = direction || me.collapseDirection,
listeners = null,
placeholder = me.placeholder,
floatable = me.floatable,
titleCollapse = me.titleCollapse;
if (!placeholder) {
if (floatable || (me.collapsible && titleCollapse)) {
listeners = {
mouseenter: {
// titleCollapse needs to take precedence over floatable
fn: (!titleCollapse && floatable) ? me.floatCollapsedPanel : me.toggleCollapse,
element: 'el',
scope: me
}
};
}
me.placeholder = placeholder = Ext.widget(me.createReExpander(collapseDir, {
id: me.id + '-placeholder',
listeners: listeners
}));
}
// User created placeholder was passed in
if (!placeholder.placeholderFor) {
// Handle the case of a placeholder config
if (!placeholder.isComponent) {
me.placeholder = placeholder = me.lookupComponent(placeholder);
}
Ext.applyIf(placeholder, {
margins: me.margins,
placeholderFor: me
});
placeholder.addCls([Ext.baseCSSPrefix + 'region-collapsed-placeholder', Ext.baseCSSPrefix + 'region-collapsed-' + collapseDir + '-placeholder', me.collapsedCls]);
}
return placeholder;
}
See the updated JSFiddle
Overriding is at least the cleanest way IMO. But it would also be possible to manipulate the placeholder created by the borderlayout.
#JoseRivas already posted something like this but with some issues I will add the snipped how this can be done in a cleaner way
listeners: {
afterrender: function(p){
p.placeholder.getEl().on('mouseenter', function(){ p.floatCollapsedPanel() })
}
}
See the updated JSFiddle
jacoviza. Can you try to capture focus event of panel. this link helps you. Extjs panel. Keyboard events
add a listener to the el of the placeholder for mouseover and then call the floatCollapsedPanel()
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'panel1',
region: 'center',
flex: 1
}, {
xtype: 'panel',
title: 'panel2',
region: 'west',
flex: 1,
id: 'mypanel2',
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true,
listeners: {
afterrender: {
fn: function (self) {
self.placeholder.getEl().on('mouseover', function () {
var panel = Ext.getCmp('mypanel2');
panel.floatCollapsedPanel()
})
}
}
}
}]
}).show();
});
I need to simply add a function in my grid that hide the rows when the user makes the first access. After that, by the icon of minimize/expand that already appears in my grid, the user can expand the group and see the rows. My code is that:
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
hideHeaders: true,
features: [groupingFeature],
columns: [
{text: "Questions",groupable: false, flex: 1, dataIndex: 'species', sortable: true}
],
width: 250,
height:260,
split: true,
region: 'west'
});
// define a template to use for the detail view
var bookTplMarkup = [
'{resposta}<br/>'
];
var bookTp1 = Ext.create('Ext.Template', bookTplMarkup);
Ext.create('Ext.Panel', {
renderTo: 'binding-example',
frame: true,
width: 720,
height: 570,
layout: 'border',
items: [
grid, {
id: 'detailPanel',
autoScroll: true,
region: 'center',
bodyPadding: 7,
bodyStyle: "background: #ffffff;",
html: 'Select one option'
}]
});
Where I add the nedded functions?
I guess the startCollapsed property of grouping feature is what your looking for:
{ ftype:'grouping', startCollapsed: true }