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.
Related
I'm trying to use the Rally 2.1 SDK to set a custom data field (c_wsjf) in a grid. I have a custom drop down list that I want to check the value of (c_TimeCrticalitySizing).
I created c_TimeCrticalitySizing as a feature card field in my Rally workspace with different string values (such as "No decay"). Every drop down list value will set the custom field to a different integer. When I try to run the app in Rally I get this error:
"Uncaught TypeError: Cannot read property 'isModel' of undefined(…)"
I'm thinking the drop down list value may not be a string.
How would I check what the type of the drop down list value is?
How could I rewrite this code to correctly check the value of the drop down list so I can set my custom field to different integers?
Here's my code block for the complete app. I'm still trying to hook up a search bar so for now I directly call _onDataLoaded() from the launch() function.
// START OF APP CODE
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
featureStore: undefined,
featureGrid: undefined,
items: [ // pre-define the general layout of the app; the skeleton (ie. header, content, footer)
{
xtype: 'container', // this container lets us control the layout of the pulldowns; they'll be added below
itemId: 'widget-container',
layout: {
type: 'hbox', // 'horizontal' layout
align: 'stretch'
}
}
],
// Entry point of the app
launch: function() {
var me = this;
me._onDataLoaded();
},
_loadSearchBar: function() {
console.log('in loadsearchbar');
var me = this;
var searchComboBox = Ext.create('Rally.ui.combobox.SearchComboBox', {
itemId: 'search-combobox',
storeConfig: {
model: 'PortfolioItem/Feature'
},
listeners: {
ready: me._onDataLoaded,
select: me._onDataLoaded,
scope: me
}
});
// using 'me' here would add the combo box to the app, not the widget container
this.down('#widget-container').add(searchComboBox); // add the search field to the widget container <this>
},
// If adding more filters to the grid later, add them here
_getFilters: function(searchValue){
var searchFilter = Ext.create('Rally.data.wsapi.Filter', {
property: 'Search',
operation: '=',
value: searchValue
});
return searchFilter;
},
// Sets values once data from store is retrieved
_onDataLoaded: function() {
console.log('in ondataloaded');
var me = this;
// look up what the user input was from the search box
console.log("combobox: ", this.down('#search-combobox'));
//var typedSearch = this.down('#search-combobox').getRecord().get('_ref');
// search filter to apply
//var myFilters = this._getFilters(typedSearch);
// if the store exists, load new data
if (me.featureStore) {
//me.featureStore.setFilter(myFilters);
me.featureStore.load();
}
// if not, create it
else {
me.featureStore = Ext.create('Rally.data.wsapi.Store', {
model: 'PortfolioItem/Feature',
autoLoad: true,
listeners: {
load: me._createGrid,
scope: me
},
fetch: ['FormattedID', 'Name', 'TimeCriticality',
'RROEValue', 'UserBusinessValue', 'JobSize', 'c_TimeCriticalitySizing']
});
}
},
// create a grid with a custom store
_createGrid: function(store, data){
var me = this;
var records = _.map(data, function(record) {
//Calculations, etc.
console.log(record.get('c_TimeCriticalitySizing'));
var timecritsize = record.get('c_TimeCriticalitySizing');
//console.log(typeof timecritsize);
var mystr = "No decay";
var jobsize = record.get('JobSize');
var rroe = record.get('RROEValue');
var userval = record.get('UserBusinessValue');
var timecrit = record.get('TimeCriticality');
// Check that demoniator is not 0
if ( record.get('JobSize') > 0){
if (timecritsize === mystr){
var priorityScore = (timecrit + userval + rroe) / jobsize;
return Ext.apply({
c_wsjf: Math.round(priorityScore * 10) / 10
}, record.getData());
}
}
else{
return Ext.apply({
c_wsjf: 0
}, record.getData());
}
});
// Add the grid
me.add({
xtype: 'rallygrid',
showPagingToolbar: true,
showRowActionsColumn: true,
enableEditing: true,
store: Ext.create('Rally.data.custom.Store', {
data: records
}),
// Configure each column
columnCfgs: [
{
xtype: 'templatecolumn',
text: 'ID',
dataIndex: 'FormattedID',
width: 100,
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'WSJF Score',
dataIndex: 'c_wsjf',
width: 150
},
{
text: 'Name',
dataIndex: 'Name',
flex: 1,
width: 100
}
]
});
}
});
// END OF APP CODE
The app works great until I add the if (timecritsize === mystr) conditional.
I also use console.log() to check that I've set all values for timecritsize to "No decay"
I can get the count of items after loading a store and I want to know how and where to update the badge text for the button in the tabbar in the current view.
Here I have my view panel and I think that I could set the badge text in the initialize function:
Ext.define('connect.view.InProgressPanel', {
extend: 'Ext.NavigationView',
xtype: 'inprogressPanel',
requires: [
'connect.view.inprogressleads.InProgressList'
],
config: {
itemId: 'inprogressPanel',
title: 'Leads In Process',
iconCls: 'team',
items:[{
title: 'Leads In Process',
xtype: 'inprogressList'
}]
},
initialize: function( eOpts ) {
var store = Ext.getStore('InProgressLeads');
store.on('load', function () {
var listCount = store.getCount();
console.log(listCount);
// set the badge here
});
}
});
And here I define the button for the panel in the main view:
{
id: 'lipPanel',
title: 'Leads In Process',
iconCls: 'team',
items: [{
xtype: 'inprogressPanel'
}]
},
I have read that I could give a button an ID and then I could use the ID to get the reference to the button, yet I've not found any way to specify the ID of a button when I define it this way in the main panel. Or is there another way to get the button and set the badge text?
Update: Here is a way to set the badge:
<code>
store.on('load', function () {
var listCount = store.getCount();
var apptabbar = Ext.getCmp('ext-tabbar-1');
var tab = apptabbar.down('.tab[title=Leads In Process]');
tab.setBadgeText(listCount);
});
</code>
Try this:
Ext.getCmp('lipPanel').setBadgeText(listCount);
Get a reference to the tabbar and then get a reference to the button by its name.
var apptabbar = Ext.getCmp('ext-tabbar-1');
var tab = apptabbar.down('.tab[title=Leads In Process]');
tab.setBadgeText(listCount);
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 am trying to add a search field to my form in sencha touch 1.1, but after going through examples provided by sencha touch, i could not find out a way to provide a dynamic store to the search field.
I have a store which will fetch data dynamically.
The store contains list of places and when the user enters the first letter of the place,he should be given a list of places starting from that alphabet
Here is the code i have used.
var searchField = new Ext.form.Search({
name : 'search',
placeHolder: 'Search',
useClearIcon: true,
data:siteStore,
autoComplete:true,
});
inputDataForm = Ext.extend(Ext.Panel, {
scroll: 'vertical',
autoDestroy: true,
layout: 'fit',
id:'inputForm',
initComponent: function() {
this.items = [{
xtype: 'form',
cls: 'formClass',
id:'inputImageForm',
bodyPadding: '0',
scroll: 'vertical',
items: [searchField],
}];
inputDataForm.superclass.initComponent.call(this);
}, // End fo initComponent
});
Can somebody please help.
Thank you
This is my code. It is working fine and I have docked the searchfield in a panel.
You can use this and I am sure it works.
, dockedItems: [{
xtype:'searchfield'
, name: "searchfield"
, placeHolder: 'Search Patient'
, id: 'searchPat'
, listeners: {
keyup: function(me,e){
var searchData = me.getValue();
Ext.Ajax.request({
url:'your data url'
, params:{
filter: searchData
}
, scope: this
, success: function(res){
var rec = Ext.decode(res.responseText);
var def = typeof (rec.success);
if(def != "undefined" ){
this.store.removeAll();
this.store.loadData(rec.patients);
}
}
, failure:function(res){
console.log(res);
}
})
}
, scope: this
}
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