I am trying to create an Ext.Component, that I can use with Draggable, Resizable, Float and Aloha Editor.
Currently I have tried:
afterRender: function(me) {
Aloha.jQuery('#' + me.myId).aloha();
document.getElementById(me.myId).setAttribute("draggable", true);
}
This one doesn't allow it to be draggable, but edit works.
Aloha.jQuery('#' + me.myId).aloha();
draggable: true,
resizeable: true,
float: true
This one allows it to be re-sized and dragged around, however it aloha doesn't work, therefor it is not editable.
Aloha.jQuery('#' + me.myId).draggable();
Aloha.jQuery('#' + me.myId).aloha();
Again this one allows for editing but not dragging.
It seems like the moment the handles come on for a resize or drag event the aloha editor stops working, however if there are no handles the drag and resize stop working. Is there any advice, or has anyone encountered this before?
To Solve this, I did a Move Handler, HTML5 Style:
http://www.w3schools.com/html/html5_draganddrop.asp
And made my main canvas the drop area.
Next I added a small div inside the component which is editable.
and was able to make that div aloha. Then the default resizer works as long as you make the edges transparent.
Related
I am facing an issue where the tabs don't fit the entire width of the panel, and the user has to scroll to the right to view the rightmost tabs.
To see what I mean, please can go to this Sencha example, add enough tabs to enable the scrolling in the tab header.
My questions:
Is there a way to make the tabs wrap rather than having the scrolling effect?
Is there a plugin that can be used to create a dropdown menu/list with all the tabs or perhaps with the tabs that are not visible on the top right corner?
Is there a way to configure the table panel such that when I click on the > button on the right side to scroll the tab items, they scroll enough to make the next item visible instead of scrolling in small increments?
Ultimately, I could simulate the tab panel by adding a toolbar and buttons, and using the cardlayout. That would be my plan B.
Thank you
Update: I can set the flex: 1 property for each tab (inside tabConfig). I still have to figure out tooltips and enable the elipsis on the longer tabs that get chopped off.
There is a tabBar config for tabpanels, see here. Within this you can set layout properties, including overflowHandler, and one possible value is menu. This will do what you asked for in question 2. Add this config to tabpanel definition:
tabBar: {
layout: {
overflowHandler: 'menu'
}
}
Since adding a global Toolbar to the forms there is a strange animation bug (?) when changing forms. At hitting a Button at FormA that will invoke FormB.show() the title has an animation the lets the new form stutter in the toolbar area from the right to the left. After googling I found this:
This is pretty much the problem I face at the toolbar, only difference is the toolbar Logo I added to the center is stuttering from the right to the left to its place. After the animation is done, the form looks just like it should.
In the main I do this:
Toolbar.setGlobalToolbar(true);
In every Form I do something like this in the constructor:
menuForm = new Form(" ", new BorderLayout());
logo = res_theme.getImage("Logo_Gema_vertikal.png");
menuForm.getToolbar().getTitleComponent().setUIID("toolbar_image");
((Label)menuForm.getToolbar().getTitleComponent()).setIcon(logo);
menuForm.getToolbar().addCommandToSideMenu(homeCommand);
menuForm.getToolbar().getMenuBar().addCommand(homeCommand);
If I leave out adding the logo to the toolbar, only the Command Icons are flying from the right to the left. What is causing this? Am I using the toolbar wrong?
From your question, it's due to using the default animation which is createSlideFadeTitle. You can solve this by changing the animation of the current form and the destination form to either createCover or createSlide:
In the current form:
currentForm.setTransitionOutAnimator(CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, 300));
nextForm.show();
And in the destination form:
nextForm.setTransitionOutAnimator(CommonTransitions.createSlide(CommonTransitions.SLIDE_HORIZONTAL, false, 300));
currentForm.showBack();
I have a toolbar inside a simple container. They get rendered on a window's div. When I resize the window the toolbar remains stationary. If the window gets smaller the toolbar starts disappearing (overflowing outside). If the window gets bigger the toolbar stays in its position instead of trying to remain to the far right where it started. I've tried the resize and enable overflow configs but nothing seems to work. I'm thinking that its positioning through the div might be the problem but I'm not sure how to test or fix that. Any ideas?
Some sample code:
var toolbar = Ext.create('MyToolbar');
var toolbarContainer = Ext.create('widget.contaienr', {renderTo: 'myDiv', items: [toolbar]});
.
.
.
<div id='myDiv'></div>
Check this function in the EXtJs docs
onWindowResize( fn, scope, [options] )
Adds a listener to be notified when the browser window is resized and provides resize event buffering (100 milliseconds), passes new viewport width and height to handlers.
Example code looks like the below(I guess you have to write it in your afterRender .(You have to add this event and then fire it.))
Adding the event in the init component looks like below
this.addEvents('setInboxTileSource');
Firing the event in the afterRender looks like below
Ext.EventManager.onWindowResize(function (w, h) {
this.fireEvent('BROWSER_WINDOW_RESIZE')
}, this, {buffer: 150});
You have to listen the event and set your width and height for your toolbar.
listeners: {
BROWSER_WINDOW_RESIZE: this.handleResize,
scope: this
}
handleResize:function(){
this.setHeight(Ext.getBody().getViewSize().height - 270);
this.setWidth(Ext.getBody().getViewSize().width- 100);
}
Hope this helps you...
Toolbars should not be configured that way. If you have a window, it should be configured this way:
Ext.create('Ext.window.Window',{
title:'some title'
,width:400
,height:300
,tbar:[{
// here come toolbar items
}]
});
For more examples see http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/menu/menus.html and other toolbar examples.
When I have a collapsible panel, ExtJs renders an icon in the tools area to expand/collapse, but also puts a little black triangle between the panels to do exactly the same thing.
I found in the documentation that I can hide the icon in the tools area, using hideCollapseTool:true, but I want to hide that little black triangle instead. How to do that?
Did you try split:false on the panel?
In Ext JS 5 (and likely some earlier versions as well) the split configuration parameter can be either a boolean value or a configuration object for an Ext.resizer.BorderSplitter object.
According to the API the collapsible property can be used to manually show or hide the collapse button in the splitter, so you can set that property to false to hide that button you're talking about.
The solution tested and working in 5.1 looks like this, assuming the panel is contained in a container with a border layout:
{
xtype: 'panel',
region: 'west',
split: {
collapsible: false
}
}
P.S. I know this is 2 years late but I found this question while looking for the solution myself. Figured I might as well share the solution from the API.
Edit: Made a fiddle. Also, it's worth mentioning that this retains all of the other splitter functionality that is lost if you use split: false, such as keeping the panel resizable.
I am using sencha to update a panel as follows.
I will have a handler for a button.
In that i am removing a docked panel from a panel. and then adding the some new panel as a docked item.
But the contents of the panel are not appearing. They are appearing only when i change the size of the browser window, i.e., maximize it or restore it.
How can the problem be solved?
The code for the problem is as shown below.
handler: function(){
chaptersPanel.removeDocked(chaptersList[chaptersPanel.getStory()]);
chaptersPanel.insertDocked(0,chaptersList[this.no]);
chaptersPanel.setStory(this.no);
chaptersPanel.doLayout();
mainPanel.setActiveItem("chaptersPanel");
}
YOu need to do a doComponentLayout() sometimes. Sencha Touch is a little flakey about it. doLayout is supposed to handle the componentlayout, but it doesn't always