i'm facing a small problem in parsing the data to the panel, here is my code:
Ext.onReady(function(){
var stockings = [],i=0;
Ext.regModel('Carding', {fields: ['price'] });
var Detailsstore = new Ext.data.Store({
model: 'Carding',
proxy: {
type: 'ajax',
url: 'http://192.168.1.92/testapp/websample%20backup/sample/assets/www/XMLS/xmlformatses.xml',
reader: {
type: 'xml',
record: 'root'
}
},
listeners: {
single: true,
datachanged: function(){
Detailsstore.each(function(r){
stockings[i++]=r.get('price');
});
alert(stockings[3]);//This alert works fine
}
}
});
Detailsstore.read();
alert(stockings[3]);//this alert even being placed after the Detailsstore it shows undefined . . . . .
var showdetails = new Ext.Panel({
scroll :'vertical',
flex:7,
renderTo: 'bubbleCt',
baseCls: 'kiran',
stretchX: true,
html: '<span style="color:#fff; font-size:20px;"><span style="font-size:25px; font-weight: bold;">' + stockings[2] + '</span><br/><br/><span style="font-weight:bold;">Trading Action Plan :</span><br/>• Buy Price: 1 <br/>• Sell Price:2<br/>• Stop Price 80 cents<br/>• Rule: Sell 50% on double <br/>• 6% Trailing Stop Loss on stock<br/><br/><span style="font-weight:bold;">Volatility Analysis:</span><br/>• <br/>• <br/>• <br/><br/><span style="font-weight:bold;">Techincal Analysis:</span><br/>• <br/>• <br/>• <br/><br/><span style="font-weight:bold;">Fundamental Analysis:</span><br/>• <br/>• <br/>• <br/></span>',
});
var detailspanel = new Ext.Panel({
fullscreen: true,
padding:1,
layout: {
type: 'vbox',
pack: 'center',
align: 'stretch'
},
items: [showdetails]
});
});
The problem above is that wen i try to run the code first the second alert is taking place and showing the undefined.........
my goal is to parse the data and show it into the panel .
But i think the problem is that the panel is being displayed even before the the store completes it's operation
the first alert is working fine and displaying the value in it but that operation is happening after the panel is displayed already
please help
Thank you . . . ..
Your Ext.data.Store is being loaded up by an asynchronous request to your server. It doesn't block the execution of JavaScript, so it makes the request, but doesn't wait for the data to get back before continuing on to the rest of your script (i.e. the alert, your panel, etc).
When the store loads, it will fire the event 'load'. When you get this event, THAT's when you want to make your panels, etc.
Detailsstore.on('load', function() {
// do everything here.
// var showdetails = new Ext.Panel({ ...
// var detailspanel = new Ext.Panel({ ...
});
Detailsstore.read(); // <-- fire off the request for data AFTER you set up your 'load' handler
an ext store fires a 'load' event when its data has loaded.
add a load listener to your store and display your data once the load event fires.
http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.Store
You should check out using templates if you want to bind a data store or a model instance to a panel - that way you don't have to detect the datachanged and just use .update() on the component.
Also: stores have an autoLoad flag that will avoid you having to do the read() explicitly.
Related
I'm using JS-Grid and I want to update a specific cell value right after i change a page.
Looking at the documentation , onPageChanged method seems like the right way to do it, but it doesn't work properly.
I have the following JS-Grid code:
$("#itemsListGrid").jsGrid({
width: "100%",
filtering: true,
sorting: !0,
viewsortcols : [true,'vertical',true],
paging: true,
autoload: true,
pageSize: 9,
pageButtonCount: 5,
controller: db,
fields: jsGrid_fields_mapping,
onPageChanged: function() {
alert("START onPageChanged");
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}
});
Running my app, i see that the alerts are popping BEFORE the page actually change. I'm trying to find a workaround to make it work.
Maybe not the most clean way to do it, but have you tried using setTimeout()?
So, in your case:
onPageChanged: function(args) {
alert("START onPageChanged");
// Wait some time to render table, then call function
setTimeout(function() {
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}, 300);
},
Background: the docs of JSGrid say that the event fires immediately after the page index is changed and doesn't wait for the data to load.
I am using a loadmask that the html property holds all the loading content. The problem that i am facing is that even if message property's value is an empty string, message allocates space inside the loadmask producing something like a dash on the left of my html message.
(Add the code bellow to a Sencha Fiddle)
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create({
xtype: 'panel',
fullscreen: true,
html: '<h1>Hello World !!!</h1>',
listeners: {
painted: function (panel) {
panel.mask({
xtype: 'loadmask',
html: '<div align="center"><h3>Loading Mask</h3>' +
'<p>i am loading...</p></div>',
message: '', //empty message holds its opacity
indicator: false,
style: 'background:#d7ecfd'
});
}
}
});
}
});
How can i remove or make that space transparent?
Modern Toolkit does not have the useMsg property.
I've tried setting the background property (background: transparent) at messageCls but nothing happened.
I guess the sencha devs never thought of a scenario where the message field would go empty.
However you can correct it by adding the below style in the html.
<style>.x-mask-inner{background:rgba(0, 0, 0, 0) !important}</style>
I have a toggle button:
var button = new Ext.Button({
tooltip: "Интенсивность",
iconCls: "gxp-icon-intensity",
enableToggle:true,
toggleHandler: function (button, state) {
if(state){
alert(state)
map.getLayersByName("Интенсивность")[0].setVisibility(true);
intWin.show();
}else{
map.getLayersByName("Интенсивность")[0].setVisibility(false);
alert(intWin.collapsed);
//intWin.close();
}
}
});
And when the button is toggled I show a window:
var intWin = new Ext.Window({
id: 'intWin',
layout: 'fit',
title:'Интенсивность',
autoScroll:false,
width:300,
items:[/*intForm*/]
});
When I close my window, then the button un-toggles. But when I click it again I don't get a window. Firebug shows this error:
TypeError: b.dom is undefined
...String(this.enableUrlEncode)?this.enableUrlEncode:"data"]=Ext.encode(b);g.params...
What can be wrong here?
UPDATE
Okey,my bad. I tried to show a destroyed element.
But in this case:
1 When I close the window and is destroyed, any forms in this window will be destroyed too?
2 How can I check that the window is destroyed?
UPDATE2
Now I try this function for creating the window:
function intWinCreate(){
var intWin = new Ext.Window({
id: 'intWin',
layout: 'fit',
title:'Интенсивность',
autoScroll:false,
width:300,
items:[/*intForm*/]
});
};
and in the button handler:
intWinCreate();
intWin.show();
But I get an error:
ReferenceError: intWin is not defined
If I put intWin.show(); into the function then that window shows.
What can be wrong?
When an element is destroyed everything within it also is destroyed.
In your case you change the default behaviour of close action to hide by setting the property closeAction: 'hide' it will cause the window to hide instead of getting destroyed.
Ex:
var intWin = new Ext.Window({
id: 'intWin',
layout: 'fit',
closeAction: 'hide',
title:'Интенсивность',
autoScroll:false,
width:300,
items:[/*intForm*/]
});
Update:
It is because intWin is a local variable in the method intWinCreate. What you can do is to return the window from the method and call show on it.
function intWinCreate(){
return new Ext.Window({
id: 'intWin',
layout: 'fit',
title:'Интенсивность',
autoScroll:false,
width:300,
items:[/*intForm*/]
});
};
Then
intWinCreate().show()
Yes, form usually is destroyed too
You can check, for example, intWin.body - if it is null - window is destroyed
UPDATE
As i see you have one answear already but I have another one for you too ;)
As long as you set
id: 'intWin'
You can access this window from anywhere using
Ext.getCmp()
so you can show it with this:
Ext.getCmp('intWin').show()
I have a combo-box with following configuration.
{
fieldLabel:'Service',
xtype:'combo',
displayField: 'srvcDesc',
store: storeServiceCodeVar,
valueField:'srvcCD',
id:'serviceCodeId',
name:'serviceCodeName',
queryMode: 'remote',
queryDelay:100,
typeAhead: true,
minChars:0,
hideTrigger:true,
forceSelection:true,
maxHeight:23,
deferEmptyText:false,
autoSelect:true,
fieldStyle:'text-transform:uppercase',
listConfig: {
loadingText: 'Loading...',
// Custom rendering template for each item
getInnerTpl: function() {
return '<table width="200px"><tr><td height="5"></td></tr><tr valign="top"><td>Code:{srvcCD}</td></tr><tr><td height="2"></td></tr><tr valign="top"><td>Description:{srvcDesc}</td></tr><tr><td height="5"></td></tr></table>';
},
emptyText:'No Values Found'
}
}
The issue is that when there is no data returned from the server, then emptyText (which has value - No values found) gets displayed for may be a millisecond and goes off. I want it to stay there till the next query if fired. How is it possible. I have tried with deferEmptyText but no luck.
Could someone throw some light on this. I am using ExtJS 4 and behavior is same in IE9 and Mozilla.
Thanks in advance.
From stepping through the source, it doesn't seem like there is any reference to the listConfig.emptyText being used to determine whether or not to set the element's height to a number other than zero.
I've ended up overriding the alignPicker() function which Ext.form.field.ComboBox inherits from Ext.form.field.Picker, and adding a check for listConfig.emptyText.
Ext.override(Ext.form.field.ComboBox, {
alignPicker: function() {
var picker, height;
if (this.isExpanded) {
// Get the picker component.
picker = this.getPicker();
if (this.matchFieldWidth) {
// Set the default height to null, since we don't
// automatically want to have the height changed.
height = null;
// If our store exists, but the count is zero
// and we've got no emptyText defined...
if (picker.store &&
picker.store.getCount() === 0 &&
Ext.isEmpty(this.listConfig.emptyText)) {
// ...we set the height to zero.
height = 0;
}
// Set the size of the picker component.
picker.setSize(this.bodyEl.getWidth(), height);
}
if (picker.isFloating()) {
this.doAlign();
}
}
}
});
Hope this helps!
A word of warning here. I'm on ExtJs 4-0-6 and it seems that there is now some code in Ext.form.field.ComboBox and it no longer just relies on inheriting the method from Ext.field.form.Picker.
So, instead the above code should now override the code directly in Ext.field.form.Picker rather than in the ComboBox.
But admittedly, hopefully Sencha will fix this themselves soon in 4.1.
how can I expand an ExtJS (version 3.3.1) Component, e.g. a Ext.Panel nested somewhere in the document hierarchy to "fullscreen" so that it takes up the whole browser window region? I guess I need to create an Ext.Viewport dynamically and reparent the component being "expanded", but I've had no success so far. Could someone provide a working sample?
Also, I'd like to be able to restore the component to its original place at some point later, if that's at all possible.
I tried the following:
new Ext.Button({ text: 'Fullscreen', renderTo : Ext.getBody(), onClick: function(){
var viewPort = new Ext.Viewport({
renderTo: Ext.getBody(),
layout: "fit",
items: [ panelToBeExpanded ]
});
viewPort.doLayout();
}});
which does not work very well. Upon clicking the button, the panel panelToBeExpanded seems to take up the viewport region, but only if there is no HTML in the BODY section, otherwise viewport is not fully expanded. Also, working with the reparented panel afterwards causes weird flicker in most browsers.
Is there a reliable way to universally (ideally temporarily) expand a component to the whole browser window?
UPDATE
Thanks to a suggestion in the comments, creating a new maximized Ext.Window seems to be a good solution. The second part is a bit tricky though - how to move the reparented component back to its original place in DOM (and ExtJS component hierarchy) once the window is closed?
Thanks for your help!
You could use Ext.Window.toggleMaximize method. I created a simple working example, check it out here
Pay attention that Ext.Window is maximized inside its rendering container, so if you use "renderTo" attribute and set it to some div inside your page Window will only be as big as div that contains it. That is why I used document body to render myWindow. Of course you could also use Ext.Window.x and Ext.Window.y configuration attributes to locate your window in wanted place.
This is a little late but stumbled upon this only now and remembered I had to do something similar and ended up overriding the text-area component which would automatically expand to full-screen on doubleclick by creating a copy of the component in a full-size window. On closing the values are automatically updated in the instantiating component which was hidden behind the full-screen window and hence never was taken out of the dom in the first place.
Here's my code I think it's fairly self-explanatory.
Hope it helps someone!
Rob.
/**
* Override for default Ext.form.TextArea. Growing to near full-screen/full-window on double-click.
*
* #author Rob Schmuecker (Ext forum name rob1308)
* #date September 13, 2010
*
* Makes all text areas enlargable by default on double-click - to prevent this behaviour set "popout:false" in the config
* By default the fieldLabel of the enhanced field is the fieldLabel of the popout - this can be set separately with "popoutLabel:'some string'" this will also inherit the same labelSeparator config value as that of the enhanced parent.
* The close text for the button defaults to "Close" but can be overriden by setting the "popoutClose:'some other text'" config
*/
Ext.override(Ext.form.TextArea, {
popout: true,
onRender: function(ct, position) {
if (!this.el) {
this.defaultAutoCreate = {
tag: "textarea",
style: "width:100px;height:60px;",
autocomplete: "off"
};
}
Ext.form.TextArea.superclass.onRender.call(this, ct, position);
if (this.grow) {
this.textSizeEl = Ext.DomHelper.append(document.body, {
tag: "pre",
cls: "x-form-grow-sizer"
});
if (this.preventScrollbars) {
this.el.setStyle("overflow", "hidden");
}
this.el.setHeight(this.growMin);
}
if (this.popout && !this.readOnly) {
if (!this.popoutLabel) {
this.popoutLabel = this.fieldLabel;
}
this.popoutClose = 'Close';
var field = this;
this.getEl().on('dblclick',
function() {
field.popoutTextArea(this.id);
});
};
},
popoutTextArea: function(elId) {
var field = this;
tBox = new Ext.form.TextArea({
popout: false,
anchor: '100% 100%',
labelStyle: 'font-weight:bold; font-size:14px;',
value: Ext.getCmp(elId).getValue(),
fieldLabel: field.popoutLabel,
labelSeparator: field.labelSeparator
});
viewSize = Ext.getBody().getViewSize();
textAreaWin = new Ext.Window({
width: viewSize.width - 50,
height: viewSize.height - 50,
closable: false,
draggable: false,
border: false,
bodyStyle: 'background-color:#badffd;',
//bodyBorder:false,
modal: true,
layout: 'form',
// explicitly set layout manager: override the default (layout:'auto')
labelAlign: 'top',
items: [tBox],
buttons: [{
text: field.popoutClose,
handler: function() {
Ext.getCmp(elId).setValue(tBox.getValue());
textAreaWin.hide(Ext.getCmp(elId).getEl(),
function(win) {
win.close();
});
}
}]
}).show(Ext.getCmp(elId).getEl());
}
});