I use bootstrap tour but i dont no how to change the arrow to top.
Anyone can tech me to change the arrow to top?
As per screenshot below.
This is script for bootstrap tour.
var tour = new Tour({
placement: "top",
storage: false,
steps: [
{
element: "#revision",
title: "TEST",
content: "TEST. . . "
}
]});
tour.init();
tour.start();
change your div class to popover tour-tour fade bottom in,change your placement top to bottom
Just add the 'placement' property like that:
steps: [
{
element: "#revision",
title: "TEST",
content: "TEST. . . "
placement: top
}
]
This div gets created <div class="arrow"></div> try editing the CSS on that class in the bootstrap.css file.
Related
I can't add custom button with other toolbars
This code work
tinyMCE.init({
selector: '#d1',
toolbar:'customButton',
setup(editor) {
editor.addButton('customButton', {
text: 'My button',
icon: false,
onclick() {
editor.insertContent(" <b>It's my button!</b> ")
},
})
},
})
But, if i add one more toolbar, it didn't work, why?
toolbar: 'forecolor backcolor' +
'customInsertButton',
If you want to use multiple toolbars in TinyMCE you can use either:
toolbar array: https://fiddle.tiny.cloud/TBhaab
toolbar: ['myCustomToolbarButton','forecolor backcolor'],
https://www.tiny.cloud/docs/configure/editor-appearance/#usingmultipletoolbars
toolbar(n): https://fiddle.tiny.cloud/VBhaab
toolbar1: 'myCustomToolbarButton',
toolbar2: 'forecolor backcolor',
https://www.tiny.cloud/docs/configure/editor-appearance/#toolbarn
Note, you are showing TinyMCE 4 button syntax. If you are using TinyMCE 5 (5.7.1 is the current version) the API for creating custom buttons has changed:
TinyMCE 4 version: https://fiddle.tiny.cloud/QBhaab
TinyMCE 5 version: https://fiddle.tiny.cloud/SBhaab
editor.ui.registry.addButton('myCustomToolbarButton', {
text: 'My Button',
onAction: function () {
editor.insertContent(" <b>It's my button!</b> ")
}
});
More info: https://www.tiny.cloud/docs/ui-components/toolbarbuttons/#howtocreatecustomtoolbarbuttons
This isn't so much a TinyMCE issue and is more so a JavaScript issue. The problem is with your concatenation logic in:
toolbar: 'forecolor backcolor' +
'customInsertButton',
This will end up becoming toolbar: 'forecolor backcolorcustomInsertButton' which as you can see is missing a space/separator between backcolor and customInsertButton. So to solve that, just make sure to add a space, such as:
toolbar: 'forecolor backcolor ' +
'customInsertButton',
I'm using border layout in Extjs4.0. It was working fine there. When I upgrade my library to extjs4.1, its showing error like layout run failed, and the panel is not loading. I didn't came across such error, so help me to resolve this error.
My code is
Ext.define('TextFit', {
extend : 'Ext.container.Container',
title: 'Sample text',
layout: {
type : 'border'
},
items : [{
title : 'left panel',
region : 'west'
},{
title : 'Center panel',
region: 'center'
}]
});
Thanks in advance.
Try adding
layout: 'fit'
To your border layout's parent container. I had the same problem and this solved it for me.
From BorderLayout's documentation:
Any child items with a region of west or east may be configured with either an initial width, or a Ext.layout.container.Box.flex value, or an initial percentage width string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.
Similarly for north and south, but height instead of width.
i had this problem while trying to add a complex set of (deep nested) items to a panel before rendering the panel. Once i added the items after the panel knew it's dimensions, it worked:
addItems: function() {
this.on("boxready", function(){ this.add(items); }, this, {single: true});
}
Try to add flex property to both items ... so the modified code will be
....
items : [{
title : 'left panel',
region : 'west',
flex:1 //add here
},{
title : 'Center panel',
region: 'center',
flex:1 //and here
}]
......
You could try using:
<script type="text/javascript" src="extjs/src/diag/layout/Context.js"></script>
<script type="text/javascript" src="extjs/src/diag/layout/ContextItem.js"></script>
just put this in your index.html and check the console to see if there are any errors in there.
Don't mind most of the warnings you see.
If there are errors like: "... is still connected/attached" then look at that item and make sure it has a layout other than anchor.
If you don't have any errors in the console and there is still a layout issue, you could try using the page analyzer.
You should be able to find the analyser in your extjs zip.
If it is deployed on your server you could go to: http://< server-address >/extjs/examples/page-analyzer/page-analyzer.html
I am trying to create a universal titlebar with a back button for my application. I am including it in the various views by using {xclass:mUserStories.view.titlebar}.
Here is the code for the titlebar:
Ext.define('mUserStories.view.titlebar', {
extend: 'Ext.TitleBar',
id: 'narwhal',
config: {
docked: 'top',
// id: 'narwhal',
title: 'CHW Module',
items: [{
ui: 'back',
text: 'Back',
id: 'backButton'
// hidden: true
}]
}
})
However, when I try to dynamically change the toolbar when switching to different pages, the console.log of the titlebar says the _title has changed but the text on the titlebar and the "hidden" property of the button does not change.
Here is the code for the logic that occurs when the button is pressed to switch the page:
toPage: function (arg) {
var t = Ext.getCmp('narwhal');
var b = Ext.getCmp('backButton');
console.log(t,b)
if (arg === PAGES.PATIENT_LIST) {
t.setTitle('Patient List');
b.setHidden(true)
}
Ext.getCmp('viewPort').setActiveItem(arg);
}
I have also tried to include a ref at the top for Narwhal : '#narwhal' and use var t = this.getNarwhal(), but this does not work either.
I am not sure if the problem lies with where the id is being kept, how the id is being called, or because the page is not refreshing properly. Any advice would help!
Thank you for your time :)
I have had the same situation in my project.
I managed to get everything to work like you want it by having a controller owning a reference to the title bar and listening to activeItemChange on my tabPanel.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
header: 'User Login',
dataIndex: 'user_login',
width:150
},{
header: 'User Name',
dataIndex: 'user_nicename',
width:150
},{
header:'Privledge',
dataIndex:'admin',
width:150
}],
autoScroll: true,
layout:'fit',
selModel: gusersSel,
store: gusersStore
})
Hi I am using above code for the grid Panel in Extjs4.0.2a When I populate data dynamically in the store the scrollbars are not working .
I have also tried using doLayout() for grid Panel but dosent work too .
The grid Panel is in a Window .
Anything that can solve this problem ?
Actually it works for some time but dosen't work all the time .
I've had the same problem. They use custom scrollbar and it's pretty buggy (especialy in chrome). If you are not going to use infinite scroll the possible solution could be to remove custom scrollbar and use native one. To do that just add the following to the grid's config:
var gusersPanel = Ext.create('Ext.grid.Panel', {
scroll : false,
viewConfig : {
style : { overflow: 'auto', overflowX: 'hidden' }
},
// ...
});
I did gusersPanel.determineScrollbars() when i am adding and removing data from store and it is working fine .
The problem with this is the scroll listener is attached to the div element on the afterrender event, but then if the scrollbar is not needed after a layout operation the div element is removed from the dom. Then, when it's needed again it's added back, but only if enough time has passed the garbage collection makes extjs recreate the div node and this time it's added to the dom without attaching the scroll listener again. The following code solves the problem:
Ext.override(Ext.grid.Scroller, {
onAdded: function() {
this.callParent(arguments);
var me = this;
if (me.scrollEl) {
me.mun(me.scrollEl, 'scroll', me.onElScroll, me);
me.mon(me.scrollEl, 'scroll', me.onElScroll, me);
}
}
});
You written code to layout: 'fit'. It did not work autoScroll.
Change the code to some height and remove layout: 'fit' code.
Like this.
var gusersPanel = Ext.create('Ext.grid.Panel', {
flex:1,
columns: [{
...........
}],
autoScroll: true,
//layout:'fit',
height: 130,
selModel: gusersSel,
store: gusersStore
It is help you. Cheers.
I'm trying to get a Dojo datagrid working - I have replicated the first example on the documentation page (http://docs.dojocampus.org/dojox/grid/DataGrid) & it works just fine.
However, when I try to display the grid inside another div (i.e. putting 'gridContainer4' from the example inside any other div) nothing displays...
Any help would be much appreciated - can't find anything about this anywhere online!
Finally figured it out:
The example text creates the new dojox.grid.DataGrid and applies it to "document.createElement('div')" - changing this to the ID of an existing div fixed the problem (rather than appendChild-ing it to another div)
Original code:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: store4,
clientSort: true,
rowSelector: '20px',
structure: layout4
}, document.createElement('div'));
changes to:
var grid4 = new dojox.grid.DataGrid({
query: {
Title: '*'
},
store: store4,
clientSort: true,
rowSelector: '20px',
structure: layout4
}, "gridContainer4");