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.
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'm using free-jqGrid and jqGrid has the option to place selection checkboxes for you onto the grid. On my grid I have two columns in the beginning which is placed by jqGrid and not backed up by my own data: a record number column 'rn' and the checkbox for record selection 'cb' (multi select in my case).
I feature the jqGrid on a bootstrap website, so when the loadComplete event hits, I add 'from-control' class to a lot of edits, like the per column search boxes and basically every edit I can find on the page. (I also replace every ugly little icon to glyphicons. I manipulate the DOM of the toolbar buttons so they become real buttons, so they look nicer and chardin.js work well for example. And so on and on and on. The end result is much better than the original. BTW, I'm not sure if that's the best practice, I couldn't find a better way to make jqGrid more bootstrappy, but this can be another question).
When you apply form-control class to a checkbox, it bloats up. That's beneficial, because it's much easier to click on it, you don't need to have a magnifier glass (like for the original tiny checkbox). I can nicely resize the columns for all those data columns what I supply data for, but I cannot figure out how to widen the cb column so it can accommodate the bloated up checkbox.
I tried adding a configuration for that column in my colModel:
Both
{
name: 'cb',
width: 38,
align: 'center',
sortable: false,
}
and
{
width: 38,
align: 'center',
sortable: false,
}
failed, I got an error from jqGrid stating that the number of colModels doesn't match the number of supplied data. That's true, because the data behind the cb column is not backed up by me.
I tried in the loadComplete
var $ajaxGrid = $("#ajaxGrid");
$ajaxGrid.jqGrid('setColProp', 'cb', { width: 38 });
That didn't give me an error, but also didn't change anything. Maybe I should put it into another event handler? Which?
Then I tried to go down the rocky road of manipulation:
$("#ajaxGrid_cb").css("width", "38px");
$(".td_cbox").css("width", "38px");
As you see I separately widen the header and the td elements. But this causes the table horizontal scrollbar to appear. Yuck! I tried to tumble deeper into the hacking hole, and make a wider column on the grid narrower to make the scrollbar disappear, but this didn't help:
$("#ajaxGrid_Name").css("width", "435px");
$('td[aria-describedby="ajaxGrid_Name"]').css("width", "435px");
There must be a way. Now it's ugly. Screenshot:
(Another style problem you can also see is for the Combined column I specify align: 'center' in the colModel but it has no effect.)
You can use multiselectWidth to specify the width of the multiselect column:
multiselectWidth: 38
One more alternative: you can change the columns width later using setColWidth which is the part of free jqGrid. I introduced the method originally in the answer as plugin to old jqGrid versions. Thus the following, for example, will work too:
onInitGrid: function () {
$(this).jqGrid("setColWidth", "cb", 38);
}
The onInitGrid callback or jQuery event "jqGridInitGrid" are good place, where you can modify the grid before the data will be loaded.
P.S. I'm working now on including better support of Bootstrap in free jqGrid. Probably you will just need to use guiStyle: "bootstrap" in the next version of jqGrid to make jqGrid be "in Bootstrap style".
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 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
i have a dataview and i am showing some images inside it. Now i am doing pagination for the dataview. I dont need the default paging bar using extjs. What i need is a customised one. That is there will be an icon for showing previos page on the left side of dataview and an icon indicating next page on the right page in between two icons i have to show the page count like "1,2,3,4,5".
Is it possible to customize the default paging bar in this way?
{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: false,
border:0
}