How to replace some text with something in extJS? - extjs

Have question: I have in my database some filed with text (i submitted it through form).
Then I have extJS Panel where my data. I made, when i click on soem field, appears message Box with plain text only (But in my database this text is very beautiful with ul's, with /br/'s and so son) :( Its ok, but my eyes can't read this normally! How to avoid this? Maybe in extJS exists some replace params? replace('/n/', '//br/').. or?
my grid
var Grid = new Ext.grid.GridPanel({
id : 'grid',
store : store,
frame : true,
autoScroll :true,
columns : my_columns,
stripeRows : true,
title :'Answers',
iconCls : 'arrow',
listeners: {
celldblclick: function(Grid, rowIndex, cellIndex, e){
var rec = Grid.getStore().getAt(rowIndex);
var columnName = Grid.getColumnModel().getDataIndex(cellIndex);
Ext.Msg.show({
title : 'Message',
msg : rec.get(columnName),
modal : true,
autoWidth : true,
maxHeight : 500,
autoScroll : true,
closable : true,
resizable : false,
draggable : false,
maxWidth : 500,
buttons : Ext.Msg.OK
});
Ext.Msg.getDialog().dd.lock();
}
}
});

Hard to understand your problem - you talk about a panel, then you post an example with grid.
Anyway... maybe the problem is that the message dialog window has preventBodyReset: false by default, which means that the default browser styles for <ul> and many other elements are reset.
Unfortunately there is no easy way to set preventBodyReset: true for the message box window. If you want it for all message boxes, then maybe you can achieve something with code like that:
Ext.MessageBox.getDialog().getEl().addClass('x-panel-reset');
If you don't want to apply it globally, then you probably have to create your own message window.

try using the escape function.
So something like:
Ext.Msg.show({
title : 'Message',
msg : escape(rec.get(columnName)),
modal : true,
autoWidth : true,
maxHeight : 500,
autoScroll : true,
closable : true,
resizable : false,
draggable : false,
maxWidth : 500,
buttons : Ext.Msg.OK
});

Related

Extjs - override collapse function

i'm new of Extjs; i have a panel with the item "collapsible: true" and it works fine but...
when my specific condition is true, i want to collapse the panel, and i want to disable the button used to expand it (therefore the panel doe not show anymore, even if the click is made).
It's possible do it?
I want a type of override method that doing other things, for example to show a div with few specific information in the page.
I use only javascript and Extjs.
thanks in advance and happy holidays
I added a bindable version
Fiddle
Using databinding to collapsible, you might also add the binding to the collapsed param
Please see my snippet. Can it resolve your issue ? Tell me if you have any question.
https://fiddle.sencha.com/fiddle/1fk9
Ext.application({
name : 'Fiddle',
launch : function() {
var parent = Ext.create('Ext.container.Container', {
title : 'Demo',
renderTo : Ext.getBody(),
layout : 'vbox',
items : [{
xtype : 'checkbox',
fieldLabel : 'Enable collapsible',
handler : function(self, v){
var panel = parent.down('panel');
panel.collapseTool.setVisible(v);
panel.getHeader().down('tool[type=up]').setVisible(!v);
},
checked : true
}, {
xtype : 'panel',
width : 500,
height : 400,
title : 'Collapsible demo',
collapsible : true,
tools : [{
type : 'up',
hidden : true
}]
}]
});
}
});

How to hide horizontal line in extjs

this.horizontalLine = {
xtype: 'box',
hidden: false,
autoEl : {
tag : 'hr'
}
};
I want to hide this horizontal line. But
this.horizontalLine.hide()
is undefined.
I tried using this.horizontalLine.hidden = true also. In that case, hidden property is set as true but the line is still visible. Is there some other way to do this?
I resolved the issue by placing the horizontal line in a panel and hiding the panel insted.
this.rulesLabel = new Ext.form.Label({
text : 'Rules:',
style : 'font-size:11px;font-weight:bold;color:#15428B;padding-right:10px;padding-top:50px; margin-left:10px;'
});
this.horizontalLine = {
xtype: 'box',
autoEl : {
tag : 'hr'
}
};
this.lineHolder = new Ext.Panel({
id: 'lineHolder',
hidden : true,
border: false,
layout : 'form',
bodyStyle : 'padding-top:10px;',
items : [{xtype: 'box'},this.rulesLabel, this.horizontalLine]
});
I used this.lineHolder.show() and this.lineHolder.hide() to show and hide the line respectively.
Have you tried this.horizontalLine.hidden = true;
Ext.Component has a hide() method, so your code should work.
See a working example: https://fiddle.sencha.com/#fiddle/ku7

Disable File upload field in Extjs 3.0

I want to disable a file Upload field dynamically. Like I have a variable say isUploadAllowed. If this variable is true only then FileUpload field is enabled and user can click Browse button.. Else this button is disabled.. How to do it in ExtJs 3.0? I did find few examples but they were all of ExtJs 4.. I have tried:
FileUploadField.setDisabled(true);
but it's not working..
Here is my code, I want to disable it on reset button click!
var fileUploadField = new Ext.ux.form.FileUploadField({
id : 'fileUpload',
name : 'upLoadedFile',
fieldLabel : 'Supporting File(s)',
width : 410,
convertToUpperCase : false,
tabIndex : 9,
allowBlank : true
});
var requestForm = new Ext.form.FormPanel({
id : 'requestForm',
labelAlign : 'right',
labelWidth : 130,
buttonAlign : 'right',
frame : false,
split : false,
fileUpload : true,
autoHeight : true,
collapsible : false,
width : 635,
monitorValid : true,
border : false,
bodyStyle : 'text-align:left;padding:10 10 10 10',
// Layout the form fields here.
items : [{
layout : 'column',
border : false,
items : [{
layout : 'form',
bodyStyle : "text-align:left",
border : false,
items : [fileUploadField]
}],
buttons : [{
id : 'submitBtn',
text : 'Submit',
formBind : true,
handler : doSubmit,
type : 'submit',
scope : this
}, {
text : 'Reset',
formBind : false,
type : 'reset',
handler : function() {
// disable file upload field
}
}]
});
try this:
fileUploadField.disable();
sometimes it works better. Also check letter case
I made a hasty comment before which was deleted. I had the same issue with the upload functionality not being disabled, even though I disabled the field. I realized that was due to Plupload which was enabled on that field, so to disable the upload functionality of the uploader I disabled Plupload:
uploader.disableBrowse(true);
So check if don't have some similar plugin working as well...and disable that as well. Hope that this will help someone...it gave me some headaches.

How to temporarily highlight editable columns of Ext JS grid panel (version 4.2.1)

I am using a grid panel from ExtJS 4.2.1. I have some column definitions with editor : 'textfield' (editable columns) and some without editor (read-only columns).
What I want?
I want to temporarily highlight the editable column with a background color at the on mouse over event to that specific column.
I request for help. Please guide. I have spent lot of time on it and all in vain :(
Regards,
Jagpreet Singh
TASK - When mouse is placed over columns Editable 1 and 2 below (having editor config option), I want the target column to be highlight temporarily with some bright color for few seconds.
Ext.define('XX.view.account.Portfolios', {
extend : 'Ext.grid.Panel',
plugins : {
ptype : 'cellediting',
clicksToEdit : 1
},
columns : [{
text : 'Read Only 1',
flex : 1,
sortable : true,
dataIndex : 'ro1'
}, {
text : 'Read Only 2',
flex : 2,
sortable : true,
dataIndex : 'ro2'
}, {
text : 'MV',
flex : 1,
sortable : true,
dataIndex : 'mv'
}, {
text : 'Editable 1',
flex : 1,
sortable : true,
dataIndex : 'e1',
editor : 'textfield'
}, {
text : 'Editable 2',
flex : 1,
sortable : true,
dataIndex : 'e2',
editor : 'textfield'
}
As Lorenz suggested you can catch the itemmouseenter event and then highlight the editable rows calling highlight method, in order to only highlight those cells that have editors associated you probably can use a class applied to those columns, and then select the matching elements on the mouse enter event handler, something like this:
itemmouseenter: function (grid, record, item, index, e, eOpts) {
var node = grid.getNode(record);
var cells = Ext.dom.Query.select('.editable-cell', node);
for (var i = 0; i < cells.length; i++) {
Ext.fly(cells[i]).highlight();
}
}
You can see a working sample here.
Hope it helps to solve your problem
another option here with CSS animation: https://fiddle.sencha.com/#fiddle/16a

Menu item in Ext-JS4

I am new to Ext-JS4. I am working on a project in which I am configuring a toolbar. I have added few buttons to the toolbar, one of which has a menu and the menu basically has a grid which is loaded from a JSON store. The grid is used within the menu due to such requirement in the project. The grid is loaded properly but I need access to the menu item being clicked within the menu. I want the text of the menu item which is clicked. The following code will better explain my question.
var store = Ext.create('Ext.data.Store', {
storeId : 'favStore',
model : favModel,
autoLoad : true,
groupField : 'group_header',
proxy : {
type : 'ajax',
url : '../../data/favorites.json',
reader : {
type : 'json',
root : 'favoritesMenu'
}
}
});
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false
});
var favMenu = Ext.create('Ext.menu.Menu', {
items : [favGrid],
listeners : {
'click' : function(store,item) {
alert('Item clicked= ');//tried item.text here but not working
}
}
});
In the alert method on the click event I want the text of the menu item clicked. I hope I am clear with the question. Can anyone give me some suggestions? Also can anyone suggest me some good blogs on Ext-JS4?
All these things are defined within the initComponent method of Ext.define() for toolbar.
You can use the documentation.
For me it was very usefull:
http://docs.sencha.com/ext-js/4-0/
I believe in your case you want the listener to be attributed to your grid, not the menu. Something like...
var favGrid = Ext.create('Ext.grid.Panel', {
store : store,
columns : [{
dataIndex : 'listItem',
width : 200
}],
features : [groupingFeature],
width : 200,
height : 275,
autoHeight : true,
border : false,
listeners: {
'itemclick': function(view, record, item, index, e, eOpts){
//Assuming 'name' is a fieldname in the record
alert('item clicked = ' + record.get('name'));
}
}
});
Check out the Ext.grid.Panel documentation here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel . Click on "events" at the top and find "itemclick".
or you can have your menu listen to the grid's event by relaying the events.
favMenu.relayEvents(favGrid, ['itemclick']);
favMenu.on('itemclick', me.onFavFunction, me);

Resources