Related
I am using TinyMCE 5.6.2 and I have a weird bug with a custom dialog. I have it set to a size of large with a tab panel for the content. I have a header and two buttons setup. When the dialog opens, the buttons are pushed down so that you can just see top few pixels. It looks like some media breakpoint issue because when I resize the window, the buttons become fully visible at a height of 654px and below.
How can I get these buttons to show all the time?
tinymce.PluginManager.add('imageGallery', function (editor, url){
editor.ui.registry.addButton('imageGallery', {
icon: 'gallery',
tooltip: 'Image Gallery',
onAction: function() {
editor.windowManager.open({
title: 'Image Gallery',
size: 'large',
body: {
type: 'tabpanel',
tabs:[
{
name: 'upload',
title: 'Upload',
items: [
{
type: 'dropzone',
name: 'dropzone'
}
]
},
{
name: 'site',
title: 'My Images',
items: [
{
type: 'htmlpanel',
html: '<div id="myImages" class="img-flex-grid"></div>'
}
]
},
{
name: 'shared',
title: 'Shared',
items: [
{
type: 'htmlpanel',
html: '<div id="sharedCategories" style="float: left; min-width: 150px; background-color: lightgray; font-size: 14px; color: rgba(34,47,62,.7);"></div><div id="sharedImages" class="img-flex-grid" style="float: right; width: 900px"></div>'
}
]
},
],
},
buttons: [
{
type: 'submit',
text: 'Select',
name: 'select',
disabled: true,
primary: true,
},
{
type: 'cancel',
text: 'Close'
}],
onChange: function(dialogInstance, details) {
handleInputChange(dialogInstance, details);
},
onSubmit: function() {
handleSubmit();
},
onTabChange: function(dialogInstance, details) {
handleMainTabChange(dialogInstance, details.newTabName)
}
});
}
});
}
If anyone else is having this issue, I had to override a CSS class. Because I am accessing TinyMCE via a CDN, I do not see a way to create a custom skin or theme. This is the code that I added to my CSS file.
.tox-dialog--width-lg {
min-height: 650px !important;
height: auto !important;
}
I have a quite a complicated layout for my application, using borders, vbox's and hbox's which all seem to fit quite well except for one annoyance. The bottom of the grid in the southern region is not behaving. I want the grid to take up the height of the panel when the browser is above minHeight/maximized but at the moment it look like this:
And when the browser is shrunk (but not below min size) it looks like this and I am unable to get to the bottom of the grid scrollbar :(
You can see the scrollbar cut of (probable min height on the viewport/grid issue) but not sure how to fix this can someone spot what I need to do resolve these two issues? Code below:
<script type="text/javascript" src="../app.js"></script>
<!-- script to warn users when leaving page -->
<?php
$db = Zend_Registry::get('db');
$result = $db->query("select ERROR_ID, ERROR_DESCRIPTION, EMAIL_CONTENT, to_char(\"TIMESTAMP\", 'MM/DD/YYYY HH24:MI:SS') as TIMESTAMP, READ from PI_EMAIL_ERROR where \"TIMESTAMP\" = ( select max(\"TIMESTAMP\") from PI_EMAIL_ERROR ) and READ = 0 and rownum = 1")->FetchAll();
?>
<script type="text/javascript">
var container = Ext.create('Ext.container.Viewport',{
id: 'mainWindow',
minWidth: 800,
minHeight: 640,
layout:'fit',
listeners: {
afterrender: function() {
this.setSize(this.getWidth(), this.getHeight());
},
resize: function(){
var programGrid = Ext.getCmp('programList');
if(this.getHeight() < this.minHeight){
console.log("Height: ", this.getHeight());
console.log("minHeight: ", this.minHeight);
console.log("Grid old height: ", programGrid.height);
programGrid.height = (this.minHeight - programGrid.height)-18;
this.setSize(this.getWidth(), this.getHeight());
console.log("Grid new height: ", programGrid.height);
} else {
programGrid.height = 380;
}
}
},
defaults: {
//collapsible: true, //Add this to true later maybe impliment a lock sam
//when viewport scrolled up, background shows a login.
split: true,
rezisable: false
},
items:[{
layout: 'border',
//height: 640,
//minHeight: 640,
items: [
{
//This panel holds the file menu strip and the show combo
border: false,
region: 'north',
height: 92,
bodyStyle:'background: #DFE8F6;',
/******Toolbar*******/
tbar: [
/****File Button****/
{
xtype: 'button',
text: window.samlanguage.file,
width: 60,
handler: function(btn){
},
menu: [
{
text: window.samlanguage.refreshlist,
action: 'refreshGrid',
icon: '../assets/images/refresh.png',
handler: function(btn){
}
},{
text: window.samlanguage.settings,
icon: '../assets/images/settings.png',
action: 'spawnSettings',
handler: function(Btn){
}
},{
text: window.samlanguage.compose,
icon: '../assets/images/mail--plus.png',
action: 'spawnEmail',
handler: function(Btn){
Ext.create('APP.view.core.forms.Emailform').show();
}
},{
text: window.samlanguage.logout,
action: 'logout',
icon: '../assets/images/exit.png',
handler: function(){
}
}
]
},
/****Help Button****/
{
xtype: 'button',
text: window.samlanguage.help,
width: 60,
handler: function(btn){
},
menu: [
{
text: window.samlanguage.contents,
icon: '../assets/images/contents.png',
action: 'spawnContents',
handler: function(btn){
}
},{
text: window.samlanguage.license,
icon: '../assets/images/licence.png',
handler: function(btn){
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"<b>Retrieving</b> licensing information..."});
myMask.show();
Ext.Ajax.request({
url: '../License/read',
method: 'post',
//params: values,
success: function(response){
myMask.hide();
var numusers = Ext.decode(response.responseText);
Ext.create('APP.view.core.forms.License', {numusers: numusers.numusers}).show();
}
});
}
},{
text: window.samlanguage.about,
icon: '../assets/images/about.png',
//action: 'spawnAbout',
handler: function(btn){
Ext.Msg.show({
title:'About us',
buttons: Ext.Msg.OK,
icon: 'perceptiveLogo'
});
}
}
]
}
],
items: [{
//Comboform with userlist
xtype: 'Comboform',
bodyStyle:'background: #DFE8F6;',
border: false
}]
}//End north region (header) region
,{
region:'center',
type: 'vbox',
align : 'stretch',
items: [
{
//Add the userlist grid
title: 'Currently showing all users',
//id: 'usergridList',
height: 290,
minHeight: 290,
border: false,
xtype: 'Allusers'
},
{
//Add the allprograms grid
title: 'Program Access Permissions',
border: false,
height: 380,
minHeight: 380,
//height: 'auto',
xtype: 'Allprograms'
}
]
} //End center (body) region
,{
region:'east',
type: 'vbox',
align : 'stretch',
split: true,
//collapsible: true,
width: 240,
minWidth: 240,
maxWidth: 240,
//title: 'User Actions',
listeners: {
/*collapse: function() {
this.setTitle("User management");
},
expand: function() {
this.setTitle("User Actions");
},
click: function() {
return false;
},*/
afterrender: function(){
this.splitter.disable();
}
},
//height: 300
items :[
{
title: 'User Actions',
border: false,
height: 168,
xtype: 'Useractionsform'
},
{
title: 'View Audit',
border: false,
height: 122,
xtype: 'Auditform'
},
{
title: 'Program Access',
border: false,
height: 380,
minHeight: 340,
xtype: 'Programactionsform'
}
]
} //End of east region
,{
region: 'south',
height: 20,
bodyStyle:'background: #DFE8F6;',
border: false
}
]
}]
}).show();
});
</script>
Syntax highlighted link:
http://paste.laravel.com/kPr
Thank you kindly
Nathan
I'm referring to lines 87-97 of the syntax highlighted link you posted.
resize: function(){
var programGrid = Ext.getCmp('programList');
if(this.getHeight() < this.minHeight){
console.log("Height: ", this.getHeight());
console.log("minHeight: ", this.minHeight);
console.log("Grid old height: ", programGrid.height);
programGrid.height = (this.minHeight - programGrid.height)-18;
this.setSize(this.getWidth(), this.getHeight());
console.log("Grid new height: ", programGrid.height);
} else {
programGrid.height = 380;
}
}
This is the resize handler for the viewport, so every time the browser is resized, this funciton will explicitly set the grid height. Not sure what the purpose of this code is but it looks like it could be the issue. Generally you shouldn't need code like this - everything should fit together if you have the layouts set up right, and then you can use minHeight/maxHeight for the grid if you want. What happens if you just take this code out?
I think you need to remove the resize event handler completely. It looks like you're trying to create a 'vbox' layout on your center panel, but you're using 'type: vbox'. Try using this:
layout: {
type: 'vbox'
align : 'stretch',
pack : 'start',
}
This was taken from the ExtJS examples (http://docs.sencha.com/ext-js/4-2/extjs-build/examples/layout-browser/layout-browser.html). Then you can just add a 'flex' to your child containers instead of a minheight.
I want to move a panel from bottom to up. smoothly. for this i try this code.
Ext.define("mathmania.view.Main", {
extend: 'Ext.Panel',
requries: [
'Ext.util.DelayedTask'
],
xtype: 'panel',
config: {
autodestory: true,
border: 1,
html: 'test panel',
bottom: 0,
centered: true,
padding: 10,
margin: '2%',
width: '95%',
listeners: {
painted: 'countdown'
}
},
countdown: function()
{
var task = Ext.create('Ext.util.DelayedTask', function() {
this.setBottom(this.getBottom + 5);
task.delay(100);
});
task.delay(0);
}
but each time it works only once not for multiple time as a repeating task?. for moving this float panel smoothly is there any better way or what i missing in this code?
I have tried using do-while loop, Panel is moving two times now but still the objective is unachieved. I think i am lacking somewhere in loop.
Hope this helps a little bit.
Ext.define("mathmania.view.Main", {
extend: 'Ext.Panel',
requries: [
'Ext.util.DelayedTask'
],
xtype: 'panel',
config: {
id: 'main1',
autodestory: true,
border: 1,
html: 'test panel',
bottom: 0,
centered: true,
padding: 10,
margin: '2%',
width: '95%',
listeners: {
painted: 'countdown'
}
},
countdown: function()
{
var a=Ext.getCmp('main1');
var i=0;
var j=20;
do{
var task = Ext.create('Ext.util.DelayedTask', function() {
a.setBottom(a.getBottom() + 10);
task.delay(500);
});
task.delay(1000);
i++;
}while(i<j)
}
});
I'm trying to build an interface that has a header bar with a logo centered in the top. Here's the code I'm using. The image doesn't show. Upon inspecting the elements at run time, element is showing with a height of '0' instead of using the 100% to match the height of the containing element.
Ext.define("RFN.view.Main", {
extend: 'Ext.TabPanel',
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Calculate',
iconCls: 'home',
//styleHtmlContent: true,
//scrollable: true,
layout: 'vbox',
items:[
{
xtype: 'panel',
style: 'background-color: #174a7c;text-align:center;',
items:[
{
xtype: 'image',
src: 'resources/images/logo.png',
height: '100%'
}
],
flex: 1
},
{
xtype: 'panel',
style: 'background-color: #999999;',
flex:4
}
]
},
{
title: 'Compare',
iconCls: 'chart2',
//styleHtmlContent: true,
//scrollable: true,
layout: 'vbox',
items:[
{
style: 'background-color: #174a7c;',
flex: 1
},
{
style: 'background-color: #999999;',
flex:4
}
]
}
]
}
});
Just add a layout config on the panel that contains the image. You can then remove the height config on you image as the layout make the inner item fit the whole height and width automatically :
...
xtype: 'panel',
style: 'background-color: #174a7c;text-align:center;',
items:[{
xtype: 'image',
src: 'resources/images/logo.png',
}],
flex: 1
...
Hope this helps
Or you can do what I did and have a layout of vbox, the header had a flex of 0.3 and my tabpanel 0.7. The item that was 0.3 was a panel, and in the class config (cls) I had my CSS class name e.g. Header. In my CSS class .header I had set the background and logo. Hope this helps...
I'm trying to get two buttons to show up next to each other in an Ext.Panel.
The .js code:
ProductView = new Ext.Panel({
styleHtmlContent: true,
scroll: 'vertical',
items: [
new Ext.DataView({
scroll: false,
store: productStore,
tpl: productTpl,
itemSelector: 'div.productView',
}),
{
xtype: 'button',
ui: 'blue-round',
height: '60',
text: 'Buy',
handler: function() {
// ...
}
},{
xtype: 'button',
ui: 'green-round',
height: '60',
text: 'Share',
handler: function() {
// ...
}
}
]
});
The SCSS code:
#include sencha-button-ui('green', $branded-green);
#include sencha-button-ui('blue', $branded-blue);
This yeilds buttons that look like this:
I thought this may have been a sizing issue, but adding the width: '40%', attribute to each button only yields:
However, I'm wanting the buttons to sit next to each other instead of be stacked on top of each other. Any suggestions?
UPDATE:
I tried to take advantage of the align: property, but this did nothing:
{
xtype: 'button',
ui: 'blue-round',
height: '60',
width: '40%',
align: 'left',
text: 'Buy',
handler: function() {
// ...
}
},{
xtype: 'button',
ui: 'green-round',
height: '60',
width: '40%',
align: 'right',
text: 'Share',
handler: function() {
// ...
}
}
You could wrap the buttons in a panel and set that panel's layout to hbox. That is basically what you did with the toolbar, but it won't have the toolbar styling if you don't want that. also, fyi with the hbox layout, you can specify 'flex' config options to components which determine how they are sized relative to each other
Okay, so the answer so far has been to wrap the whole thing in a toolbar. (I originally didn't do so, as these buttons are not to be docked. They are to show up under a scrolling DataView.) I had to squeeze the buttons in a bit as they were over extending past the edge of the toolbar and being cut off. I also had to change the height of the toolbar to accommodate the larger buttons and make its background transparent.
The button portion of the .js code now looks like:
{
xtype: 'toolbar',
height: '62',
items: [
{
xtype: 'button',
ui: 'blue-round',
height: '60',
width: '48%',
text: 'Buy',
handler: function() {
// ...
}
}, {xtype: 'spacer'}, {
xtype: 'button',
ui: 'green-round',
height: '60',
width: '48%',
text: 'Share',
handler: function() {
// ...
}
}
]
}
{ xtype : 'panel',
layout: { type: 'hbox', },
items:[
{ xtype: "button", text: "Login", iconCls: 'action',
ui:"confirm", itemId:"sendButton", height: '60', width: '48%', //flex:3, },
{xtype: 'spacer'}, {
{xtype: "button",
text: "Reset", iconCls: 'action', ui:"decline",
itemId:"resetButton", height: '60', width: '48%', //flex:3, }, ], },
You can use hbox layout to render the buttons horizontally using Sencha.
This is the sample code which works fine,
{ xtype :'panel',
layout: { type: 'hbox', },
items:[
{ xtype: "button", text: "Login", iconCls: 'action',
ui:"confirm", itemId:"sendButton", height: '60', width: '48%', //flex:3, },
{xtype: 'spacer'},
{xtype: "button", text: "Reset", iconCls: 'action', ui:"decline",
itemId:"resetButton", height: '60', width: '48%', //flex:3, }, ], },