I'm programming a Sencha Touch app with a moderately complex composition of Ext.TabBar with Ext.Panel 's inside it.
But my Ext.Panel using Ext.layout.CardLayout runs in to a mysterious problem when not having a fullscreen: true property set on it: it throws an TypeError: Object card has no method 'setActiveItem' when I try to call the panel's .setActiveItem() method which it didn't in my proof of concept version that had fullscreen: true turned on.
I can replicate the problem on Chrome's console at a page with the Sencha Touch library loaded like this:
> var p1 = new Ext.Panel({layout:'card', items:[{html:'a'},{html:'b'}]})
undefined
> p1.setActiveItem(0)
TypeError: Object card has no method 'setActiveItem'
And it doesn't happen with the .fullscreenproperty:
> var p2 = new Ext.Panel({fullscreen: true,
layout:'card',
items:[{html:'a'},{html:'b'}]})
undefined
> p2.setActiveItem(0)
subclass
What gives?
Version info: I'm using Sencha Touch 1.0.1a
Update 1 (Jan 3, ~10.30UTC+1h), stepping around with the debugger and discovering things:
Just setting layout: 'card' won't trigger the creation of an actual Ext.layout.CardLayout object being created for real. Since .setActiveItem() tries to delegate to the compent's .layout property, it will fail almost instantly. However, setting .layout to a new Ext.layout.CardLayout causes more problems down the line..
Update 2: (Jan 3, ~12:25UTC+1h) It all comes down to various component objects not being rendered/inserted in the dependency sufficiently to be ready to render. I managed to get my code working by adding listeners, first a listener for the added event in the enclosing panel that does a this.setLayout(new Ext.layout.CardLayout());, then an afterrender listener on the component being added that finally calls .setActiveItem() to switch to the desired card.
A card layout works fine when it's not the outer, fullscreen one, but of course something has to be the root, fullscreen panel.
In this case, I'm using a 'fit' layout around the inner card layout, and setting the active item works fine:
var inner = new Ext.Panel({
layout:'card',
items:[
{html:'a'},
{html:'b'}
]
});
var outer = new Ext.Panel({
fullscreen:true,
layout:'fit',
items:[
inner
]
});
I suspect the matter is more about whether the panel has been rendered or not, and fullscreen:true just happens to force immediate rendering (and of any children, which is why it works in my code above).
This is from the Ext.Component source:
if (this.fullscreen || this.floating) {
this.monitorOrientation = true;
this.autoRender = true;
}
if (this.fullscreen) {
var viewportSize = Ext.Viewport.getSize();
this.width = viewportSize.width;
this.height = viewportSize.height;
this.cls = (this.cls || '') + ' x-fullscreen';
this.renderTo = document.body;
}
I suppose you could do some of this set up manually... but I have to ask, how do you avoid have a fullscreen ancestor component outside it in the first place?
I had the same problem. The card layout only works if the container panel had the layout of 'fit'. But setting the container class to fit was causing the scroller to not working properly. So what I had to do is disabling the scroller for container and the card panel and set the scroller for the children of card panel.
Update 2 in my question kind of answers the question, although the solution feels distinctly cargo-cultish. I won't be too surprised if it breaks in future Sencha Touch versions.
Sencha may have changed this since this was posted since I don't get an error. However, setActiveItem() will force my views to be rendered immediately which is undesirable when setting up the UI. If you want to set the initial card without rendering the views immediately, use the property directly instead of the setter, like this:
yourComp.activeItem = yourView;
instead of
yourComp.setActiveItem(yourView);
Related
This is first time I use the handsonTable. I am trying to have a menu button with items undo/redo outside the context menu of the handsontable, and to make those items enabled/disabled, I need to check if the undo and redo are available after the table is rendered. At my surprise, when I call the functions isUndoAvailable() and isUndoAvailable inside the afterRender handler (as stated in the documentation https://github.com/handsontable/handsontable/wiki/Methods ), it causes the undefined JS error.
Here's a jsfiddle example of what I'm trying to do :
var container = document.getElementById('example');
var hot = new Handsontable(container,
{
data: data,
minSpareRows: 1,
colHeaders: true,
contextMenu: true,
afterRender: function(isForced){
if(this.isUndoAvailable()){
// do something
}
}
});
Please have a look at this jsfiddle example. Am I doing something wrong ?
Thanks in advance.
It seems you have stumbled upon an edge case, in which the undo/redo plugin (seems) to load only after the afterRender callback.
hot.isUndoAvailable()
This works in other callbacks, at least a few I tried just now.
Here's an updated version of your fiddle, just call isUndoAvailable outside of the afterRender callback and it will work.
I have a grid column with a custom renderer. Like so.
grid.healthCheckColumn = Ext.create('Ext.grid.column.Column', {
id: 'healthCheckColumn',
header: 'Health Check',
renderer: Ext.bind(me.renderHealthCheckColumn, me)
});
This renderer returns a div with class 'health-check-button', and that renders fine. Here’s my problem.
Once the renderer has populated a grid cell with the div, I want an event to fire which will allow me to render an ExtJS component to that div. Here’s the component I want to render:
var button = Ext.create('Ext.button.Button', {
ui: 'plain',
disable: val,
text: 'Analyze',
renderTo: div_element
});
The reason this won’t work is because an ExtJS component can only render to an element that’s already in the DOM, and that element won’t exist until after the renderer has run.
Obviously, I could put a call to Ext.defer() in my renderer, to fire an event after a timeout, but that seems hackish. That solution (to a similar question) was suggested here:
Ext js event fired or called after renderer
I’ve tried to figure out the order in which events fire, and in what sequence, but that’s not documented and I can’t make sense of the ExtJS source code. beforerender, render, and afterrender all fire before the renderer runs, which isn’t helpful.
Any suggestions? I’m running ExtJS 4.3.
I've noticed that if all OpenLayers.Layers have visibility set to false, I can no longer zoom in and out using my mousewheel. I can still use the OpenLayers.Control.Zoom buttons, but no longer the mouse wheel.
Is there anyway to disable this 'feature'?
Edit:
Here is a jsfiddle link. Set the layer to invisible, then scroll, then set it back to visible. It doesn't change. Now set it invisible, use the zoom control button, then set it back visible.
http://jsfiddle.net/a8kK4/56/
Here's some code for how the map is instantiated because SO won't let me post jsfiddle without it:
var map = new OpenLayers.Map({
div: "map",
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
layers: [ new OpenLayers.Layer.OSM() ]
});
The issue is to do with the onWheelEvent of the MouseWheel handler, see the code here on github. The issue arises with the lines
if (!overScrollableDiv && overMapDiv) {
if (allowScroll) {
as with the map hidden, you will never get it so that all of these conditions are met and therefore the call to this.wheelZoom(e) which actually does the zoom in/out never gets called. The behavior you are seeing is, therefore, by design.
One, somewhat crude way to fix this, is to override the whole function and just set the line where allowScroll is initialized to true, ie, you put the the whole function into your code, after the main OpenLayers.js has downloaded, and just change that one line
OpenLayers.Handler.MouseWheel.prototype.onWheelEvent= function(e){
if (!this.map || !this.checkModifiers(e)) {
return;
}
var overScrollableDiv = false;
//CHANGE THIS LINE TO TRUE
var allowScroll = true;
var overMapDiv = false;
//rest of function .......
};
The problem of doing this is that a scroll will now happen if you use the mouse wheel anywhere. There is probably a more elegant way by changing the conditions under which the values of overMapDiv and allowScroll and overScrollableDiv get set. I could not get this to work on jsFiddle (I think due to version conflicts), but locally it worked as expected. I hope this helps.
I have a Single Page Application with a lot of stuff in it, using durandal. On one page I have a link that leads to a different page where 3d model is rendered. OrbitControls are used to make model turn etc. That takes away my default left click and right click. After leaving that page, it still keeps mouse bindings and my left click and right click become useless for some uses like - selecting an tag meaning that input tags cannot be accessed again.
I could release bindings and reset them if I knew how. There is a deactivate function which is called when that 3d window is closed, but I have no idea what piece of code to write there. Any help would be extremely useful. I doubt any code will be of any use so I won't put any.
Thank you!
Due to request, here is simplified viewmodel:
define(['services/logger'], function (logger) {
var vm = {
attached: attached
};
return vm;
function attached(view) {
var camera, cameraTarget, scene, renderer, controls;
init();
animate();
function init() {
...
controls = new THREE.OrbitControls(camera);
...
}
function animate(){...}
function render(){...}
}
}
View is extremely complicated, but pasted here in full:
<div id="canvasDiv" style="overflow: hidden; width:100%; height:100%">
</div>
Actually, it would probably be helpful to include your code to setup OrbitControls (I'm not familiar with it).
The best approach to this whole issue would probably be to write a Knockout custom binding (google if you don't know them). A custom binding is a great place to abstract away DOM manipulation, in your case for setting up OrbitControls.
Let's assume that you have a div on which you set up OrbitControls. You could then do something like the following:
HTML:
<div data-bind="myOrbitControlsBinding: { someSetting: true; someOtherSetting: false }"></div>
JavaScript:
ko.bindingHandlers.myOrbitControlsBinding = {
init: function (element, valueAccessor) {
var settings = ko.utils.unwrapObservable(valueAccessor());
setupOrbitControlsOnElement(element, settings); // This should be your setup code for OrbitControls
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
// Here, you should unbind the event handlers for mouse clicks. How you do this depends on how OrbitControls sets them up. Please refer to their documentation for this. Maybe there is a generic dispose function?
disposeOrbitControls(element);
});
}
}
Edit:
Ah, I didn't realize you use Three. I've quickly scanned their documentation to see if they use some sort of input module that captures the events. They don't seem to. Which probably means that some where in your code, there is the keyword 'addEventListener' (search for it). This will be where the events are caught.
Your view probably has a viewmodel attached to it since you're using durandal. Inside the viewmodel, add a 'deactivate' method (and return it). In this method, you need to remove the event listener again. You probably already guessed it, but the method is called removeEventListener (see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.removeEventListener for an explanation)
I still highly recommend that you create a custom binding to setup Three. This will give you much more control over creation/deletion than you might have now. If you don't want to, make sure that Three is initialized inside the viewmodel as well, in the activate method.
Let me know if that helped, otherwise some viewmodel / three init code would be helpful.
I'm using ExtJS 3.2.1 and I need a component almost identical to the bundled HtmlEditor, with one exception: it must start editing the HTML source code directly. The reason I don't use a normal TextArea is that the user should be able to preview the result of his actions before submitting.
I've tried calling toggleSourceEdit(), as per ExtJS documentation, with no success. Debugging, I see that the editor object has the sourceEditMode property set to true, and the Source Edit button seems as if it was "pressed", but clicking on it does not render the typed HTML, and clicking it again goes to the Source Mode.
I've tried calling toggleSourceEdit() after the container show() method, on the container afterLayout listener and on the editor afterRender listener. I've tried also calling it on another button that I added to the container. The result is the same on every try.
The only other option I see is updating ExtJS to 3.3.0, but I haven't seem anything related on the changelogs. Either way, it's going to be my next step. EDIT: The app had another problems when updating, we'll make a bigger effort to update later. As of right now, we are using the HtmlEditor in its original setting.
Thanks!
ran into the same problem (using 3.3.0 by the way)
stumbled upon a fix by dumb luck. i have no idea why this works, but second time is the charm. call it twice in a row to achieve the desired effect..
HTMLEditor.toggleSourceEdit(true);
HTMLEditor.toggleSourceEdit(true);
hope that helps!
Rather calling toggleSourceEdit(), try to setup the configuration while you create HtmlEditor Object
Using toggleSourceEdit() caused some problems for me. One was that this seemed to put the editor somewhere in limbo between source edit and WYSIWYG mode unless I used a timeout of 250ms or so. It also puts the focus in that editor, and I don't want to start the form's focus in the editor, especially since it's below the fold and the browser scrolls to the focused html editor when it opens.
The only thing that worked for me was to extend Ext.form.HtmlEditor and then overwrite toggleSourceEdit, removing the focus command. Then adding a listener for toggling to the source editor when the component is initialized. This is for Ext 4.1 and up. For older versions, replace me.updateLayout() with me.doComponentLayout().
var Namespace = {
SourceEditor: Ext.define('Namespace.SourceEditor', {
extend: 'Ext.form.HtmlEditor',
alias: 'widget.sourceeditor',
initComponent: function() {
this.callParent(arguments);
},
toggleSourceEdit: function (sourceEditMode) {
var me = this,
iframe = me.iframeEl,
textarea = me.textareaEl,
hiddenCls = Ext.baseCSSPrefix + 'hidden',
btn = me.getToolbar().getComponent('sourceedit');
if (!Ext.isBoolean(sourceEditMode)) {
sourceEditMode = !me.sourceEditMode;
}
me.sourceEditMode = sourceEditMode;
if (btn.pressed !== sourceEditMode) {
btn.toggle(sourceEditMode);
}
if (sourceEditMode) {
me.disableItems(true);
me.syncValue();
iframe.addCls(hiddenCls);
textarea.removeCls(hiddenCls);
textarea.dom.removeAttribute('tabindex');
//textarea.focus();
me.inputEl = textarea;
} else {
if (me.initialized) {
me.disableItems(me.readOnly);
}
me.pushValue();
iframe.removeCls(hiddenCls);
textarea.addCls(hiddenCls);
textarea.dom.setAttribute('tabindex', -1);
me.deferFocus();
me.inputEl = iframe;
}
me.fireEvent('editmodechange', me, sourceEditMode);
me.updateLayout();
}
})
}
Then to use it:
Ext.create('Namespace.SourceEditor', {
/*regular options*/
listeners: {
initialize: function(thisEditor) {
thisEditor.toggleSourceEdit();
}
}
});
htmlEditor.toggleSourceEdit(true);
one time should be enough if you do this listening to the afterrender event of the editor.