does any body know how to show the horizontal scroller on tree panel...
since it describe here, the bugs will be fix in 4.1.x version,...
cause i'm not satisfied, i try to googling to find the hot fix,.
and i got this, Mr. Edspencer suggest to using ext 4.0.6....
but, it still not working,. (tested version 4.0.7)
anybody know how to fix this???
I have some workaround. See code below.
afterrender: function() {
var view = this.getView();
var c = view.container;
var e = view.el;
var max = 0;
Ext.each(e.query('.x-grid-cell-inner'), function(el) {
el = Ext.get(el);
var size = el.getPadding('lr');
Ext.each(el.dom.childNodes, function(el2){
if (el2.nodeType == 3) {
size += 6 + el.getTextWidth(el2.nodeValue);
} else {
size += Ext.get(el2).getWidth();
}
});
max = Math.max(max, size);
});
max += c.getPadding('lr');
if (c.getWidth() < max) {
c.dom.style.overflowX = 'scroll';
e.setWidth(max);
e.down('table').setWidth(max);
}
}
You only need to add this listener to your TreePanel. Basically it finds width of wider element and extend width of table, switch overflow on container.
Working sample: http://jsfiddle.net/Uf7yy/2/
Related
I have a large set of data that needs virtual scrolling and I use PrimeNg v13.4.0 with angular/cdk v13.3.7. I have exactly the same issue with PrimeNg demo. When scrolling down, the sticky header works well, but when scrolling up, it start jumping, the faster scroll, the bigger jump. Does anyone has any solution for this?
This issue and its pull request is added to version 13 future milestone which has no due date.
https://github.com/primefaces/primeng/milestone/175
For now you can do this solution:
If you slow down the wheel speed of the cdk-virtual-scroll-viewport, even slightly,
The thead works as it should without any jumping.
changeWheelSpeed(container, speedY) {
var scrollY = 0;
var handleScrollReset = function() {
scrollY = container.scrollTop;
};
var handleMouseWheel = function(e) {
e.preventDefault();
scrollY += speedY * e.deltaY
if (scrollY < 0) {
scrollY = 0;
} else {
var limitY = container.scrollHeight - container.clientHeight;
if (scrollY > limitY) {
scrollY = limitY;
}
}
container.scrollTop = scrollY;
};
var removed = false;
container.addEventListener('mouseup', handleScrollReset, false);
container.addEventListener('mousedown', handleScrollReset, false);
container.addEventListener('mousewheel', handleMouseWheel, false);
return function() {
if (removed) {
return;
}
container.removeEventListener('mouseup', handleScrollReset, false);
container.removeEventListener('mousedown', handleScrollReset, false);
container.removeEventListener('mousewheel', handleMouseWheel, false);
removed = true;
};
}
implement it in the ngAfterViewInit function:
ngAfterViewInit(): void {
const el = document.querySelector<HTMLElement>('.cdk-virtual-scroll-viewport');
this.changeWheelSpeed(el, 0.99);
}
FieldContainer doesn't show correctly when you put labelAlign: 'top'.
Find my Fiddle : https://fiddle.sencha.com/#fiddle/1c2s
I create a custom field which is base on field container.
If you resize the window to a smaller size, you'll see that the textfield will go above the fieldContiner.
Any idea on how to fix this? Any workaround?
I've tried several stuff but I'm struggling... I don't now where I can act to change this...
And I definitly need to fix this.
Thanks in advance
(for reference: Open bug in Sencha forum: https://www.sencha.com/forum/showthread.php?311212-Fieldcontainer-incorrectly-displays-in-toolbar-with-label-aligned-top)
Looks like bug indeed, but there is pretty easy way to make that work - just set minHeight: 65 to your url field.
Fiddle: https://fiddle.sencha.com/#fiddle/1caa
I'm pretty sur I found the answer.
There is a mismatch between the build src and the doc!
If you check in your built source for file src/layout/component/field/FieldContainer.js you will notice that it doesn't correspond to the doc (and especially some method missing like calculateOwnerHeightFromContentHeight).
note: This has been fixed in ExtJs 6.2.0
Proposed override to fix this:
/**
* Override to fix componentLayout wrong calculation of height when labelAlign='top'
*
* See post forum:
* {#link https://www.sencha.com/forum/showthread.php?311212-Fieldcontainer-incorrectly-displays-in-toolbar-with-label-aligned-top}
*/
Ext.define('MyApp.overrides.layout.component.field.FieldContainer', {
override: 'Ext.layout.component.field.FieldContainer',
compatibility: [
'6.0.0',
'6.0.1',
'6.0.2'
],
/* Begin Definitions */
calculateOwnerHeightFromContentHeight: function(ownerContext, contentHeight) {
var h = this.callSuper([ownerContext, contentHeight]);
return h + this.getHeightAdjustment();
},
calculateOwnerWidthFromContentWidth: function(ownerContext, contentWidth) {
var w = this.callSuper([ownerContext, contentWidth]);
return w + this.getWidthAdjustment();
},
measureContentHeight: function(ownerContext) {
// since we are measuring the outer el, we have to wait for whatever is in our
// container to be flushed to the DOM... especially for things like box layouts
// that size the innerCt since that is all that will contribute to our size!
return ownerContext.hasDomProp('containerLayoutDone') ? this.callSuper([ownerContext]) : NaN;
},
measureContentWidth: function(ownerContext) {
// see measureContentHeight
return ownerContext.hasDomProp('containerLayoutDone') ? this.callSuper([ownerContext]) : NaN;
},
publishInnerHeight: function(ownerContext, height) {
height -= this.getHeightAdjustment();
ownerContext.containerElContext.setHeight(height);
},
publishInnerWidth: function(ownerContext, width) {
width -= this.getWidthAdjustment();
ownerContext.containerElContext.setWidth(width);
},
privates: {
getHeightAdjustment: function() {
var owner = this.owner,
h = 0;
if (owner.labelAlign === 'top' && owner.hasVisibleLabel()) {
h += owner.labelEl.getHeight();
}
if (owner.msgTarget === 'under' && owner.hasActiveError()) {
h += owner.errorWrapEl.getHeight();
}
return h + owner.bodyEl.getPadding('tb');
},
getWidthAdjustment: function() {
var owner = this.owner,
w = 0;
if (owner.labelAlign !== 'top' && owner.hasVisibleLabel()) {
w += (owner.labelWidth + (owner.labelPad || 0));
}
if (owner.msgTarget === 'side' && owner.hasActiveError()) {
w += owner.errorWrapEl.getWidth();
}
return w + owner.bodyEl.getPadding('lr');
}
}
});
How do I restrict the drag operation not exceeding certain boundary. Is there any config in extjs (version 3), I saw that, Ext.dd.DragZone class is used. But Im not sure what is the usability. I saw a method dropNotAllowed. Is that the method, that has to be used? if so, how should I use that? Please provide some examples.
Im looking for something similar to (jquery UI's draggable containment property)
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.dd.DragZone-cfg-dropNotAllowed
I tried using the set X and Y constraints, but it did not work-out:
abc.prototype.initDrag = function(v) {
v.dragZoneobj = new Ext.dd.DragZone(v.getEl(), {
getDragData : function(e) {
var sourceEl = e.getTarget(v.itemSelector, 10);
// sourceEl.setXConstraint( 0, 10 );
var t = e.getTarget();
var rowIndex = abc.grid.getView().findRowIndex(t);
var columnIndex = abc.grid.getView().findCellIndex(t);
if ((rowIndex !== false) && (columnIndex !== false)) {
if (sourceEl) {
abc.isDragged = true;
abc.scriptGrid.isDraggableForObject = false;
abc.scriptGrid.dragRowIndex = false;
d = sourceEl.cloneNode(true);
d.id = Ext.id();
d.textContent = sourceEl.innerHTML;
// d.setXConstraint( 0, 10 );
// d.setYConstraint( 0, 10 );
return {
ddel : d,
sourceEl : d,
sourceStore : v.store
}
}
}
},
getRepairXY : function() {
return this.dragData.repairXY;
},
});
}
Both are commented in the above code. The above code is initiated when the panel is rendered.
edit:
How these setX and setYcontraints have to be used?
By default, the element can be dragged any place on the screen. In the doc there are two methods setXConstraint( iLeft, iRight, iTickSize) and setYConstraint( iUp, iDown, iTickSize )
These two methods is used to set to limit the vertical travel and horizental travel of the element.
I'm attempting to make a small game where the user mouses over the circles that fall from the ceiling for points. The circles are added to a container and pushed into an array to hold them, and are removed and spliced when they are mouse-over'd or go off stage.
Everything works fine, until two circles are removed at nearly the same time, whether it be from falling off stage at the same time or mousing over two of them extremely fast. When this happens, the child on stage is removed, but the object is still left in the array, meaning another circle cannot take its place, leaving one less circle spawning every time the issue happens.
Code on main timeline:
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.MovieClip;
import flash.display.Sprite;
var ballContainer:Sprite = new Sprite();
addChild(ballContainer);
var maxBalls:uint = 10;
var balls:Array = [];
var ballTypes:Array = [GreenBall];
var ballChances:Array = [800];
var ballVelocities:Array = [1.5];
var ballAccelerations:Array = [1.02];
stage.addEventListener(Event.ENTER_FRAME, onTick);
function onTick(e:Event):void {
while (balls.length < maxBalls){
addBall();
}
}
function addBall():void {
var ballType = ballTypes[0];
var ball = new ballType;
ball.x = Math.ceil(Math.random()*(stage.stageWidth - ball.width));
ball.y = 0 - (ball.height*1.5);
ballContainer.addChild(ball);
balls.push(ball);
}
Code in GreenBall:
import flash.events.Event;
var mainStage = Sprite(root);
var index = mainStage.balls.indexOf(this);
var velocity:Number = mainStage.ballVelocities[0]*randomNumber(0.5, 1.5);
var acceleration:Number = mainStage.ballAccelerations[0];
this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
function onMouseOver(e:MouseEvent):void {
this.removeEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
removeBall();
}
this.addEventListener(Event.ENTER_FRAME, onTick);
function onTick(e:Event):void {
this.y += velocity;
velocity = velocity*acceleration;
if (this.y > stage.stageHeight + this.height){
this.removeEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
removeBall();
}
}
function removeBall():void {
mainStage.balls.splice(index, 1);//doesn't get spliced if balls are removed too quickly
mainStage.ballContainer.removeChild(this);
this.removeEventListener(Event.ENTER_FRAME, onTick);
}
function randomNumber(min:Number, max:Number):Number {
return Math.random()*(max - min) + min;
}
So what's going on? Did I set something up incorrectly? How can I go about fixing this issue?
Any help would be appreciated greatly.
Your logic is flawed - the index should be calculated when the removal occurs. When you remove objects from an array via splice, the index of all the elements after the one you removed is decreased by one.
This means that if you have 10 balls and remove the first, the index value you have for every other ball will be incorrect and you'll be removing the wrong ball from your array on subsequent removals.
Moving the indexOf statement to the removeBall method should solve the issue:
function removeBall():void
{
var index:int = mainStage.balls.indexOf(this);
if(index >= 0)
{
mainStage.balls.splice(index, 1);
mainStage.ballContainer.removeChild(this);
this.removeEventListener(Event.ENTER_FRAME, onTick);
}
}
To make it easy on yourself, you could extend Array and make a remove function:
public dynamic class List extends Array
{
public function remove(item:*):void
{
var i:int = indexOf(item);
if(i >= 0) splice(i, 1);
}
}
I have been trying to do this for two nights now and haven't had any joy, please help if you can...
Simple throwing game with darts and other weapons, what I am trying to do is
Remove an array and all of its Children when I change weapon,
I feel sure there is a simple snippet of code that will remove all the children and array with no hassle but I haven't yet figured it out, if you know or could suggest anything, I would really appreciate it.
something like "removeArrayAndAllInstances(balls);" if only...
at the moment I have....(balls is the array in question)
for(var inter:int = balls.length - 1; inter > -1; inter--)
{
balls.splice(1);
balls.splice(1, balls.length);
}
but this docent work for some reason, the array and all of its children are all still on the stage.
I also tried
balls[];
No luck...
Please don't judge my code I am a novice as I am sure was evident and I know its a disgusting mess, sorry (Its the only way it makes sense to me).
I have tried numerous things, hope someone can help
Thanks in advance.....
var mouseTarget:MovieClip;
var balls:Array = new Array();
var ball:MovieClip = new dart();
var hammers:MovieClip = new hammer();
ball.x = 150;
ball.y = 50;
hammer_btn.addEventListener(MouseEvent.MOUSE_DOWN, hammerweapon);
dart_btn.addEventListener(MouseEvent.MOUSE_DOWN, dartweapon);
function removealldartsfromstage(e:MouseEvent):void
{
for(var inter:int = balls.length - 1; inter > -1; inter--)
{
balls.splice(1);
balls.splice(1, balls.length);
}
stage.removeEventListener(MouseEvent.MOUSE_UP, addDart);
}
function dartweapon(e:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, addHammer);
dart_btn.removeEventListener(MouseEvent.CLICK, dartweapon);
stage.addEventListener(MouseEvent.MOUSE_UP, addDart);
//removeChild(balls);
}
function hammerweapon(e:MouseEvent):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, addDart);
dart_btn.addEventListener(MouseEvent.MOUSE_DOWN, dartweapon);
//stage.addEventListener(MouseEvent.MOUSE_UP, addDart);
stage.addEventListener(MouseEvent.MOUSE_UP, addHammer);
}
function addHammer(e:MouseEvent):void
{
var hammers = new hammer();
addChild(hammers);
removeChild(dart_btn);
addChild(dart_btn);
dart_btn.addEventListener(MouseEvent.CLICK, dartweapon);
balls.splice(10);
}
function addDart(e:MouseEvent):void
{
str.alpha = 0;
var ball = new dart();
addChild(ball);
removeChild(hammer_btn);
addChild(hammer_btn);
ball.x = 150;
ball.y = 50;
balls.push(ball);
trace(balls);
addEventListener(Event.ENTER_FRAME, checkIfHitTest);
hammer_btn.addEventListener(MouseEvent.MOUSE_DOWN, removealldartsfromstage);
function checkIfHitTest(Event)
{
for (var i:int = 0; i<balls.length; i++)
{
if (balls[i].dart_point.hitTestObject(eyeleft))
{
trace("hitleftbullseye");
ball.gotoAndStop("hitlefteyeframe");
Event.currentTarget.removeEventListener(Event.type, checkIfHitTest);
balls.splice(i, 1);
}
}
}
}
The balls array is just a storage for ball references. It bears no relation to the stage or the DisplayObjectContainer which they have been added at all. So you have to remove them individually.
This is what I'd do:
while(balls.length > 0)
{
var ball:MovieClip = balls.pop();
if (ball.parent) // Just to make sure you are referencing the correct container.
{
ball.parent.removeChild(ball);
}
}
I can't follow the logic of your game very well. That said, you'd do well to create conatiners for separate group of clips in order to make managing them easier. For example, in the creation stage:
var ballContainer:Sprite = new Sprite();
addChild(ballContainer);
for (var i:int = 0; i < ballLimit; i++)
{
var ball:Dart = new Dart();
ballContainer.addChild(ball);
}
This way, you can clear them of children all at once:
function removeAllChildren(container:Sprite) // Or just DisplayObjectContainer
{
while(container.numChildren > 0)
{
container.removeChild(container.getChildAt(0));
}
}