I've inherited an application that uses ExtJS and am relatively unfamiliar with it's conventions.
I have a select box for time entry that defaults to a time passed in. Is it possible to set selected = selected for the value it defaults to? Currently the default time is displayed, but when you click on the box the list of options defaults to the first value (So if the default it 2pm, when you click to select an alternative time you are taken to 12am not 2pm).
The code:
{
xtype: 'timefield',
id: 'timeselect',
name: 'starttime',
fieldLabel: 'Start Time',
labelWidth: 80,
labelAlign: 'right',
width: 160,
minValue: '12:00 AM',
maxValue: '11:55 PM',
value: MyApp.config.AppConfig.time, //Current time rounded to hour
increment: 15
},
Thanks!
Edit: To clarify. The select box shows the correct time when the page loads. But when the user clicks on the select, they are taken to the start of the option list (12:00 am in this case). I'm hoping to have the option list default to the time selected (similar to ). Thanks!
Edit #2: The application uses v4.0.7
The solution is simple then: upgrade your version of Ext! Not that simple? Patch it in the meanwhile. I must confess that I tried to copy the code of the v4.2 of Ext.form.field.Time into the fiddle. That didn't work. Here's a cleaner approach:
Ext.define('Ext.ux.fix.Ext.form.field.Time.CurrentSelectionOnExpand', {
override: 'Ext.form.field.Time'
,initComponent: function() {
this.callParent();
this.on({
scope: this
,delay: 1 // let render
,expand: function() {
this.highlightCurrent();
}
});
}
// copied from Ext.view.BoundListKeyNav.method#highlightAt()
,highlightCurrent: function() {
var me = this,
picker = me.picker,
index = picker.store.find('disp', me.getRawValue()),
item = picker.all.item(index)
if (item) {
item = item.dom;
picker.highlightItem(item);
picker.getTargetEl().scrollChildIntoView(item, false);
}
}
});
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.
This is my first post, I can fill in further details if needed.
I am looking to get the xy position of the cursor when either Hour, Minute or Seconds are clicked. I am looking to use the positions for the stepper to act accordingly. The current code just responds with undefined. I am getting undefined because I am using extjs 4.2.2
{
xtype: 'spinnerfield',
itemId: 'time',
name: 'intime',
width: 125,
listeners: {
mousemove: {
element: 'el',
fn: function(e){
var event = e.event;
console.log(event.clientX);
}
}
},
step:1,
value:"11:11:21",
You can add a mousemove event listener to the el (or inputEl), for example:
xtype: 'textfield',
listeners: {
mousemove: {
element: 'el',
fn: function(e){
console.log(e.event);
}
}
}
A working example: https://fiddle.sencha.com/#fiddle/uke
Stack Overflow is amazing! I been banging my head for two days trying to figure this out. I Got it thanks to #CD.. I could use mousedown: to determine where in the box is clicked and use event.clientX to capture the X position. In extjs 4.2.2 you can use e.getX()
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());
}
});