I am utilizing an Ext.form.Panel, it's configurations are as follows:
defaultType : 'textfield',
layout : 'auto',
height : '60%',
width : '40%',
floating : true,
modal : true,
renderTo : Ext.getBody(),
closeAction : 'destroy', // default; invoked via the .close() method
Within this form, I have a number of textfield type components, each with a corresponding label. The configuration, beyond their label and name, is identical and is as follows:
fieldLabel : 'Dimension Label',
name : 'dimensionLabel',
labelWidth : '400px', // to exagerate the label size
padding : '10px'
I would like to align the input fields, not necessarily the label (as demonstrated in this question regarding the .Net Framework); however, my input fields are aligning, as follows:
A number of SO posts suggest the labelAlign configuration for the FormPanel; however, it is not an available configuration for the Ext.form.Panel in Ext JS 5 (I don't know when it was previously available). If I attempt to configure it, the configuration is ignored. I have tried both on the field and panel level.
Is it possible to align the above fields on the left? Someone else on the Sencha forums suggest utilizing a fieldset; however, this also does not have the above mentioned configuration.
You can use the form layout:
This is a layout that will render form Fields, one under the other all stretched to the Container width.
See working example: https://fiddle.sencha.com/#fiddle/ls5
Alternatively you can use the anchor layout:
This is a layout that enables anchoring of contained elements relative to the container's dimensions.
See working example: https://fiddle.sencha.com/#fiddle/ls7
Related
I am new in the ext js development. I need a extjs button with icon and text on it. The button behavior (onmouseover , onclick etc) should be same as extjs button.
I am using icon from svg file.
Below are the steps that i am trying, but it does not behave like extjs button:
Panel.js :
xtype: 'button',
iconCls: 'svgImage',
minWidth: 20,
maxWidth: 40,
localized: { text: 'localtext' }
Here even if i add the style:'background-color:#eeefea' for the xtype it will disappear the image from the button.
I am thankful, if anyone face the same issue and having solution for the same.
There are two config options to set button's image:
iconCls - one or more space separated CSS classes to be applied to the icon element
icon - Url to the icon
See my live demo here: https://ext4all.com/post/extjs-6-button-with-svg-icon.html
I am trying to edit the area of the CKeditor ( see icon). All this window is a Table with rows and columns, even the textarea is a part of a row. What i am trying to do is to create more Columns for my dropdowns and to move them higher, so i have first my dropdowns in a line and then my textarea. So is there a file responsible for these settings?
ps. I can't find the inspected html.
Well this can be achieved by using an Hbox (Horizontal Box probably).
add this code to mathjax.js
{ type: 'hbox',
widths: [ '25%', '25%', '50%' ],
children: [
type:'select',
id:'someid'
]
}
I'm novice in ExtJS ... but
I can't solve my problem with two buttons, let's say [B1] and [B2].
On simple toolbar I want to have two buttons on the SAME place
respectively on something (let's say 20 pcx from the left on the
toolbar) displayed alternately [B1] or [B2] on the same position.
Buttons are defined as:
xtype: 'toolbar',
dock: 'bottom',
height: 30,
items: [
[B1] is filefield button:
xtype: 'filefield',
itemId: 'FFId',
buttonOnly: true,
...
[B2] button (in fact used as pull down menu button):
xtype: 'button',
iconAlign: 'right',
...
]
When buttons are simple buttons boyh situation is the same. I tried
to hide/show them the following way:
on the base of hidden property and method setVisible() they are no
in the same place, they are displayed "side by side" (I mean e.g.
[B1] place is empty and on the right side [B2] is displayed)
on the base of style: 'visibility: ...' - the same situation
on the base of style: 'display: ...' almost good, both buttons
are displayed the same place but (left 20 pcx the toolbar)
lower in the toolbar so I see half of both of them
Have you any suggestions?
Thanks in advance!
Try using the property hidden: true.
And for changing the state after it is rendered use the functions .hide(), .show() or if you want to use the same function for both .setHidden(boolInput) where boolInput is true if you want to hide the button, and false if you want to show it.
Edit for clarification:
I assumed you to be wanting to show only one button at a time, and have which ever button is showing at any given time be displayed in the same location. Is that what you wanted, or something different?
Here is a working example of what I understand you are looking for:
https://fiddle.sencha.com/#fiddle/nvn
For your third option style: 'display: ...', you can try set margin and padding configuration to adjust the position of buttons.
I am new to both Sencha ExtJS and Css as a whole. Basically I have a 3 child panel's inside a master panel. I want to set the same background color to just three panel's inside the master panel using CSS. I have created a .css file and linked it into the HTML. The content of the CSS file are:
.x-panel.child-content-style {
background-image : url('TitleBackground.png');
}
I can make this happen without using css by setting the bodyStyle:{"background-image":"url('TitleBackground.png')"} config. It works perfectly but I feel there is probably a better way to do it using css.
When I try and add my css using the cls config property nothing happens. When set the bodyCls property it then sets the backgrond of the entire application which is not what I want. I am looking to change the background to only a few panel's. I have also tried specifying the css element name in the bodyStyle config in lieu of the inline with no joy.
Here are my child panel's:
{ xtype: 'panel', html: '<img src=\'appIcon.png\' style=\'width:52px;height:52px\'> ', cls: 'child-content-style' },
{ xtype: 'panel', html: '<h2 style=\'font-family:verdana\'>Toolkit v3.0</h2>', bodyStyle:{"background-image":"url('TitleBackground.png')"} },
{ xtype: 'panel', html: ' <img src=\'appIcon.png\' style=\'width:52px;height:52px\'>', bodyStyle:{"background-image":"url('TitleBackground.png')"} }
Is this even possible to do or should I just cjoke it up to a loss and leave it inline?
Thanks
I believe it is bodyCls what you are looking for.
Is there a way to customize the title of ext.js grid panel (or is there a more generic way of customizing panel title) by adding custom controls to it, and not tool buttons?
I am tring to add a search field to the title, but with current existing implementation (found in the ux/grid example) it is shown how filter can be added to the drop down menu of the grid's title, and not to the title itself, which is what I am trying to achieve..
Any clue?
Have a look at the grid panel's header config, where you can set any configuration option of Ext.panel.Header. As it is a container, you can just specify its items there:
header: {
title: 'Test',
titlePosition: 0,
items: [{
xtype: 'textfield'
}]
}
Also check out this fiddle.
Header is a container with hbox layout so you can add/remove items to it as to any other container. You can test it (for example) here: http://extjs.eu/apps/saki-writable-grid/ by typing
Ext.ComponentQuery.query('maingridview')[0].getHeader().add({xtype:'textfield'});
in the console. The textfield appears at the header right.
As to grid filtering, see Grid Search Plugin that can be added also to the grid header.