I've been looking everywhere, but I can't find an answer to my problem maybe someone out here can help me.
I have a panel with a toolbar
The toolbar has 3 items (Button, Textfield, Button)
This works fine, I can press buttons, I can't write, edit, etc. in the Textfield...
But if I change to: Button, component, button
And in the component I write a html: ''
The focus manager (maybe something else...) kicks in ... well.. not really so good with that text input, I can write... but I can't press Backspace, if I do, nothing happens, nor I can press the arrow keys....
Is there a way to supress the focus manager only in that text input??? or to the whole toolbar (I don't really need it)
I've tried the "Ext.FocusManager.disable()" but that doesn't work (also the Ext.FocusManager.enabled returns false... so maybe it's not really fault of the Focus Manager)
I've narrowed down the problem to the toolbar...
I created a Text Input some place else, and all the keys work... I moved that same input (using jquery) inside the toolbar... and the backspace and arrow keys stop working... if I move it out, the keys start working again :S
I need it to be a text input because I'm planning on using a jQuery plugin which hides the current input and replaces it with another input... so you see... even if I use textfield, the textfield will get hidden and a text input will replace it without backspace and arrow keys functionality
Any help will be greatly appreciated
Regards!!!!!!!!
ok....
Using the xtype: 'textfield' there was something odd for me....
Ext.FocusManager.enabled
returns false....
If I do a Ext.FocusManager.enable(); and after that a Ext.FocusManager.disable();
Even the xtype: 'textfield' stops working with the backspace and arrow keys :O
So I guess FocusManager has something to do....
anyway, I provisionally solved my issue :P
I left the component as textfield
{
xtype: 'textfield',
name: 'emailsi',
id: 'emailsi',
labelStyle: 'width: auto',
labelWidth: 120,
width: 500,
fieldLabel: idioma.personasInvolucradas
}
And when the text input gets created via jquery it applies display: none to the previous textfield
So... I restore the display:block and also apply a position: absolute; float: right; z-index: -1; so it gets hidden again and doesn't disturb the layout :P
And finally, to restore the Backspace and Left/Right Arrow Keys functionality........
I create a .focus() event in jQuery, like this:
$('.textboxlist-bit-editable-input').focus(function(){
$('#emailsi>div>input').css({display: 'block', 'z-index': '-2', position: 'absolute', float: 'right'});
Ext.getCmp('emailsi').focus();
});
Basically, I discovered that as long as the original textfield has the focus, I can press backspace in the text input :) (also there's where I apply the css thing, first it was outside the focus event, but when the toolbar gets repainted, the textfield goes back to display:none)
If someone has a better solution, it will be very welcomed :D
Regards!!
Related
I am a creating a screen where a user can input any text without constraints.
I tried using NativeBase TextArea and it should work. But when pressed, the border changes color. My expected behavior is that the TextArea's borders should never display any color.
Here is a screenshot of my screen:
Here is a code snippet in creating the textArea:
<TextArea
borderColor="transparent"
h={'98%'}
textAlignVertical="top"
placeholder="| Add Notes"
/>
I tried changing borderColor to 'transparent' but it seems like it is not what I am looking for. That property only changes the borderColor when it is not active.
Maybe there is a way to remove validation of the textArea so that borderColor will not update? Or is there a more suitable property for this kind of feature?
did u try
borderWidth:0,
not sure if it can work tho
I am working to build a screen in my app with several text fields in it. I wish the user to be able to enter a large amount of text in each of them.
There are two problems:
The standard TextField widget is only one line high. I would like it to be many lines high so the user can see all that they have typed.
The standard TextField's behavior seems to act like a typwriter, where the text scrolls infinitely from right to left as the user types. I would like the text to wrap when it hits the edge of the screen.
In short, what I am looking for is your standarrd issue text entry box just like you would be typing into if you were asking a question here.
How do I go about implementing one in Flutter?
TextField Widget has maxLines property.
You can use it like this.
new TextField(
maxLines: 5,
textAlign: TextAlign.left,
decoration: new InputDecoration(
hintText: "Enter Something",
),
)
I have a toolbar in ExtJS and I have a button, I am actually disabling the button in some cases if the user doesn't have access. If I disable it, it is disabled and doesn't launch the client event. So that's great.
But hovering over the button still changes the background color of the button indicating to the user that its enabled and its not.
I tried looking into some CSS issues but I couldn't find anything.
How can I to do this? The only thing I am doing on the button Item is:
disabled: !isAdmin
and the toolbar is being created like so:
var toolbar = Ext.create('Ext.toolbar.Toolbar', {
dock: 'top',
width: 700,
height: 56,
items: [
Am I missing something?
I have created Sencha fiddle for the same it works fine. I tried with Extjs 4.2 version also and it don't change background color on hover for disabled button
https://fiddle.sencha.com/#fiddle/14j8
Check overCls for more information
In extjs, the is this component toolbar.separator( xtype: tbseparator) which allows you to put a vertical space between toolbar items.
It's just that it shows a pipe-like character or a line to denote that component. I want to remove it. I want there to be empty space. I've played around with the configs but can't figure out how. Can anyone help?
Alternatively, you don't really need to use a spacer. Just specify a component with a width of however wide you want the space to be:
{
xtype: 'component',
width: 30
}
Just put this in your custom css file:
.x-toolbar-separator-horizontal {
border-style: none;
}
I am trying to create an Ext.Component, that I can use with Draggable, Resizable, Float and Aloha Editor.
Currently I have tried:
afterRender: function(me) {
Aloha.jQuery('#' + me.myId).aloha();
document.getElementById(me.myId).setAttribute("draggable", true);
}
This one doesn't allow it to be draggable, but edit works.
Aloha.jQuery('#' + me.myId).aloha();
draggable: true,
resizeable: true,
float: true
This one allows it to be re-sized and dragged around, however it aloha doesn't work, therefor it is not editable.
Aloha.jQuery('#' + me.myId).draggable();
Aloha.jQuery('#' + me.myId).aloha();
Again this one allows for editing but not dragging.
It seems like the moment the handles come on for a resize or drag event the aloha editor stops working, however if there are no handles the drag and resize stop working. Is there any advice, or has anyone encountered this before?
To Solve this, I did a Move Handler, HTML5 Style:
http://www.w3schools.com/html/html5_draganddrop.asp
And made my main canvas the drop area.
Next I added a small div inside the component which is editable.
and was able to make that div aloha. Then the default resizer works as long as you make the edges transparent.