I'm using setLoading(true) on a Panel, but cant find a way to change the "Loading..." text below the spinner.
I need at least to translate it to Norwegian.
app.views.ForfallDetaljerView = Ext.extend(Ext.Panel,{
id: 'forfalldetaljer',
scroll: 'vertical',
dockedItems: [ new app.views.BackToolbar({
title: 'Detaljer',
buttonHandler: function(){
Ext.dispatch({
controller: app.controllers.forfallDetaljer,
action: 'back',
});
// Clear view
app.views.forfallDetaljer.update('');
}
})],
});
app.myview = new ForfallDetaljerView();
app.myview.setLoading(true);
Anyone got any idea?
app.myview = new ForfallDetaljerView();
var mask = new Ext.LoadMask(app.myview.el, {msg: "<text here>"});
mask.show();
You can then do a mask.hide() when you want to remove it.
You could also do something like:
var l = app.myview.setLoading(true);
l.el.down('div.x-loading-msg').setHTML("<text here>");
So hopefully these two options point you in the right direction.
There's another way to show the loading message:
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
Both Panel.setLoading(true) and Ext.LoadMask(...) return a LoadMask object. So it should work similarly.
http://dev.sencha.com/deploy/touch/docs/?class=Ext.LoadMask
Related
At this code javascrip give an error
$.each(JSON, function(i, array) {
chart.series[i].name = array.teamName;
chart.series[i].setData(array.teamPower, true);
});
I must define the chart.series[i] because it say "Cannot set property 'name' of undefined"
but i can't find a way in order to do this.
Because it fonction runs with requestData so it came after chart determine with options
function showGraph() {
chart = new Highcharts.Chart(option);
}
chart: {
renderTo: 'graphicShow',
type: 'spline',
events: {
load: requestData
}
}
...in option...
title: {
text: 'Power %'
},
series: []
...
You need to looka at the "Methods and Properties" part of the API. See http://api.highcharts.com/highcharts#Chart (There is an jsFiddle on the documentation page as well).
var chart = new Highcharts.Chart(options);
chart.addSeries({
name: array.teamName,
data: array.teamPowher
});
If you are going to add several series you should set the redraw flag to false and then call redraw manually after as that will be much faster.
var chart = new Highcharts.Chart(options);
chart.addSeries({
name: array.teamName,
data: array.teamPower
}, false);
chart.addSeries({
name: array.teamName,
data: array.teamPower
}, false);
chart.redraw();
You too can specify as second option of addSeries a boolean value, that indicates if it redraws or not
I am creating a report making tool. I will be dragging/resizing panels inside a panel container. When i click save button, i am passing the size and position of panels and based on that an xhtml report will be generated. I have a dataview on the left side. Each time a report is generated i need to show that report on dataview. Without using any database how this can be done? Any help would be appreciated.
Do one thing, create a store with fields "size", "report_data" and "position".
var store = new Ext.data.JsonStore({
id : 'panel_store',
fields : ['size', 'position', 'report_data']
});
Create a template for each report (some other data can be added here):
var template = new Ext.XTemplate(
'<div class="reports_container"><tpl for=".">',
'<div class="report">{report_data}</div>','</tpl></div>'
);
template.compile();
Create a dataview with template and store:
var dataView = new Ext.DataView({
itemSelector : 'div.report', // Required
style : 'overflow:auto',
multiSelect : true,
store : store,
tpl : template
});
Add the dataview in you main panel:
var mainPanel = new Ext.Panel({
id : 'main_panel',
items : dataView
});
Whenever you generate a new report, create a new Ext.Record:
var ReportRecord = Ext.data.Record.create([
{ name: 'size' },
{ name: 'position' },
{ name: 'record_type' }
]);
var newRec = new ReportRecord({
size : '100',
position : 'some position',
report_data : 'some data'
});
store.add(newRec);
store.on('add', function() {
dataView.refresh();
}, this);
Is this what you wanted? However, this code isn't tested anywhere.
I have a regionContent panel which I add to my viewport.
How can I replace its content with new content?
...
var regionContent = new Ext.Panel({
id: 'contentArea',
region: 'center',
padding:'10',
autoScroll: true,
html: 'this is the original content'
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [ regionMenu, regionContent ]
});
var newPanel = new Ext.Panel({
region: 'east',
title: 'Info Panel',
width: 300,
html: 'this is a panel that is added'
});
// regionContent.update(newPanel); //renders as javascript code ???
// regionContent.remove(...) //how do I remove ALL CONTENT, I will not know what is in this panel to remove it specifically
regionContent.add(newPanel); //adds to original content but does not replace it
regionContent.doLayout();
...
.update() does this:
.add() does this:
You'll want to use a panel with card layout:
var card=new Ext.Panel({
layout:'card',
activeItem:0,
items:[ regionContent , newPanel ]
});
That panel can then go inside your viewport. To switch between them you'll use something like this:
card.getLayout().setActiveItem(1);
Take a look at the two card layouts for working examples:
http://dev.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html
You cannot remove the HTML using .remove(), because it's not considered an item of a panel. So you need to use .update() to get rid of that HTML, and then add your new panel.
// clear the html by replacing it with an empty string.
// calling update with no arguments would work as well.
regionContent.update('');
// add the new component
regionContent.add(newPanel);
// redraw the containing panel
regionContent.doLayout();
From your screenshot, it looks like you may have used .update() by passing in the new panel, e.g., .update(newPanel). That method is used to update HTML, not replace components. To go the opposite way:
regionContent.removeAll(); // if you want to remove all the items
regionContent.update('this is the original content');
regionContent.doLayout();
Did you really use the solution you posted to solve this exact problem? For me clearExtjsComponent() leaves the HTML string "This is the original content" behind, just like in your screenshot.
Ext.getCmp('content-panel').body.update(record.get('id'));
This will really work
Here's how I solved this:
function clearExtjsComponent(cmp) {
var f;
while(f = cmp.items.first()){
cmp.remove(f, true);
}
}
then when I want to replace the content of a panel with new content, I use this:
function replaceComponentContent(cmpParent, cmpContent) {
clearExtjsComponent(cmpParent);
cmpParent.add(cmpContent);
cmpParent.doLayout();
}
Am trying to set 'seriesstyles' to piechart dynamically from the JSON data. When the 'oneWeekStore' loads the JSON data, I wish to iterate through the 'color' of each record and setSeriesStyles dynamically to PieChart. Below is the snippet.
var oneWeekStore = new Ext.data.JsonStore({
id:'jsonStore',
fields: ['appCount','appName'],
autoLoad: true,
root: 'rows',
proxy:storeProxy,
baseParams:{
'interval':'oneWeek',
'fromDate':frmDt.getValue()
},
listeners: {load: {
fn:function(store,records,options) {
/*I wish iterate through each record,fetch 'color'
and setSeriesStyles. I tried passing sample arrays
as paramater to setSeriesStyles like
**colors= new Array('0x08E3FE','0x448991','0x054D56');
Ext.getCmp('test12').setSeriesStyles(colors)**
But FF throws error "this.swf is undefined". Could
you please let me know the right format to pass as
parameter. */
}
});
var panel = new Ext.Panel{
id: '1week', title:'1 week',
items : [
{ id:'test12',
xtype : 'piechart',
store : oneWeekStore,
dataField : 'appCount',
categoryField : 'appName',
extraStyle : {
legend:{
display : 'right',
padding : 5,
spacing: 2, font :color:0x000000,family:
'Arial', size:9},
border:{size :1,color :0x999999},
background:{color: 0xd6e1cc}
} } } ] }
My JSON data looks below:
{"success":true,"rows":[{"appCount":"9693814","appName":"GED","color":"0xFB5D0D"},{"appCount":"5731","appName":"SGEF"","color":"0xFFFF6B"}]}
Your guidance is highly appreciated
You have a classic race condition there - your setting an event in motion that relies on a Component who's status is unknown.
The event your setting off is the loading of the data Store, when that has finished loading it is trying to interact with the Panel, but at that point we don't know if the Panel has been rendered yet.
Your best bet is to make one of those things happen in reaction to the other, for example:
1 ) load the store
2 ) on load event fired, create the panel
var oneWeekStore = new Ext.data.JsonStore({
id:'jsonStore',
...,
listeners: {
load:function(store,records,options) {
var panel = new Ext.Panel({
...,
seriesStyles: colors,
...
});
}
}
});
or
1 ) create the panel (chart)
2 ) on render event of the panel, load the store (remove autoLoad:true)
var panel = new Ext.Panel({
id: '1week',
...,
listeners: {
render: function(pnl){
oneWeekStore.load();
}
}
});
Hope that helps.
I'm adding a custom context menu to a TreePanel.
This was all working when I had a separate function for the context menu, but I was having problems where the context menu items would end up doubled/tripling up if I clicked on one of the options and then viewed the context menu again.
I had a look around for other contextmenu examples and came up with this one by Aaron Conran I pretty much "stole" it wholesale with a few additions, tacking the function directly into the Ext.ext.treePanel config. This gave me an error about "oe is undefined" which seemed to refer to "contextmenu: this.onContextMenu" in the tree config.
I figured it was probably something to do with the way I was defining all of this, so I decided to look at extending Ext.ext.TreePanel with my function in it as a learning exercise as much as anything.
Unfortunately, having managed to sort out extending TreePanel I'm now back to getting "oe is undefined" when the page tries to build the TreePanel. I've had a look around and I'm not really sure whats causing the problem, so any help or suggestions would be greatly appreciated.
Here is the code that is used to define/build the tree panel. I hope its not too horrible.
siteTree = Ext.extend(Ext.tree.TreePanel,{
constructor : function(config){
siteTree.superclass.constructor.call(this, config);
},
onContextMenu: function(n,e){
if (!this.contextMenu){
console.log('treeContextMenu',n,e);
if (n.parentNode.id == 'treeroot'){
var menuitems = [{text:'Add Child',id:'child'}];
} else {
var menuitems =
[{text:'Add Child',id:'child'},
{text:'Add Above',id:'above'},
{text:'Add Below',id:'below'}];
}
this.contextMenu = new Ext.menu.Menu({
id:'treeContextMenu',
defaults :{
handler : treeContextClick,
fqResourceURL : n.id
},
items : menuitems
});
}
var xy = e.getXY();
this.contextMenu.showAt(xy);
}
});
var treePanel = new siteTree({
id: 'tree-panel',
title : 'Site Tree',
region : 'center',
height : 300,
minSize: 150,
autoScroll: true,
// tree-specific configs:
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,
dataUrl:'admin.page.getSiteTreeChildren?'+queryString,
root: {
id: 'treeroot',
nodeType: 'async',
text: 'nowt here',
draggable: false
},
listeners:{
contextmenu: this.onContextMenu
}
});
As a total aside; Is there a better way to do this in my context menu function?
if (n.parentNode.id == 'treeroot') {
Basically, if the clicked node is the top level I only want to give the user an add Child option, not add above/below.
Thanks in advance for your help
In your instantiation of your siteTree class you have:
listeners: {
contextmenu: this.onContextMenu
}
However, at the time of the instantiation this.onContextMenu is not pointing to the onContextMenu method you defined in siteTree.
One way of fixing it is to call the method from within a wrapper function:
listeners: {
contextmenu: function() {
this.onContextMenu();
}
}
Assuming you don't override the scope in the listeners config 'this' will be pointing to the siteTree instance at the time the listener is executed.
However, since you are already defining the context menu in the siteTree class, you may as well define the listener there:
constructor: function( config ) {
siteTree.superclass.constructor.call(this, config);
this.on('contextmenu', this.onContextMenu);
}
Ensuring the context menu is removed with the tree is also a good idea. This makes your siteTree definition:
var siteTree = Ext.extend(Ext.tree.TreePanel, {
constructor: function( config ) {
siteTree.superclass.constructor.call(this, config);
this.on('contextmenu', this.onContextMenu);
this.on('beforedestroy', this.onBeforeDestroy);
},
onContextMenu: function( node, event ) {
/* create and show this.contextMenu as needed */
},
onBeforeDestroy: function() {
if ( this.contextMenu ) {
this.contextMenu.destroy();
delete this.contextMenu;
}
}
});
I had this problem yesterday. The issue with the duplicate and triplicate items in the context menu is due to extjs adding multiple elements to the page with the same ID. Each time you call this.contextMenu.showAt(xy) you are adding a div with the ID 'treeContextMenu' to the page. Most browsers, IE especially, deal with this poorly. The solution is to remove the old context menu before adding the new one.
Here is an abridged version of my code:
var old = Ext.get("nodeContextMenu");
if(!Ext.isEmpty(old)) {
old.remove();
}
var menu = new Ext.menu.Menu({
id:'nodeContextMenu',
shadow:'drop',
items: [ ... ]
});
menu.showAt(e.xy);
I suggest never using hardcoded IDs. #aplumb suggests cleaning the DOM to reuse an existing ID. OK, but I suggest you cleanup the DOM when you no longer need the widgets/elements in the DOM and you should never reuse an ID.
var someId = Ext.id( null, 'myWidgetId' );
var someElement = new SuperWidget({
id: someId,
...
});
Just to add to owlness's answer
This bit here:
listeners: {
contextmenu: this.onContextMenu
}
Gets executed when the javascript file is loaded. this at that stage is most likely pointing to the window object.
A simple way to fix it is adding the listener on hide event of context menu, so you destroy him.
new Ext.menu.Menu(
{
items:[...],
listeners: { hide: function(mn){ mn.destroy(); } }
}
).show(node.ui.getAnchor());
;)