Here is my first try to pass user defined arguments to a handler function in extjs(4.0.1) in IE9. I have the below code, but it throws up an error stating that SCRIPT438: Object doesn't support property or method 'createDelegate'. I'm not sure what I'm doing wrong. Please help.
Js file:
Ext.onReady(function() {
var appendBooleanOrInsertionIndex = 0;
var myButtonHandler = function(item,a, b, arg){
alert(a + " "+ b);
};
var myButton = new Ext.Button({
id : 'myButton',
//renderTo : 'mybutton',
text : 'Save',
handler : myButtonHandler.createDelegate(this, ['Hi', 'Kart'], appendBooleanOrInsertionIndex),
scope : this
});
});
Ext stopped adding logic to native class prototypes in Ext 4. Use Ext.Function.bind or Ext.Function.pass.
the corrected code is as below:
Ext.onReady(function() {
var myButtonHandler = function(a, b){//alert("-->");
alert(a + " "+ b);
};
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 800,
height: 300,
layout: 'column',
title: 'Container Panel',
//html: 'parent panel',
items: [
{
xtype: 'button',
id: 'mbutton',
text : 'My Button',
handler : Ext.Function.pass(myButtonHandler, ['Hi', 'Kart!!!!'])
}
]
});
});
Related
I'm using ExtJS to show an barcode image. I wanna print that image using the print dialog after do click in a button.
I have a function like this:
function barcode_impr(pkIdGuess){
var win = new Ext.Window({
title: 'Barcode',
layout: 'fit',
autoScroll: true,
y: 120,
width: 300,
height: 300,
modal: true,
closeAction: 'hide',
items:
[{
xtype: 'panel',
//height:'100px',
docked: 'bottom',
html: 'Here goes an image...',
scrollable: true,
renderTo: document.body,
id: 'panel_print',
tools: [{
type: 'print',
handler: function() {
window = Ext.getCmp('panel_print');
window.print();
}
}]
}]
});
win.show();
}
but that show all not only the panel content. What am I doing wrong?
I have made a function doPrint with 2 parameters pnlId (the id of the panel in which your bar code image is placed) and win (the window reference)
We can use this function like below:-
doPrint('panel_print', win);
This function creates an iframe and print the content which we want and then it destroy the iframe.
Working example
Code snippet:-
function doPrint(pnlId, win) {
var pnl = Ext.getCmp(pnlId);
var iFrameId = "printerFrame";
var printFrame = Ext.get(iFrameId);
if (printFrame == null) {
printFrame = Ext.create('Ext.Component', {
id: iFrameId,
autoEl: {
tag: "iframe"
}
});
printFrame.addCls('x-hidden');
win.add(printFrame);
}
var cw = printFrame.el.dom.contentWindow;
// get the contents of the panel and remove hardcoded overflow properties
var markup = pnl.body.dom.innerHTML;
while (markup.indexOf('overflow: auto;') >= 0) {
markup = markup.replace('overflow: auto;', '');
}
var str = Ext.String.format('<html><head>{0}</head><body><img src="resources/images/gabar-logo.gif">{1}</body></html>', '', markup);
// output to the iframe
cw.document.open();
cw.document.write(str);
cw.document.close();
// remove style attrib that has hardcoded height property
// cw.document.getElementsByTagName('DIV')[0].removeAttribute('style');
// print the iframe
cw.print();
// destroy the iframe
Ext.fly(iFrameId).destroy();
};
Hope this will help.
Morning,
I'm new to Sencha. I have the following code in my login.js, which retrieves form fields from a JSON doc on remove server. It creates an array from the data, which I need tro be able to use to populate the form:
var url = 'http://domainxxx.net/';
loginFields = new Array();
Ext.onReady(function(){var theform = Ext.Ajax.request({
url: url+'login',
type: 'get',
scope: this,
dataType: "JSON",
success: function(response){
formFields = new Array();
var numFields = Ext.JSON.decode(response.responseText).length;
for (var inf=0;inf<numFields;inf++){
afield = new Array();
afield['xtype'] = 'textfield';
afield['name'] = Ext.JSON.decode(response.responseText)[inf].Name;
afield['itemId'] = Ext.JSON.decode(response.responseText)[inf].Name;
afield['required'] = true;
afield['description'] = Ext.JSON.decode(response.responseText)[inf].Description;
afield['placeHolder'] = Ext.JSON.decode(response.responseText)[inf].Description;
afield['maxlength'] = Ext.JSON.decode(response.responseText)[inf].Length;
if(Ext.JSON.decode(response.responseText)[inf].Type == 1){afield['xtype']= 'passwordfield';}
if(Ext.JSON.decode(response.responseText)[inf].Type == 0){afield['xtype']= 'emailfield';}
loginFields.push(afield);
}
console.log(loginFields);
}
})
});
The problem is then using this variable to populate the form. I tried placing it in the form config, as shown below, but no luck. I also tried using localStorage, but that didn't work either.
Ext.define('axis3.view.Login', {
extend: 'Ext.form.Panel',
alias: "widget.loginview",
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img'], config: {
title: 'Login',
itemId: 'loginform',
items: [
{
xtype: 'image',
src: Ext.Viewport.getOrientation() == 'portrait' ? 'images/logo.png' : 'images/logo.png',
style: Ext.Viewport.getOrientation() == 'portrait' ? 'width:271px;height:93px;margin:2em auto' : 'width:271px;height:93px;margin:2em auto'
},
{
xtype: 'label',
html: 'Login failed. Please enter the correct credentials.',
itemId: 'signInFailedLabel',
hidden: true,
hideAnimation: 'fadeOut',
showAnimation: 'fadeIn',
style: 'color:#990000;margin:5px 0px;'
},
{
xtype: 'fieldset',
title: 'Login',
items: [
FORM VARIABLES IN HERE
]
},
{
xtype: 'button',
itemId: 'logInButton',
ui: 'action',
padding: '10px',
text: 'Log In'
}
],
listeners: [{............
Any advice is most welcome
You are using an Array instead of an Object. Rather than saying var aField = new Array(), say var aField = new Object().
Note that, for short hand, you can also do this instead of using a constructor:
var myArray = [];
car myObject = {};
I have a menu system set up in a panel which needs to be dynamically created. I have created a mock static menu which the client likes but the menu categories and items will need to be loaded via JSON from a store.
Here is what I have for the first few menu items set statically:
Ext.define('SimpleSearch.view.FacetSDL' ,{
extend: 'Ext.panel.Panel',
alias : 'widget.facetsdl', //alias is referenced in MasterList.js
requires: ['SimpleSearch.store.SDLResults', 'FacetData' ],
title: 'Facet Search',
html: null,
frame: true,
layouts: 'fit',
items: [
{
id: 'group-menu',
title: 'Browse',
xtype: 'menu',
plain: true,
floating: false,
layouts: 'fit',
items: [
{
text: 'Security',
listeners:
{
click: function() {
var groupmenu = Ext.ComponentQuery.query('#group-menu')[0];
groupmenu.hide()
var securitymenu = Ext.ComponentQuery.query('#security-menu')[0];
securitymenu.setPosition(0,-groupmenu.getHeight(),false);
securitymenu.show()
}
},
menu: { // <-- submenu by nested config object
items: [
{
text: 'Classification',
listeners:
{
click: function() {
var groupmenu = Ext.ComponentQuery.query('#group-menu')[0];
groupmenu.hide()
var securitymenu = Ext.ComponentQuery.query('#security-menu')[0];
var classificationmenu = Ext.ComponentQuery.query('#classification-menu')[0];
classificationmenu.setPosition(0,-groupmenu.getHeight() - securitymenu.getHeight(),false);
classificationmenu.show()
}
I was thinking that maybe creating a class that loads all of the necessary data and then iterating through that class for the "items" field may be the way to go, but I am not sure if that will work.
You should look at using a Tree and TreeStore. Then make use of the ui:'menu' or viewConfig { ui: 'menu' } config properties to differentiate it from a regular tree. Then style it however your client wants.
This way you have all the mechanisms in place for free to handle the data dynamically and all your submenus, you'll just have to get a little creative on the CSS side of things.
I got it working like this:
var scrollMenu = Ext.create('Ext.menu.Menu');
for (var i = 0; i < store.getCount(); ++i){
var rec = store.getAt(i);
var item = new Ext.menu.Item({
text: rec.data.DISPLAY_FIELD,
value:rec.data.VALUE_FIELD,
icon: 'js/images/add.png',
handler: function(item){
myFunction(item.value); //Handle the item click
}
});
scrollMenu.add(item);
}
Then just add scrollMenu to your form or container. Hope this helps!
This menu is created dynamically with ExtJs, the data is loaded from Json.
See my demo with the code.
Demo Online:
https://fiddle.sencha.com/#view/editor&fiddle/2vcq
Json loaded:
https://api.myjson.com/bins/1d9tdd
Code ExtJs:
//Description: ExtJs - Create a dynamical menu from JSON
//Autor: Ronny Morán <ronney41#gmail.com>
Ext.application({
name : 'Fiddle',
launch : function() {
var formPanelFMBtn = Ext.create('Ext.form.Panel', {
bodyPadding: 2,
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 85,
msgTarget: 'side'
},
items: [
{
xtype: 'container',
layout: 'hbox',
items: [
]
}
]
});
var win = Ext.create('Ext.window.Window', {
title: 'EXTJS DYNAMICAL MENU FROM JSON',
modal: true,
width: 680,
closable: true,
layout: 'fit',
items: [formPanelFMBtn]
}).show();
//Consuming JSON from URL using method GET
Ext.Ajax.request({
url: 'https://api.myjson.com/bins/1d9tdd',
method: 'get',
timeout: 400000,
headers: { 'Content-Type': 'application/json' },
//params : Ext.JSON.encode(dataJsonRequest),
success: function(conn, response, options, eOpts) {
var result = Ext.JSON.decode(conn.responseText);
//passing JSON data in 'result'
viewMenuDinamical(formPanelFMBtn,result);
},
failure: function(conn, response, options, eOpts) {
//Ext.Msg.alert(titleAlerta,msgErrorGetFin);
}
});
}
});
//Generate dynamical menu with data from JSON
//Params: formPanelFMBtn - > Panel
// result - > Json data
function viewMenuDinamical(formPanelFMBtn,result){
var resultFinTarea = result;
var arrayCategoriaTareas = resultFinTarea.categoriaTareas;
var containerFinTarea = Ext.create('Ext.form.FieldSet', {
xtype: 'fieldset',
title: 'Menu:',
margins:'0 0 5 0',
flex:1,
layout: 'anchor',
//autoHeight: true,
autoScroll: true,
height: 200,
align: 'stretch',
items: [
]
});
var arrayMenu1 = [];
//LEVEL 1
for(var i = 0; i < arrayCategoriaTareas.length; i++)
{
var categoriaPadre = arrayCategoriaTareas[i];
var nombrePadre = categoriaPadre.nombreCategoria;
var hijosPadre = categoriaPadre.hijosCategoria;
var arrayMenu2 = [];
//LEVEL 2
for(var j = 0; j<hijosPadre.length; j++)
{
var categoriaHijo = hijosPadre[j];
var nombreHijo = categoriaHijo.nombreHijo;
var listaTareas = categoriaHijo.listaTareas;
var arrayMenu3 = [];
//LEVEL 3
for(var k = 0; k < listaTareas.length; k++)
{
var tarea = listaTareas[k];
var nombreTarea = tarea.nombreTarea;
var objFinLTres =
{
text: nombreTarea,
handler: function () {
alert("CLICK XD");
}
};
arrayMenu3.push(objFinLTres);
}
var menuLevel3 = Ext.create('Ext.menu.Menu', {
items: arrayMenu3
});
var objFinLDos;
if(arrayMenu3.length > 0)
{
objFinLDos = {
text: nombreHijo,
menu:menuLevel3
};
}
else
{
//without menu parameter If don't have children
objFinLDos = {
text: nombreHijo
};
}
arrayMenu2.push(objFinLDos);
}
var menuLevel2 = Ext.create('Ext.menu.Menu', {
items: arrayMenu2
});
var objFinLUno;
if(arrayMenu2.length > 0)
{
objFinLUno = {
text: nombrePadre,
menu:menuLevel2
};
}
else
{
//without menu parameter If don't have children
objFinLUno = {
text: nombrePadre
};
}
arrayMenu1.push(objFinLUno);
}
var mymenu = new Ext.menu.Menu({
items: arrayMenu1
});
containerFinTarea.add({
xtype: 'splitbutton',
text: 'Example xD',
menu: mymenu
});
formPanelFMBtn.add(containerFinTarea);
}
I have a toolbar button which when clicked should update my map to my current location. I am unable to find a working example of this functionality and hoping someone can advise me. Please see below for sample code - thanks for your help
Map:
Ext.define('MyApp.view.Myap', {
extend: 'Ext.Map',
alias: 'widget.mymap',
config: {
useCurrentLocation: false,
mapOptions:{
zoom: 9,
center: new google.maps.LatLng(42.2, -72.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
},
listeners: {
maprender : function(comp, map){
google.maps.event.addListenerOnce(map, "idle", function () {
var host = window.location.origin ? window.location.origin : window.location.protocol + "/" + window.location.host;
var kmlOptions = {preserveViewport: false}
var now = +new Date();
var layer = new google.maps.KmlLayer(host + '/path/to.kml?timestamp=' + now, kmlOptions);
layer.setMap(map);
return layer;
});
},
}
},
})
Toolbar Button:
Ext.define('MyApp.view.btnLocateMe', {
extend: 'Ext.Button',
alias: 'widget.btnlocateme',
config: {
ui: 'normal',
iconCls: 'locate',
iconMask: true,
text: 'Locate Me',
listeners: [
{
fn: 'onButtonTap',
event: 'tap'
}
]
},
onButtonTap: function(button, e, options) {
//Produces error: cannot call method of undefined
currentLocation: new google.maps.LatLng(this._geo.getLatitude(), this._geo.getLongitude());
MyApp.view.MyMap.map.setCenter(currentLocation);
}
});
my two cents contribution, try this
1) in MyApp.view.Myap substitute
useCurrentLocation: false,
by
useCurrentLocation : {
autoUpdate : false
},
Also you should declare currentLocation as a variable (I presume)
var currentLocation = ...
This should works. I've use a similar logic as yours in onButtonTap but inside a controller with no problems
Best regards
I have one suggestion.
Try changing current location to
new google.maps.LatLng( this.geo.getLatitude(),this.geo.getLongitude() ) ;
I think you can gather more info from this question in here.
The simplest way - switch to the another map view with option useCurrentLocation: true set in the config
I have multiple fieldset. And have Button inside each fieldset in Extjs 4.
I want to get fieldset id on the button click event, so that i can know from which fieldset the button was clicked
How do i get this?
{
xtype:'fieldset',
id:'fs1',
items:[{
xtype:'button',
id:'b1',
handler:function(){
// here i want to get fieldset's id because because fieldset and button were added dynamically.
}
}]
}
Thanks,
Kunal
Actual Code:
Ext.define('My.Group',{
xtype : 'fieldset',
config: {
title:'Group' + i.toString(),
id : '_group' + i.toString()
},
constructor: function(config) {
this.initConfig(config);
return this;
},
collapsible : true,
frame : false,
boder : false,
items : [ {
xtype : 'button',
text : 'Add KeyWord',
id: 'btn',
width : 100,
handler : function(button,event) {
var fieldset = button.findParentByType('fieldset');
var fieldsetsID = fieldset.getId();
console.log(fieldset);
Ext.getCmp(fieldsetId).insert(2, rangeField);
Ext.getCmp(fieldsetsID).doLayout();
}
}, {
xtype : 'button',
text : 'Add Range Type',
width : 100
} ]
});
and i am calling this function on button click
handler : function() {
i=i+1;
var group = new My.Group({
title:'Group' + i.toString(),
id : '_group' + i.toString()
});
console.log(group);
Ext.getCmp('_aspanel').insert(i, group);
Ext.getCmp('_aspanel').doLayout();
I've implemented handler properly.
{
xtype:'fieldset',
id:'fs1',
items:[{
xtype:'button',
id:'b1',
handler:function(btn){
// Retrieve fieldset.
var fieldset = btn.up('fieldset');
// Retrieve Id of fieldset.
var fieldsetId = fieldset.getId();
}
}]
}
In that case try this:
button.up("[xtype='fieldset']")
Ext.onReady(function() {
var panel = Ext.create('Ext.panel.Panel', {
items: {
xtype:'fieldset',
id:'fs1',
items:[{
xtype:'button',
id:'b1',
handler:function(b,e){
var fieldset = b.findParentByType('fieldset');
var fieldsetID = fieldset.getId();
console.log(fieldsetID);
}
}]
},
renderTo: document.body
});
});
Notice, that once you have fieldset variable, you can actually add items to this container directly, without need to use its ID