We Keep Coding

Trello power-up set modal width by percent

Hello there I am currently making a power-up for trello with popup function.
I would like to know if it's possible to set the popup modal of trello to percent '75%'.
var boardButtonCallback = function(t){
return t.popup({
title: 'Time calculater',
items: [
{
text: 'Weekly statistics',
callback: function(t){
return t.modal({
url: './template/statistics/weekly.html',
height: '75%',
width: '75%',
})
.then(function(){
return t.closePopup();
});
}
}
]
});
};
this is my code to call the modal and display it to the user.
as you can see I tried using percent but it doesn't work.
is there a way to do this with percent?

How to slideIn hidden component in ExtJS?

I've got the following situation: some controls that are located next to a button and are slided in and out on button click.
Ext.define ('Site.widget.SomeButton', {
extend: 'Ext.button.Button',
xtype: 'SomeButton',
width: 30,
controlled_inputs: null,
expanded: false,
setControlledCmp: function(controlledInputs) {
var me = this;
me.on('click', function(){
if (me.expanded)
controlledInputs.getEl().slideOut('r', { duration: 250 });
else
controlledInputs.getEl().slideIn('r', { duration: 250 });
me.expanded = !me.expanded;
});
}
});
Ext.define('Site.widget.ComingOut', {
extend: 'Ext.Container',
xtype: 'ComingOut',
layout: 'hbox',
header: false,
referenceHolder: true,
items:[{
xtype: 'SomeItems',
reference: 'SomeItems'
},{
xtype: 'SomeButton',
reference: 'SomeButton'
}],
onBoxReady: function() {
me.lookupReference('SomeButton').setControlledItems(me.lookupReference('SomeItems'));
}
});
The code works fine when the controls are initially shown. The question is: what should I do if I want them to be initially hidden? hidden:false is not the option since when controls are hidden the button moves into the freed position. I suppose I am missing something easy here. Thank you in advance!
PS I've found solution, though it doesn't seem good enough (hides element instead of correctly setting its initial state), so if anyone knows a better one - you are welcome. My solution is the following
setControlledCmp: function(controlled_inputs) {
var me = this;
me.on('click', function( view, eOpts ){
controlled_inputs.setOpacity(1);
if (me.expanded)
controlled_inputs.slideOut('r', { duration: 250 });
else
controlled_inputs.slideIn('r', { duration: 250 });
me.expanded = !me.expanded;
});
}
and
onBoxReady: function() {
var me = this;
var inputs = me.lookupReference('search_inputs').getEl();
inputs.setOpacity(0);
inputs.slideOut('r', { duration: 5 });
me.lookupReference('search_button').setControlledCmp(inputs);
}

how to change direction of toolTip extjs 4.2

I want to change the direction of my tab's tooltip.
I want to make it align to the top.
My code is like this :
var toolTip = 'test';
var panelExpertCharts = Ext.create('ContainerListChartExpert', {
chartList: chartList,
layout: standardLayout,
idIndicator: idIndicator,
idOrganisation: organisationObj.id,
title: chartList[0].titleExpert,
closable: true,
tabConfig: {
tooltip: toolTip
}
});
Thanks for reply.
Hamza.

Hi you can change a tooltip alignment in the following way
listeners: {
render: function(c) {
new Ext.ToolTip({
target: 'trackCallout',
anchor: 'right',
html: 'Test Tooltip'
});
}
}
You can check a very good example here from sencha .

Dojo floating panes

I recently started working with Dojo framework and have to make floating panes for a website. After searching on both google and stackoverflow, I come across a very good example:
jsfiddle
But the problem is every time I minimize the floating pane and then click on the small tab on bottom to show it again, the size of pane increases! It can also be seen in the jsfiddle example although you need to repeat it multiple times since the change is like 2px.
Can someone help me with this weird behavior?
JavaScript code:
dojo.require("dojo.dnd.move");
dojo.require("dojox.layout.FloatingPane");
dojo.ready(function() {
var ParentConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane, {
postCreate: function() {
this.inherited(arguments);
this.moveable = new dojo.dnd.move.parentConstrainedMoveable(
this.domNode, {
handle: this.focusNode,
area: "content",
within: true
}
);
}
});
var BoxConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane, {
postCreate: function() {
this.inherited(arguments);
this.moveable = new dojo.dnd.move.boxConstrainedMoveable(
this.domNode, {
handle: this.focusNode,
box: {l: 10, t: 10, w: 400, h: 400},
within: true
}
);
}
});
var ConstrainedFloatingPane = dojo.declare(dojox.layout.FloatingPane, {
postCreate: function() {
this.inherited(arguments);
this.moveable = new dojo.dnd.move.constrainedMoveable(
this.domNode, {
handle: this.focusNode,
constraints: function() {
var coordsBody = dojo.coords(dojo.body());
// or
var coordsWindow = {
l: 0,
t: 0,
w: window.innerWidth,
h: window.innerHeight
};
return coordsWindow;
},
within: true
}
);
}
});
var searchboxNode = dojo.byId("searchbox");
var floatingPane = new ParentConstrainedFloatingPane({
title: "A floating pane",
resizable: true,
dockable: true,
//constrainToContainer: true,
style: "position:absolute;top:40px;left:40px;width:160px;height:100px;"
}, searchboxNode);
floatingPane.startup();
});
EDIT#1 : I've raised an official bug ticket for it and further responce can be checked via this link:
http://bugs.dojotoolkit.org/ticket/16598

that is a dojox floatingpane bug, i don't know if its reported or not, but it also happens when you use directly the class
dojox.layout.FloatingPane
instead of
ParentConstrainedFloatingPane
and also if you change the dojo version (tried 1.8.3 to verify), so unless you are willing to get your hands messy fixing it, try reporting it to dojo too see if its been fixed.

how to load mask while the grid is double clicked to wait for the detail window

forum member I am having one problem while using the loadMask property of the extjs 4.0.2a. Actually I am having one grid which on click open the window with detail information.
As my detail window takes more time to come on screen, so I just decided to make use of the loadMask property of Extjs. But don't know why the loading message is not shown when I double click the grid row and after some time the detail window is shown on the screen.
on grid double click I am executing the below code
projectEditTask: function(grid,cell,row,col,e) {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Loading.."});
myMask.show();
var win = this.getProjectGanttwindow();
win.on('show', myMask.hide, myMask);
}
but don't know the loading is not displayed and after waiting for some moment my window is shown correctly.
I just want when I double click the grid Loading message should be displayed and after when the window is load completely Loading message should be dissapear and detail window should be viewed.
when I made the changes as per you said the loading message is displayed but my window is not opened yet. below is the code of window I am trying to open
my projectGanttwindow is
Ext.define('gantt.view.projectmgt.projectGanttwindow' ,{
extend: 'Ext.window.Window',
alias : 'widget.projectganttwindow',
requires: ['gantt.view.projectmgt.projectGanttpanel'],
editform:1,
id: 'projectganttwindow',
title: 'Project Management',
width: '100%',
height: '100%',
closeAction: 'destroy',
isWindow: true,
flex:1,
isModal: true,
constrain: true,
maximizable: true,
stateful: false,
projectId: null, // this will be set before showing window
listeners: {
hide: function() {
alert('hide');
//var store = Ext.data.StoreManager.lookup('taskStore').destroyStore();
//Ext.destroy(store);
//store.destroyStore();
console.log('Done destroying');
}
},
initComponent: function() {
var me = this;
me.layoutConfig = {
align: 'stretch'
};
me.items = [{
xtype: 'projectganttpanel',
allowBlank: false
}];
me.callParent(arguments);
me.on({
scope: me,
beforeshow: me.onBeforeShow
});
},
onBeforeShow: function() {
var projectId = this.projectId;
console.log('BEFOR SHOW ::'+projectId);
if(projectId != null) {
var store = Ext.data.StoreManager.lookup('taskStore');
store.load({
params: {'id': projectId}
});
}
}
});

Try this
function loadMask(el,flag,msg){
var Mask = new Ext.LoadMask(Ext.get(el), {msg:msg});
if(flag)
Mask.show();
else
Mask.hide();
}
When u click on grid call this function
//Enable mask message
loadMask(Ext.getBody(),'1','Please wait...');
After pop loaded call
//Disable mask Message
loadMask(Ext.getBody(),'','Please wait...');