I am using Sencha touch 2.0.1.1.
In the view I am doing some animation in dragend function of a container and on this animation end I want to perform some more things, but the after handler is not taking function as handler. Here is the code
Ext.Animator.run({
element: dataview.element,
duration: 500,
autoClear : true,
easing: 'ease-in',
preserveEndState: true,
to: {
height: to_h
},
from: {
height: dataview.element.getHeight()
},
after: function() {
console.log ("After run");
}
});
This is the error I get:
Uncaught Error: [ERROR][Ext.fx.animation.Abstract#applyAfter] Invalid config, must be a valid config object Console.js:17
but this somehow works if I do like this:
Ext.Animator.run({
element: dataview.element,
duration: 500,
autoClear : true,
easing: 'ease-in',
preserveEndState: true,
to: {
height: to_h
},
from: {
height: dataview.element.getHeight()
},
after: {
fn : console.log (this)
}
});
Since I want to do bunch of things apart from just console.log so can someone suggest me right way to use this handler to execute a function which is written in-place or in the view?
Try 'onEnd:' instead of 'after:'
Related
I need to test how the select component behaves when it is positioned at the bottom of a page. When it is 1) at the top of the page - it opens dropdown to the bottom, and when it is 2) at the bottom of the page it opens dropdown to the top. I have no problem with testing its first behaviour, but I cannot test the second.
I tried to test it like this:
document.body.style.height = '500px'
const { container } = render(<Select {...requiredProps} />)
container.firstChild.style.position = 'fixed'
container.firstChild.style.bottom = '0'
fireEvent.click(screen.getByTestId('dropdown-container'))
expect(screen.getByTestId('dropdown-items')).toHaveStyle(stripSpaces('bottom: 100%'))
But still I cannot simulate the proper behaviour.
I tried also below:
Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: 500 })
render(<Select {...requiredProps} />)
fireEvent.scroll(window, { target: { scrollY: 500 } })
fireEvent.click(screen.getByTestId('dropdown-container'))
expect(screen.getByTestId('dropdown-items')).toHaveStyle(stripSpaces('bottom: 100%'))
And also below:
Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: 500 })
render(<Select {...requiredProps} style={{ position: 'fixed', bottom: '0' }} />)
fireEvent.click(screen.getByTestId('dropdown-container'))
expect(screen.getByTestId('dropdown-items')).toHaveStyle(stripSpaces('bottom: 100%')
The problem is that to open dropdown at the top, I use getBoundingClientRect() on select, to find out how far it is from top and bottom. And in jest testing, getBoundingClientRect always returns 0 for each value - see https://github.com/jsdom/jsdom/pull/689
I try to manipulate container to give it top value of 480 but with no success.
I would first scroll all the way down and then check if some expected content or whatever appears.
you can use:
fireEvent(node: HTMLElement, event: Event)
https://testing-library.com/docs/dom-testing-library/api-events/
example:
fireEvent.scroll(scrollContainer, { target: { scrollY: 100 } });
So the answer is, yes, it is possible. It is done simply by setting the height of window first:
Object.defineProperty(window, 'innerHeight', {
writable: true, configurable: true, value: 500
})
And then by rendering the element using style property:
render(<Select {...requiredProps} style={{ position: 'fixed', bottom: 0 }} />)
I needed to position select in this way, in order to check if its items open to the top. The tests failed for me, because I calculated the condition using offsetHeight and `getBoundingClientRect() (I should have mentioned that in my question). So I needed to overwrite those values. My final test looks like this:
Object.defineProperty(window, 'innerHeight', {
writable: true, configurable: true, value: 500
})
Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
configurable: true, value: 200
})
Element.prototype.getBoundingClientRect = jest.fn().mockReturnValueOnce({ top: 400 })
render(<Select {...requiredProps} style={{ position: 'fixed', bottom: 0 }} />)
fireEvent.click(screen.getByTestId('dropdown-container'))
expect(screen.getByTestId('dropdown-items')).toHaveStyle(stripSpaces('bottom: 100%'))
When I try to call a method or set a state inside a property of a component in this case Sortablejs the method returns an undefined error.
<Sortable options={{
animation: 150,
onAdd: function(/**Event*/ evt) {
this.testFunction();//this doesnt seem to work??
},
group: {
name: "clone2",
pull: true,
put: true
}
}}
className="block-list A"
tag="ul"
>
{cloneControlledTarget}
</Sortable>
<Sortable
options={{
animation: 150,
sort: false,
group: {
name: "clone2",
pull: "clone",
put: false
}
}}
className="block-list"
tag="ul"
>
{cloneControlledSource}
</Sortable>
I think issue is in the following code. Use arrow function instead of traditional anonymous function
onAdd: function(/**Event*/ evt) {
this.testFunction();//this doesnt seem to work??
}
Use like this
onAdd: (/**Event*/ evt) => {
this.testFunction();
}
This should work if testFunction is available in your component.
You are passing an object
{
animation: 150,
onAdd: function(/**Event*/ evt) {
this.testFunction();
},
group: {
name: "clone2",
pull: true,
put: true
}
}
to the options attribute. So inside the function onAdd the value of "this" refers to the object properties. Since there is no testFunction inside the object, it will throw a reference error. Use arrow function instead.
onAdd: () => { this.testFunction() }
When click first time on showbutton then window open perfectly but when i close window and again open this then its giving error("Cannot read property 'dom' of null ") on line 'shiftWindow.show();'. Any help is appreciated.
var shiftWindow = Ext.create('Ext.window.Window', {
title: 'Edit Shift',
resizable: false,
id: 'shiftwindow',
width: 465,
//bodyPadding: 5,
modal: true,
store: shiftStorePlanner,
items: {
xtype: 'form',
id: 'idFormShift',
bodyPadding: 10,
items: shiftViewModelPlannerData
},
buttons: [{
text: 'Save',
cls: 'planner-save-button',
overCls: 'planner-save-button-over',
handler: function () {
var wi = this.up('.window');
var form = Ext.getCmp('idFormShift');
if (form.isValid()) {
shiftTimemappingarray = [];
// getShiftTime();
setShiftTimeDetails();
}
}
}, {
text: 'Cancel',
handler: function () {
this.up('.window').close();
}
}]
});
shiftWindow.show();
If you are calling close() on the window, the window is destroyed. It no longer exists in the DOM. You'll have to create it again before calling show().
Alternatively, instead of closing it, you can hide() the window. Then it will remain and not require another creation. Note that the upper right-hand 'x' will still fire the close event.
On Cancel click of your window,
instead of using
this.up('.window').close();
You should use
this.up('.window').destroy();
because then only it will destroy the whole window including dom. So everytime you open it, it will new and fresh.. ;)
Maybe you just not define a div element in the body like me.
<div id="helloWorldPanel">
</div>
I have the following class in ExtJS 5.1:
Ext.define('Web.view.guard.apps.conexao.Conexao', {
extend: 'Web.view.guard.apps.App',
width: 400,
height: 600,
statics: {
title: 'Conexão',
icon: 'https://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg'
},
});
I want to access the static attributes from the instance context, like title = this.statics.title or something like this, from the controller or the view itself, but I can't find a way in the documentation.
I found through Google a reference to a method statics(), but it doesn't work, this.statics().title returns null, although the statics() method do exists.
How is it possible?
The simple way is
Web.view.guard.apps.conexao.Conexao.title
But this.self is a reference to Web.view.guard.apps.conexao.Conexao, so you can use this.self.title. See http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.Base-property-self and https://fiddle.sencha.com/#fiddle/na0
Ext.define('Web.view.guard.apps.conexao.Conexao', {
extend: 'Web.view.guard.apps.App',
width: 400,
height: 600,
statics: {
title: 'Conexão',
icon: 'https://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg'
},
myInstanceMethod: function() {
console.log(this.self.title);
}
});
var conn = new Web.view.guard.apps.conexao.Conexao();
conn.myInstanceMethod();
// 'Conexão'
// 'https://upload.wikimedia.org/wikipedia/commons/a/ac/Approve_icon.svg'
If you want it to be accessible to subclasses, be sure to use inheritableStatics: {} instead.
I have an extjs panel. I need to induce a drag and resizing property for this panel.
This is the code for creating the panel:
var childPanel = new Ext.Panel({
draggable: true,
layout: 'fit',
................
});
I have achieved drag and resizing properties using the code:
Ext.override(Ext.Panel, {
// private
initEvents: function () {
if (this.draggable) {
this.initDraggable();
}
this.resizer = new Ext.Resizable(this.el, {
animate: true,
duration: '.6',
easing: 'backIn',
handles: 'all',
pinned: false,
transparent: true
});
this.resizer.on("resize", this.onResizer, this);
},
onResizer: function (oResizable, iWidth, iHeight, e) {
this.setHeight(iHeight);
this.setWidth(iWidth);
}
});
As you can see I am overriding the property. Therefore all the panels that I create have these properties. I don't want it like that.
I know that Ext.extend is the method to use but each time I am getting some errors. What I need is an extended panel with the above code.
Can anybody help me to achieve this?
Have you tired extending? what were the errors?
Your should remmeber to call the superclass constructor from the extended methods.
MYDRAGRESIZEPANEL = Ext.extend(Ext.Panel,{
// private
initEvents: function () {
**MYDRAGRESIZEPANEL.superclass.constructor.call(this);**
if (this.draggable) {
this.initDraggable();
}
this.resizer = new Ext.Resizable(this.el, {
animate: true,
duration: '.6',
easing: 'backIn',
handles: 'all',
pinned: false,
transparent: true
});
this.resizer.on("resize", this.onResizer, this);
},
onResizer: function (oResizable, iWidth, iHeight, e) {
this.setHeight(iHeight);
this.setWidth(iWidth);
}
});