I am using the below code -
afterListeners: function(thisEl, eOpts) {
sliderSprite = Ext.create('Ext.draw.sprite.Rect', {
width: spriteWidth, // half year width height : 20, x : 16, y : 0, draggable : true, floatable : true, 'stroke-width' : 2, fill : '#FCE5C5', stroke : '#C6B395' });
sliderSprite.show(true);
thisEl.getSurface().add(sliderSprite);
alert("before source");
new Ext.drag.Source({
element: sliderSprite,
constrain: {
// Drag only horizontal in 30px increments
horizontal: true, // snap: { // y: 30 // }
},
onDragMove: function() {
alert("inside source");
spriteHighlighter.remove();
me.onDragSprite(e, this, chartWidth, spriteWidth);
},
onDragEnd: function() {
me.refreshCharts(xPlots, bigChart, sliderSprite, firstYear, lastYear, chartWidth);
}
});
alert("outside source");
},
}
}
Now, the issue is, control doesn't go inside the Ext.drag.Source(). I get 2 alert messages ,before source and outside source. and because it doesn't go inside Ext.drag.Source().
The drag-able functionality of the element is not working. What should I do ?
First you need to be clear on which component you want to use. After that you need to put afterrender event on that component and inside of that event you can use Ext.drag.Source.
In this FIDDLE, I have created a demo using button and Ext.drag.Source.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
var buttons = [],
rendomColor = () => {
return "#" + ((1 << 24) * Math.random() | 0).toString(16);
};
for (var i = 0; i < 10; i++) {
buttons.push({
text: `Button ${i+1}`,
margin: 10,
style: `background:${rendomColor()}`
});
}
Ext.create({
xtype: 'panel',
height: window.innerHeight,
title: 'Ext.drag.Source Example',
defaults: {
xtype: 'button'
},
items: buttons,
renderTo: Ext.getBody(),
listeners: {
afterrender: function (panel) {
panel.items.items.forEach(item => {
new Ext.drag.Source({
element: item.el,
constrain: {
// Drag only vertically in 30px increments
//vertical: true,
snap: {
y: 1,
x: 1
}
}
})
})
}
}
});
}
});
Related
Using ExtJS Classic 7.3.0
Trying to animate the window while it is showing, but the title of the window is not ending up at the specifications in 'TO' config. Fiddle is here: Sencha Fiddle
If you try to drag the window by clicking on the "blue title", you will see the entire title how it should be, but thats it.
Anyone know if I need to specify something else here?
I tinkered with it a bit and found that it worked if you set the width property on the window:
width: Ext.getBody().getViewSize().width / 2,
Full code:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Window', {
id: 'win',
title: "Window",
width: Ext.getBody().getViewSize().width / 2,
html: "<h1>Hello</h1> ",
listeners: {
show: function (win) {
var el = win.getEl();
var size = Ext.getBody().getViewSize();
el.animate({
from: {
opacity: 0,
width: 0,
height: 0,
x: size.width/2,
y: size.height/2
},
to: {
opacity: 100,
width: size.width/2,
height: size.height/2,
x: size.width/4,
y: size.height/4
},
});
},
beforeclose: function (win) {
if (!win.shouldClose) {
win.getEl().fadeOut({
duration: 2000,
callback: function () {
win.shouldClose = true;
win.close();
}
});
}
return win.shouldClose ? true : false;
}
}
}).show();
}
});
width: '50%'
also seems to work.
Please check this fiddle. I have a simple textareafield. If user try to paste data into the textarea which contains more than 5 lines, I want to show error message by turning the border of the textareafield red & showing some message.
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
height: 60,
layout: 'anchor',
minHeight: 60,
width: 200,
items: [{
grow: true,
anchor: '100%',
flex: 1,
enableKeyEvents: true,
xtype: 'textareafield',
id: 'txtFld',
listeners: {
keydown: function (txtArea, e, eOpts) {
//console.log(e.getKey());
if (e.keyCode == 13 && txtArea.value.split("\n").length >= 5) {
console.log('unable to stop :( ');
e.stopEvent();
return false;
}
},
paste: {
element: 'inputEl',
delay: 1,
fn: function (event, inputEl) {
if (event.type == "paste") {
if (inputEl.value.split("\n").length > 5) {
var enteredValues = inputEl.value.split("\n");
var modifiedText = inputEl.value.split("\n").slice(0, 5);
inputEl.value = modifiedText.join("\n");
// How to show Show error message stating some of the values are ignored ????
}
}
}
}
}
}]
}).show();
});
You can use the markInvalid function on the textarea to achieve the behaviour which applies for regular validation and which basically is what you described as the desired behaviour.
Ext.getCmp('txtFld').markInvalid('Some content was removed');
I've updated your fiddle so you can have a look at it.
I have added an input field to Window's title bar (header). On Chrome selecting and editing the input field works, and I can still drag the window around. On Firefox I can drag the window around the viewport, but I am unable to select the input field and edit it. How should I correct this code so that it would work on both browsers?
Quick'n'dirty demonstration of the problem:
Ext.define('Demo.DemoWindow', {
extend: 'Ext.window.Window',
xtype: 'demowindow',
height: 300,
width: 400,
title: 'Window',
autoShow: true,
items: [{
xtype: 'button',
text : 'Press!',
listeners: {
click: function() {
var win = this.up('window');
var header = win.getHeader();
header.setTitle('');
var killDrag = false;
var dragEvent = win.dd.on({
beforedragstart: function(dd, e) {
if (killDrag) {
return false;
}
}
});
var field = Ext.create('Ext.form.field.Text', {
name: 'Title',
allowBlank: false,
value: 'Type here something!',
listeners: {
el: {
delegate: 'input',
mouseout: function() {
killDrag = false;
},
mouseenter: function() {
killDrag = true;
}
}
}
});
header.insert(0, field);
}
}
}]
});
Ext.application({
name: 'Demo',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'absolute',
items: [
{
xtype: 'demowindow',
x: 20,
y: 20,
}
]
});
}
});
Using the mouseover event instead of mouseenter seems to work well with both.
I want to add buttons in one of columns in the grid. I try this code
listeners: {
render: {
fn: function(kad_tab){
var view = kad_tab.getView();
for (var i = 0; i < store.getCount(); i++) {
var cell = Ext.fly(view.getCell(i, 2));
new Ext.Button({
handler: function(){
alert('Suppression')
},
renderTo: cell.child(".btn"),
text: 'Supprimer'
});
}
},
// delay: 200
}
}
{header: "", width: 70, dataIndex: '', renderer: function(){ return '<div class="btn" style="height: 11px; width: 60px"></div>';}}
But firebug says that he see error here Ext.fly(this.getRow(c)) is null.
if i use delay: 200. There is no errors in firebug but dont see a buttons in column.
What im doing wrong?
I found a simple way...
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon : url_servlet+'externals/gxp/src/theme/img/pencil.png',
tooltip: 'Button click',
handler: function(grid, rowIndex, colIndex) {
alert("DAMACIA!!!!!");
}
}]
}
I have a Panel with two buttons that is used inside another panel. Right now it renders the buttons correctly but I'd like to add a margin between them. How to configure layout properly to get this ?
return Ext.create('Ext.panel.Panel', {
width: 220,
height: 35,
border: false,
collapsible: false,
renderTo: renderTo,
items : [
{
xtype: 'button',
scale: 'medium',
text: this.exportButtonText,
handler: function() {
var form = this.form.getForm();
if (form.isValid()) {
var values = form.getValues();
form.reset();
this.plugin.printSettings = values;
this.progressBar.show();
this.plugin.doPrint();
}
},
scope: this
},
{
xtype: 'button',
scale: 'medium',
text: this.cancelButtonText,
handler: function() {
me.close();
},
scope: this
}
]
});
Or add this to left button definition:
{
margin: '0 5px 0 0'
}
Add this in between them:
{
xtype: 'tbspacer',
flex: 1
}