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
}]
}]
});
}
});
Related
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
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.
I created register panel and added toolbar with button during view initialization, In controller i am creating form panel and adding it to the register panel dynamically.
The toolbar in register panel is adjusting based on device screen but, The form panel width is not changing.
If i set width for the form panel, The form panel is floating and width remains the same.
This is what i done so for.
Ext.define('Form.view.RegisterForm',{
extend : 'Ext.Panel',
xtype : 'register',
id : 'register',
initialize : function() {
console.log("register init");
var submit = {
xtype : 'button',
width : '100px',
ui : 'action',
text : 'Submit',
handler : this.onSubmitTap,
scope : this
};
var topToolbar = {
xtype : 'toolbar',
docked : 'top',
id : 'registerToolbar',
title : 'Form',
items : [{
xtype : 'spacer'
}, submit]
};
this.add(topToolbar);
},
config : {
fullscreen : true,
layout : {
type : 'vbox'
},
title : 'Register'
},
onSubmitTap : function() {
console.log("onSubmit");
this.fireEvent('submitCommand', this);
}
});
In Register controller i adding fields dynamically
// RegisterFormController.js
oncreateForm : function() {
var form = {
xtype: 'formpanel',
flex : 1,
id: formId,
name: formId
};
Ext.getCmp('register').add(form);
}
// calling onCreateComponent method with xtype, label, value and fromId
onCreateComponent : function(fxtype,flabel,fname,fvalue,id) {
Ext.getCmp(id).add({
xtype: fxtype,
label: flabel,
name: fname,
value: fvalue,
labelWrap:true
});
}
In case any of you came up with same problem.
The mistake i did was "I added the 4 radio buttons in a hbox panel so width of that panel increased that's why the whole form panel not displaying properly in different devices".
After i changed the panel layout as vbox, The problem solved.
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);
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
});