I am using
var modalWindow = new Ext.Window({
title: "Window",
items: [
{html: "<div id='example'>Hello</div> "}
]
});
modalWindow.show();
to open a modal window. I need fadein/fadeout features on this window.
Please help..
This should do it:
var modalWindow = new Ext.Window({
title: "Window",
width: 400,
height: 300,
html: "<div id='example'>Hello</div> ",
listeners : {
show : function(window) {
window.getEl().setOpacity(0);
window.getEl().fadeIn({duration: 2000});
},
beforeclose : function(window) {
if(!window.shouldClose) {
window.getEl().fadeOut({duration: 2000, callback: function() {
window.shouldClose = true;
window.close();
}});
}
return window.shouldClose ? true : false;
}
}
});
modalWindow.show();
Related
Is there a solution to extend the KeyMap of the ItemSelector?
I would like to add a keymap(like pageUp and pageDown keyEvent in itemselector) that when I press the letter 'A-Z' will take me to the item that starts with the letter pressed and select it.
You can use the following override (fiddle sample) to achieve it. It will not work correctly on view sore reload. And you will have to define the record search record field. In case of complicated view templates you can remove hardcoded search function and use it as a setting.
Ext.define('overrides.view.NavigationModel', {
override: 'Ext.view.NavigationModel',
searchRecordField: false,
initKeyNav: function (view) {
var me = this;
// Drive the KeyNav off the View's itemkeydown event so that beforeitemkeydown listeners may veto.
// By default KeyNav uses defaultEventAction: 'stopEvent', and this is required for movement keys
// which by default affect scrolling.
var keyNavConfig = {
target: view,
ignoreInputFields: true,
eventName: 'itemkeydown',
defaultEventAction: 'stopEvent',
processEvent: me.processViewEvent,
up: me.onKeyUp,
down: me.onKeyDown,
right: me.onKeyRight,
left: me.onKeyLeft,
pageDown: me.onKeyPageDown,
pageUp: me.onKeyPageUp,
home: me.onKeyHome,
end: me.onKeyEnd,
space: me.onKeySpace,
enter: me.onKeyEnter,
A: {
ctrl: true,
// Need a separate function because we don't want the key
// events passed on to selectAll (causes event suppression).
handler: me.onSelectAllKeyPress
},
F: me.onAlphabetKeyPress,
scope: me
};
if(this.view.searchRecordField) {
keyNavConfig = Ext.Object.merge(keyNavConfig, this.getAdditionalKeyNav());
}
me.keyNav = new Ext.util.KeyNav(keyNavConfig);
},
getAdditionalKeyNav: function() {
var keyNav = {};
this.view.getStore().each(function(record) {
var firstLetter = record.get(this.view.searchRecordField)[0].toUpperCase();
if(!keyNav[firstLetter]) {
keyNav[firstLetter] = this.onAlphabetKeyPress
}
}, this);
return keyNav;
},
onAlphabetKeyPress: function(keyEvent) {
const key = keyEvent.event.key;
var foundRecordIndex = this.view.getStore().findBy(function(record) {
return record.get('title').toLowerCase().indexOf(key) === 0;
}, this);
if(foundRecordIndex > -1) {
this.setPosition(foundRecordIndex, keyEvent);
}
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('ListItem', {
extend: 'Ext.data.Model',
fields: [{
name: 'src',
type: 'string'
}, {
name: 'caption',
type: 'string'
}]
});
Ext.create('Ext.data.Store', {
id: 'ListItemsStore',
model: 'ListItem',
data: [{
title: "One"
}, {
title: "Two"
}, {
title: "Three"
}, {
title: "Four"
}, {
title: "Three"
}, ]
});
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<span>{title}</span>',
'</div>',
'</tpl>'
);
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('ListItemsStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
// Search Record Field
searchRecordField: 'title',
renderTo: Ext.getBody()
});
}
});
Requirement: To have infinite scrolling for a extjs(4.2.2) grid along with row expanding functionality.
But both the plugins together not working,
row expander plugin not allowing data to load into buffered store of a grid.
when rowexpander plugin is commented, then infinite scroll grid is loading.
how to have both the functionalities?
i have created a rowexpander plugin as below by extending extjs rowexpander,
here if i comment out below line thne atleast one rec is getting loaded
feature.getRowBodyContents = Ext.bind(me.getRowBodyContents, me);
Ext.define('Premier.view.tools.NM.Plugin.NotesGridRowExpander', {
extend: 'Ext.grid.plugin.RowExpander',
alias: 'plugin.notes-rowexpander',
rowBodyTpl: [
'<div class="notes-management-tool"> ',
'<table cellspacing="0" cellpadding="0" class="notes-management-tool-table">',
'<tr>',
'<th valign="middle" class="notes-management-tool-table-date" style="color:black;width:130px;">Last Edited Date</th>',
'<th valign="middle" class="notes-management-tool-table-note" style="color:black;width:360px;">Notes</th>',
'<th valign="middle" class="notes-management-tool-table-editedBy" style="color:black;width:210px;">Last Edited By</th>',
'<th valign="middle" class="notes-management-tool-table-actions" style="color:black;width:50px;">Actions</th>',
'</tr>',
'<tpl for=".">',
'<tr>',
'<td valign="middle" class="notes-management-tool-table-date" style="color:black">{[(Ext.util.Format.date(Ext.Date.parse(values.LastEditedDate, "MS"), "M-d-Y h:i A"))|| " "]}</td>',
'<td valign="middle"class="notes-management-tool-table-note" style="color:black">{[(values.Note)|| " "]}</td>',
'<td valign="middle" class="notes-management-tool-table-editedBy" style="color:black">{[(values.LastEditedBy)|| " "]}</td>',
'<td valign="right" class="notes-management-tool-table-actions" ><div style="margin-left:3px" data-qtip="Edit" class = "{[parent.AccountId == values.LastEditedById ? "edit-notes-record-icon-active " : "edit-notes-record-icon-inactive "]}-noteId-{[this.getStringId(values.NoteId)]}-entityId-{[this.getStringId(values.EntityId)]}-entityTypeId-{[this.getStringId(values.EntityTypeId)]}"></div><div style="margin-left:3px" data-qtip="Delete" class = "{[parent.AccountId == values.LastEditedById ? "trash-icon " : "disabled-trash-icon " ]}-noteId-{[this.getStringId(values.NoteId)]}-entityId-{[this.getStringId(values.EntityId)]}-entityTypeId-{[this.getStringId(values.EntityTypeId)]}"></div></td>',
'</tr>',
'</tpl>',
'</table>',
'</div> ',
{
getStringId: function (id) {
return id.toString();
}
}
],
expandAllFlag: false,
constructor: function () {
var me = this;
me.callParent(arguments);
},
setCmp: function (grid) {
var me = this, features, i, feature;
me.callParent(arguments);
features = grid.features;
for (i = 0; i < features.length; i++) {
if ((feature = features[i]).ftype == 'rowbody') {
break;
}
}
if (feature) {
//This function is abstracted as a private function kind of. So overriding the method to call
//our own function
feature.getRowBodyContents = Ext.bind(me.getRowBodyContents, me);
}
},
getRowBodyContents: function (record) {
var content = '', data;
if(record.data) {
data = record.data.NotesChildViews.sort(
function (rec1, rec2) {
var a= Ext.Date.parse(rec1.LastEditedDate, "MS");
var b =Ext.Date.parse(rec2.LastEditedDate, "MS");
return a>b ? -1 : a<b ? 1 : 0;
});
}
if (data) {
data.AccountId = this.grid.app.getAccountId();
content = this.rowBodyTpl.apply(data);
}
return content;
},
getHeaderConfig: function () {
var me = this;
return {
itemId: 'rowExpanderHeader',
width: 40,
lockable: false,
sortable: false,
resizable: false,
draggable: false,
hideable: false,
text: '<div class="notes-grid-expand"></div>',
menuDisabled: true,
tdCls: Ext.baseCSSPrefix + 'grid-cell-special',
innerCls: Ext.baseCSSPrefix + 'grid-cell-inner-row-expander',
renderer: function (value, metadata) {
// Only has to span 2 rows if it is not in a lockable grid.
if (!me.grid.ownerLockable) {
metadata.tdAttr += ' rowspan="2"';
}
return '<div style="margin: 4px 0px 0px 8px;" class="' + Ext.baseCSSPrefix + 'grid-row-expander" role="presentation"></div>';
},
processEvent: function (type, view, cell, rowIndex, cellIndex, e, record) {
if (type == "mousedown" && e.getTarget('.' + Ext.baseCSSPrefix + 'grid-row-expander')) {
me.toggleRow(rowIndex, record);
return me.selectRowOnExpand;
}
},
listeners: {
'afterrender': me.handleExpansion,
scope: me
}
};
},
handleExpansion: function (headerObj) {
var me = this;
headerObj.el.on('click', function () {
me.cmp.fireEvent('notes-grid-expansion');
});
},
updateHeaderText: function () {
var me = this;
if (me.expandAllFlag == false) {
me.cmp.headerCt.down('#rowExpanderHeader').setText('<div class="notes-grid-collapse"></div>');
me.expandAllFlag = true;
}
else {
me.cmp.headerCt.down('#rowExpanderHeader').setText('<div class="notes-grid-expand"></div>');
me.expandAllFlag = false;
}
},
setDefaultHeader: function () {
var me = this;
me.cmp.headerCt.down('#rowExpanderHeader').setText('<div class="notes-grid-expand"></div>');
me.expandAllFlag = false;
}
});
when getrowbodycontent is removed from setCmp then ,
when calling getrowbodycontent in setCmp,
This solution uses bufferedrenderer and rowexpander plugins. I don't know how you get data, so the example generates some fake data and loads data dynamically.
I hope this helps.
Ext.define('testmodel', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'index', type: 'number'}
]
});
Ext.define('Test.RowExpander', {
extend: 'Ext.grid.plugin.RowExpander',
rowBodyTpl: [
"<tpl>",
"<p>Item name: {name}</p>",
"<p>Item index: {index}</p>",
"</tpl>"
],
expandAllFlag: false,
constructor: function() {
this.callParent(arguments);
},
setCmp: function (grid) {
var me = this, features, i, feature;
me.callParent(arguments);
features = grid.features;
for (i = 0; i < features.length; i++) {
if ((feature = features[i]).ftype == 'rowbody') {
break;
}
}
if (feature) {
feature.getRowBodyContents = Ext.bind(me.getRowBodyContents, me);
}
},
getRowBodyContents: function (record) {
var content = '', data;
if (record.data) {
data = record.data;
}
if (data) {
content = this.rowBodyTpl.apply(data);
}
return content;
}
});
Ext.onReady(function() {
Ext.define('Test.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
setStoreData: function() {
var me = this;
me.storeData = [];
for (i = 1; i <= 15000; i++) {
me.storeData.push(
{"name": "Name"+i, "index": i}
);
}
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.setStoreData();
me.store = Ext.create('Ext.data.Store', {
autoLoad: false,
pageSize: 16,
data: [],
model: 'testmodel'
});
me.rowexpander = Ext.create('Test.RowExpander', {
});
me.bufferedrenderer = Ext.create('Ext.grid.plugin.BufferedRenderer', {
});
me.grid = Ext.create('Ext.grid.Panel', {
loadMask: true,
plugins: [
me.bufferedrenderer,
me.rowexpander
],
selModel: {
pruneRemoved: false
},
stripeRows: true,
store: me.store,
columnLines: false,
columns : [
{header : 'Name', sortable : true, width: 100, dataIndex : 'name'},
{header : 'Index', sortable : true, width : 100, dataIndex : 'index'}
]
});
me.add(me.grid);
me.store.loadData(me.storeData);
}
});
var win = new Test.TestWindow({
});
win.show();
});
Notes:
Tested with ExtJS 4.2.1 and Internet Explorer 11, Google Chrome 68, Mozilla Firefox 61, Microsoft Edge 42.
Fiddle can be found here.
I'm try to use tooltip in a element inside a iframe(generated by htmleditor component).
This is i'm trying:
Ext.tip.QuickTipManager.init();
Ext.create('Ext.form.HtmlEditor', {
width: 750,
height: 250,
renderTo: Ext.getBody(),
listeners: {
afterrender: function () {
this.getToolbar().add([{
xtype: "combobox",
flex: 1,
displayField: "name",
valueField: "value",
store: {
data: [{
name: "#NAME# (User's name)",
value: "#NAME#"
}]
}
}, {
xtype: "button",
text: "Add",
handler: function () {
var value = this.prev().getValue();
var htmlEditor = this.up("htmleditor");
if (value) {
var id = Ext.id();
value = "<span id=\"" + id + "\" style=\"cursor:pointer;\">" + value + "</span>";
htmlEditor.insertAtCursor(value);
var doc = htmlEditor.getDoc();
var elSpan = doc.getElementById(id);
var tTip = Ext.create("Ext.tip.ToolTip", {
html: "User's name tooltip.",
shadow: false,
scope: doc
});
elSpan.addEventListener("mouseover", function () {
tTip.showAt(elSpan.offsetLeft, elSpan.offsetTop)
});
elSpan.addEventListener("mouseleave", function () {
tTip.hide();
});
}
}
}])
}
}
});
But, when the component is shown, it appear in wrong position. See on the fiddle.
Sencha Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1vj4
I found a solution!
elSpan.addEventListener("mouseover", function (e) {
var x = e.pageX;
var y = e.pageY;
var region = htmlEditor.getRegion();
x += region.x;
y += region.y;
tTip.showAt([x, y]);
});
everyone, can you help me? How to take snapshot with a webcam in EXTJS
is that possible?
thanks
I have done an example which works in firefox browser and you can have at look at these demo
Ext.onReady(function(){
var localMediaStream;
Ext.create('Ext.window.Window', {
title: 'Take SnapShot',
height: 400,
width: 800,
layout: 'hbox',
items:[
{
width:400,
title:"Preview",
height:400,
id:'preview',
html:'<video id="video" width="350" height="250" autoplay></video>',
tbar:[{
text:"Start Video",
handler:function(){
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
navigator.getUserMedia (
{
video: true
},
function(stream) {
if (video.mozSrcObject !== undefined) {
localMediaStream = stream;
video.mozSrcObject = stream;
}
},function(err) {
console.log("The following error occured: " + err);
}
);
}
},
{
text:"Snapshot",
handler:function(){
var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.drawImage(video, 20, 20, 400, 220);
}
}
]
},
{
width:400,
title:"Snapshot",
height:400,
html:'<canvas id="canvas" width="320" height="240"></canvas>'
}
]
}).show();
});
Here is the Label object
,
label: {
rotate: {
degrees: 90
},
renderer: function(v){
var toolTip = Ext.create('Ext.tip.ToolTip', {
target: this,
html: v,
anchor: 'left',
dismissDelay: 0,
showDelay: 0,
autoHide: false
});
toolTip.on('show', function(){
var timeout;
toolTip.getEl().on('mouseout', function(){
timeout = window.setTimeout(function(){
toolTip.hide();
}, 500);
});
toolTip.getEl().on('mouseover', function(){
window.clearTimeout(timeout);
});
Ext.get(targetId).on('mouseout', function(){
timeout = window.setTimeout(function(){
toolTip.hide();
}, 500);
});
});
if(v.length>10)
return Ext.util.Format.substr(v,0,10) +'...' ;
}
}
This code is not not creating the tool tip. No error occurs. Is there any other method to create the category label tool tip.
Thanks,
Anish