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'
]
}
Related
I am using data-table in my application which contains text and #'s as data and use the following data alignments:
1) Text data - left aligned
2) Header data - center aligned
3) #'s - center the data first then right align
I have achieved the first two alignments by using data-table's default classes 'dt-left' and 'dt-center'. But I am unable achieve the 3rd alignment either by using 'dt-center' and 'dt-right' classes.
Please find the attached screen-cap for the expected and actual alignments.
Expected #'s alignment:
Actual #'s alignment:
I had achieved the expected behavior by simply providing 'padding' for . But I want to know is there any other efficient/default option available in data-table to achieve this?
The following shows the columns.className option being used to center align the text in the final column of a datatable:
$('#myTable').DataTable( {
columnDefs: [
{
targets: -1,
className: 'dt-body-center'
}
]
} );
Please refer : https://datatables.net/manual/styling/classes for more information.
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 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 have created a panel and have 2 columns. Both the columns have many rows. On left side column there is a label in each row and on the right side column there are text fields in each row. In one of the rows I need a blank left column record and checkbox on the right side.
But when I leave a blank items value
Ext.create('Ext.panel.Panel', {
layout: {
type: 'table',
columns: 2
},
items: [
{ xxxxx},
{ xxxxx},
{},
{xxxxx}
]
}
In place of this empty {}, I am getting a thin blue line, whereas I need a blank row.
How do I obtain this (remove the thin blue line)?
Using firefox I found the id of the div element and wrote display:none but that works only for firefox not for IE.
I need a solution which is browser compatible.
If you have an empty string, and set the border to false, then that should get rid of that blue line :
{
border:false,
html: ' ',
}
Here is an example in jsfiddle :
http://jsfiddle.net/xj363e7f/1/
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.