I'm using ExtJs 7 - Modern
Unfortunately, in all objects, text cannot be copied in the usual way by selecting it with a finger.
Can you please tell me if there is any solution for this feature?
By default most components are not user selectable.
Set the body of a container as user selectable and you can select the text with your finger or a mouse.
xtype: 'container',
userCls: 'ordersummary',
style: {
'border': '1px solid black',
'padding': '5px',
'margin': '0 0 5px 0'
},
// this is what makes it selectable.
userSelectable: {
bodyElement: 'text'
},
see the userSelectable config for Ext.Container.
it is basically setting the user-select
Related
I am not able to get border for combobox.
xtype: "toolbar",
overflowHandler: "scroller",
dock: "top",
items: [{
xtype: "combo",
itemId: "combo1",
width: 80,
labelWidth: 50,
fieldLabel: "Filename",
store: filenames,
queryMode: "local",
displayField: "text",
fieldStyle: {
borderRadius: "3px"
}
}]
border is not displaying for combobox.
You appear to be missing the border config property from your component. That could be one of the reasons of your problem, especially as your component seems to be embedded in a toolbar.
From Sencha's documentation:
Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).
For components that have no border by default, setting this won't make the border appear by itself. You also need to specify border color and style:
border: 5,
style: {
borderColor: 'red',
borderStyle: 'solid'
}
Note that setting borderRadius as you did does not imply that there will automatically be a border. It only states that "should there be a border, it will have that radius in its corners".
Most likely, all you need is to add the following to your combo configuration:
border: 1
Modifying Sencha's fiddle provided in the documentation to have a toolbar, the border is present whether you manually set the border property or not.
The following code - run within the sencha documentation itself - demostrates a combobox within a toolbar, with its border.
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
// Create the combo box, attached to the states data store
var cmb = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
border: 5,
style: {
borderColor: 'red',
borderStyle: 'solid'
},
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
});
Ext.create({
xtype: "toolbar",
overflowHandler: "scroller",
dock: "top",
renderTo: Ext.getBody(),
items: [
cmb
]
});
Problems related to border and the like are often caused by the CSS of your team not being imported or the related js file not being loaded, in contexts where ExtJS has not been "prepared" built using sencha build but instead manually imported.
Alternatively, it's a CSS problem. In that case you'll have to use The Developer Tools of your browser of choice (F12 key, usually) and inspect the border-related properties for your component.
I want to put some label/fields in a dialog/window. See below
I would like to stretch the field part to maximum, and I would like to shrink the label to the allowed minimum.
I thought border layout would be the best in that situation :
{
xtype: 'panel',
//flex: 1,
margin: '3',
border: true,
layout: 'border',
items: [
{
xtype: 'label',
region: 'west',
text: 'label'
},
{
xtype: 'numberfield',
region: 'center'
}
]
}
However when I do that, the field disappears and even more strangely, the dialog moves to the (0,0) position in the frame. Ie. the dialog moves to the top left corner :
Am I not understanding something here? The dialog also uses a border layout. Ie the buttons are in a south panel. Is it maybe not allowable to use a border inside a border for a dialog? Is this an extjs bug?
Is there some other way to achieve what I want to do? I understand you can use fieldLabel on a textfield. But I wanted to have two seperate components so I could have more control.
Is it possible to put label at bottom of text field?
I'm required to have the UI look like a PDF/printed form where most of the field labels are centered below input fields.
A CSS style/class approach is good enough. I just want to get this over in a hurry.
Thanks in advance.
Add a custom cls to your textfield as follows:
Ext.create('Ext.Panel',{
renderTo: Ext.getBody(),
width: 300,
height: 500,
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
cls: 'pdfField',
labelSeparator: ''
}]
});
Then create the pdfField class:
For ExtJS (5) =>
div.pdfField .x-form-item-label {
display: table-footer-group;
text-align: center;
}
For ExtJS (4) =>
.pdfField td {
display: table-caption;
}
.pdfField tr>td:first-child {
display: table-footer-group;
text-align: center;
}
Here is a fiddle ta works with both versions: https://fiddle.sencha.com/#fiddle/h35
Not that it looks better with ExtJS 5, that is because in ExtJS 5 uses divs to display the textfield content while ExtJS 4 uses table cells.
I have a label and I'm setting the text color like this, but the label text does not change color:
xtype: 'label',
text: 'My Text',
cls: 'myTextClass'
Here is the CSS:
.myTextClass {
color: #ff0000;
}
If I do this on the label it works:
style: {
color: '#ff0000'
}
Look at the label in Google dev tool. Probably your css gets overridden because there is a more specific rule. You have to add something to your css selector like
.x-label .myTextClass {
color: #ff0000;
}
Hello I got problem with scroll on my grid.
Here is the code (nothing fancy or special in it)
Ext.define('grid.list',{
alias:'widget.grid.list',
extend: 'Ext.grid.Panel',
title: 'list',
frame:true,
width:325,
store: new axs.dry.cargo.data.store.list,
queryMode: 'remote',
style:{
cursor: 'default'
},
viewConfig: {
autoScroll: true
},
features:[Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: '{name}'
})],
columns: [
{
text: 'Name',
flex: true,
dataIndex: 'name',
sortable: false
}
],
initComponent:function(){
this.on('beforerender',function(){
this.store.load();
});
grid.list.superclass.initComponent.apply(this,arguments)
}
})
Grid is looking good and the scroller is showing BUT over the scrollbar extjs generates a DIV who is making the real problem. Because of that div I CAN'T click on the scrollbar because the transparent DIV is over it.... here is the code of this useless DIV
<div id="gridscroller-1032" class="x-component x-scroller x-scroller-vertical x-component-default x-docked x-docked-right x-component-docked-right x-component-default-docked-right" style="width: 17px; height: 297px; left: 302px; top: 47px; " role="presentation"><div class="x-stretcher" id="ext-gen1392" style="width: 1px; height: 2953px; "></div></div>
I hear opinion that this div is generated for "infinitive grid" but ...
Can you help me with good solusion (removing the element by selecting its ID is not a good solusion)
PS. When I remove the fixet width of my grid.list element the problem gone ... but then it starts showing horisontal scroll bar who looks ugly and I can remove it only by setting the width to fixed size.
PS2. I'm using the default css files and no special styles or anything.
The problem fixed by itself. I have integrate my form in the main project and the scrollbar appears...
I don't know why is that happening, maybe it is extjs bug.