I work with extjs4
I have a grid and I want to add icon related to condition in the gride
I have a css class
but the probleme that the icon displays several times
my code css :
.contactIcon80 {
background-image: url(/UrbanPlanning/theme/images/delete.png);
width:80px!important;
height:80px!important;
margin-right: auto !important;
margin-left: auto !important;
}
my code extjs :
function showUpdated(value, metaData, record, rowIndex, colIndex, store) {
if(record.get("statut_reqUPReliance")=="WaitingAccept") {
metaData.css = ' contactIcon80';
}
return value;
}
var RequestUPRelianceListGrid1 = Ext.create('Ext.grid.Panel', {
id:'RequestUPRelianceListGrid1',
store: RequestUPRelianceListGridStore,
collapsible:true,
title:'title',
columns: [
{xtype: 'checkcolumn', header: 'test',dataIndex: 'checked', width: 60,listeners:{'checkchange': RequestUPRelianceGridSelectionChanged}},
{text: 'numero', flex: 1, sortable: true, hidden:true, dataIndex: 'num_reqUPReliance'},
{text: 'statut', flex: 1, sortable: true, dataIndex: 'statut_reqUPReliance', renderer: showUpdated}
],
columnLines: true,
anchor: '100%',
frame: true,
height: 250,
margin: '5 5 5 5',
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'center'
},
items: [
{
xtype: 'button',
text: 'new',
id:'new_R',
handler: function() {
}
}
]
}]
});
now I tried with this code :
.contactIcon80{
background-image: url("/UrbanPlanning/theme/images/delete.png") !important;
background-position:center !important;
width: auto !important;
background-repeat: no-repeat;
}
it work without error
Now I want to add the notion of tooltip
I try to modify my code with :
function showUpdated(value, metaData, record, rowIndex, colIndex, store) {
if(record.get("statut_reqUPReliance")=="WaitingAccept") {
metaData.css = ' contactIcon80';
}
return value;
}
var RequestUPRelianceListGrid1 = Ext.create('Ext.grid.Panel', {
id:'RequestUPRelianceListGrid1',
store: RequestUPRelianceListGridStore,
collapsible:true,
title:'title',
columns: [
{xtype: 'checkcolumn', header: 'test',dataIndex: 'checked', width: 60,listeners:{'checkchange': RequestUPRelianceGridSelectionChanged}},
{text: 'numero', flex: 1, sortable: true, hidden:true, dataIndex: 'num_reqUPReliance'},
{text: 'statut', flex: 1, sortable: true, dataIndex: 'statut_reqUPReliance',tooltip: 'currentStatus',renderer: showUpdated}
],
columnLines: true,
anchor: '100%',
frame: true,
height: 250,
margin: '5 5 5 5',
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'center'
},
items: [
{
xtype: 'button',
text: 'new',
id:'new_R',
handler: function() {
}
}
]
}]
});
my goal is when I moves the cursor to the icon I want that this message "current status : ..." will be displyed ,
the statut will be displyed related to the value of statut_reqUPReliance
so I think that I should add the test of tooltip
if(record.get("statut_reqUPReliance")=="WaitingAccept") {
metaData.css = ' contactIcon80';
// here I should disply the message of tooltip which is "WaitingAccept"
}
You need to set background-repeat: no-repeat; in your CSS.
In your css file try this:
.contactIcon80{
background-image: url("/UrbanPlanning/theme/images/delete.png") !important;
background-position:center !important;
width: auto !important;
background-repeat: no-repeat;
}
Related
In my extjs 6.0.0.640, in my panel, I have a tab panel.. inside tab panel I have 2 grids. How do I stretch the grids vertically to fit inside the tab panel? basically stretching the height to fill vertically?
PROJECT CODE
Ext.define('ExtApplication4.view.performance.Performance', {
extend: 'Ext.panel.Panel',
xtype: 'app-performance',
controller: 'performance',
itemId: 'performanceItemId',
requires: [
'ExtApplication4.view.performance.PerformanceController',
'ExtApplication4.util.GlobalVar',
'Ext.chart.axis.Category',
'Ext.chart.axis.Numeric',
'Ext.chart.series.Line',
'Ext.chart.series.Area'
],
title: 'Performance',
layout: {
type: 'fit'
},
items: [
{
xtype: 'tabpanel',
itemId: 'tabPanelId',
activeTab: 0,
//flex: 1,
//height: '100%',
items: [
{
title: 'Portfolio Level',
//layout: {
// type: 'vbox'
//},
items: [
{
xtype: 'grid',
title: 'Portfolio Level',
itemId: 'performancePortfolioLevelGridID',
bind: {
store: '{myPortfolioPerformanceStore}'
},
margin: '10px 0px 10px 0px',
ui: 'featuredpanel-framed',
cls: 'custom-gridPerformance',
//height: 500,
flex: 1,
width: 975,
collapsible: false,
listeners: {
itemClick: 'onAccountClick'
},
features: [{
ftype: 'summary',
dock: 'bottom'
}],
columns: columns are here
},
{
title: 'Daily Portfolio Equity',
width: 975,
//height: 300,
flex: 1,
ui: 'featuredpanel-framed',
margin: '10px 0px 10px 0px',
xtype: 'chart',
theme: 'awesome2',
interactions: 'itemhighlight',
}
Your problem isn't the tabpanel. A tabpanel is already set to layout:'fit' by default.
It's the panel that contains the tabpanel. You should provide it with a fit layout as well, so that the tabpanel is sized to fill the panel.
Ext.create({
xtype: 'panel',
layout: 'fit'
I want to disable horizontal scroll of panel when someone enter text in text field.
First problem:
Currently problem is when you enter text in any textfield and press right arrow key from keyboard (keyCode = 39) then panel horizontal also move in right direction. I want to diable that when text is entered in textfield.
second Problem
Horizontal scroll moves with key only when click on that panel.
Fiddle : https://fiddle.sencha.com/#view/editor&fiddle/1mjd
Ext.create('Ext.panel.Panel', {
scrollable: 'horizontal',
region: 'center',
layout: 'hbox',
baseCls: '',
containerScroll: true,
items: [{
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}],
renderTo: Ext.getBody()
});
I have an item like so (JSFiddle Demo):
{
region: 'west',
title: 'Instead of toolbar',
collapsible: true,
width: 250,
tbar: [{
xtype: 'button',
text: 'Button',
style: {
background: 'green'
},
handler: function() {}
}]
}
I want my tbar instead of the title like (1->2)
I tried to remove title but it's not working. How to do that thanks :).
Get rid of the header and add the same collapse tool to the toolbar:
{
region: 'west',
collapsible: true,
header: false,
width: 250,
tbar: [
{
xtype: 'button',
text: 'Button',
style: {
background: 'green'
},
handler: function (){}
},
'->',
{
type: 'left',
xtype: 'tool',
handler: function(t) {
this.up('panel').collapse();
}
}
]
}
I am using ExtJS HTMLEditor and set the properties as follows-
{ xtype: "htmleditor", width: 500, height: 250}
While entering the text, after reaching the specified height, the toolbar gets disappeared.
I tried removing the height and setting autoHeight: true but in both cases the HTML editor does not fit to the window (HTMLEditor is inside Ext.form.FormPanel).
Anyone having idea to solve it.
This is my code
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'This is Title',
resizable: false,
modal: true,
height: 300,
width: 500,
layout: 'fit',
closeAction: 'hide',
items: [
new Ext.form.FormPanel({
border: false,
autoHeight: true,
items: [
{ allowBlank: false, xtype:
"htmleditor", height: 250, width: 600, anchor:'100%'}
]
})
],
buttons: [
{text: 'Ok' },
{text: 'Cancel'}
]
}).show();
});
I have solved the problem- Added layout: 'fit' to Formpanel
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'This is Title',
resizable: false,
modal: true,
height: 300,
width: 500,
layout: 'fit',
closeAction: 'hide',
items: [
new Ext.form.FormPanel({
border: false,
layout: 'fit', // This fixed the issue
items: [
{ allowBlank: false,
xtype: "htmleditor",
height: 250,
width: 600
}
]
})
],
buttons: [
{text: 'Ok' },
{text: 'Cancel'}
]
}).show();
});
I have made a layout of tab panel with extjs designer but its not displaying anything if I am running it.
Here's the code please help me :
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'extjs/s.gif';
Ext.onReady(function(){
MyTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
width: 800,
height: 500,
title: 'Ledger',
itemId: 'ledger_tab',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'Ledger',
autoScroll: true,
items: [
{
xtype: 'editorgrid',
title: 'Ledger',
store: 'store',
height: 150,
footer: true,
stripeRows: true,
header: true,
loadMask: true,
id: 'leg_grid_up',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'textfield'
}
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'datefield'
}
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'checkbox',
boxLabel: 'BoxLabel'
}
}
],
tbar: {
xtype: 'toolbar',
height: 50,
items: [
{
xtype: 'container',
layout: 'column',
width: 794,
height: 43,
items: [
{
xtype: 'spacer',
width: 588,
height: 18
},
{
xtype: 'spacer',
width: 200,
height: 18
},
{
xtype: 'datefield'
}
]
}
]//toolbar items
}
},
{
xtype: 'container',
height: 70
},
{
xtype: 'editorgrid',
title: 'Ledger',
height: 150,
id: 'leg_grid_down',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'textfield'
}
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'datefield'
}
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'checkbox',
boxLabel: 'BoxLabel'
}
}
],
tbar: {
xtype: 'toolbar'
}
},
{
xtype: 'container'
}
]//ledger panel
}
];//this
MyTabPanelUi.superclass.initComponent.call(this);
}
});
});
});
You need to render it onto some HTML tag. You can use the renderTo property to render the panel onto the body tag or some div tag with an id set.
Let's assume you are planning to render to the body tag. You need to add renderTo : Ext.getBody(). The Ext.getBody method simply returns the body tag.
MyTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
width: 800,
height: 500,
renderTo: Ext.getBody(),
.
.
.
You aren't rendering it.
Try rendering it to Ext.getBody():
MyTabPanelUi.render(Ext.getBody());