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>
Related
I am using tagfield and after selecting two or three values my curser moving to down. I want my cursor in same line even if a bit of space is there and after type or select any value then it move to down. Can anybody help me how to get this.
I have specify the specific width also.
My Code :
{ xtype: Tagfield,
growMax : 10,
valueField: 'title',
displayField: 'title',
parentGrid : me,
queryMode: 'local',
autoLoadOnValue:true,
multiSelect: true,
isFilterDataLoaded: false,
disabled: true,
triggers: {
clear: {
weight: -30,
cls: 'button-cross',
handler: function(){
this.clearValue();
}
}
},
}
Here is my fiddler: TagfieldFiddle.
Step to reproduce :
1. Select three tags.
2. For fourth tag cursor is going to next line. I want cursoer should be in first line.
You have to resize the input field according to the text that has been entered. Since the input field is an Ext.dom.Element, you will have to check that this works in all browsers:
listeners:{
afterrender: function(tagfield) {
var minWidth = 10, // modify here for adjustable text field width
el = Ext.getBody().createChild(),
measurer = new Ext.util.TextMetrics(el);
tagfield.inputEl.setWidth(minWidth);
tagfield.inputEl.on('keyup', function() {
var requiredWidth = measurer.getWidth(tagfield.inputEl.dom.value);
tagfield.inputEl.setWidth(requiredWidth+minWidth);
});
tagfield.on('change', function() {
var requiredWidth = measurer.getWidth(tagfield.inputEl.dom.value);
tagfield.inputEl.setWidth(requiredWidth+minWidth);
});
}
}
Try it here: https://fiddle.sencha.com/#view/editor&fiddle/20cb
I have changed the ExtJS version because there seems to be a bug in tag field in ExtJS 6.0 - if you enter through keyboard, the content of the input is not removed after selection.
I have prepared a Sencha-Fiddle example for my problem, which can be stated as follows:
(1) Why is the Ext.ux.IFrame named panel_iframe not showing ASDFG which is inside the passed html config <html><body>ASDFG</body></html>?
The Sencha docs on Ext.ux.IFrame tell me, that such a property exsists. I need to assemble the html dynamically so going with the src config is no option for me, since the client is not allowed to change files on the server.
Just in case the Fiddle is not working:
Ext.application({
name : 'myfiddleexample',
launch : function() {
var panel_iframe = Ext.create('Ext.ux.IFrame', {
//src: 'some/path/some/file.html' /*i know this works*/
html: '<html><body>ASDFG</body></html>' /*why does this not work?*/
});
var panel = Ext.create('Ext.panel.Panel', {
frame:true,
title: 'panel_5',
padding: '1 1 1 1',
margin: '1 1 1 1',
layout: 'fit',
//html: '<html><body>ASDFG</body></html>' /*i know this works, too*/
items: [panel_iframe]
});
var vp = new Ext.Viewport({
layout: 'fit',
items: [panel],
autoScroll: true,
renderTo : Ext.getBody()
});
}
});
Another question (2):
I wanted to use the IFrame named panel_iframe in order to put some vis.js graph network visualisations in it.`
Is there an alternative approach to this?
Yet another question (3):
Has someone combined ExtJs with vis.js and can provide a SenchaFiddle, which inits a simple graph inside a Ext.ux.IFrame or any other Ext.Component like for example Ext.panel.Panel?
In my project, I am trying to add the tip text (config) dynamically to a slider. How to do that?
I need to add it dynamically because I am generating the array of variables in a "Controller", which holds the text for each value of the slider (for tip text).
var slider = Ext.getCmp('slider')
slider.setTipText(arrayOfVariables) //What should I do here instead?
There is no such method like setTipText in docs. What should I use then?
EDIT:
{
xtype:'slider',
animate: false,
//plugins: [Ext.create('App.view.SliderOverride')],
cls: 'sliderStyle',
width: "80%",
id: 'slider',
value: 36/2, //must be current month
//increment: 10,
minValue: 1,
maxValue: 36,
useTips: true,
tipText: function(thumb){
alert("hello");
App.getController('TaskController')._arrMonthView[thumb.value].month;
},
},
tipText requires a function config so you can add a function that will use your variables from controller;
Ext.create('Ext.slider.Multi', {
....
tipText: function(){
return App.getController('your controller').yourVariable
},
.....
});
This is added on the creation of the slider so you don't need to modify it , just your variables in controller. So you don't need to re set the tip text function.
I solved this issue by using getText method of Ext.slider.Tip.
Used to create the text that appears in the Tip's body. By default this just returns the value of the Slider Thumb that the Tip is attached to. Override to customize.
For example in which situation it can be used, you have a look at this link
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());
}
});
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.