Good evening dear fellow programmers!
I have a question regarding persistant panels in ExtJS. I have a few form panels that I want to display inside a single container panel. The displayed form depends on the type of object that the user is editing. As far as I understand, this can be achieved by the following 3 statements:
removeAll(true)
add(persistent form panel)
doLayout()
The problem is that this doesn't seem to work. If using 2 different persistent form panels, they both stick to the container panel. The strange thing is that it does seem to work when I don't use persistent panels, but recreate the form panels every time I add them to the container:
removeAll(true)
add(new form panel())
doLayout()
See a working example below:
<script type="text/javascript" language="javascript">
Ext.namespace("Ext.ARA");
Ext.onReady(function()
{
Ext.ARA.AddFormPanelDoesntWorkA = function()
{
Ext.ARA.ContainerPanel.removeAll(false);
Ext.ARA.ContainerPanel.add(Ext.ARA.FormPanelA);
Ext.ARA.ContainerPanel.doLayout();
}
Ext.ARA.AddFormPanelDoesntWorkB = function()
{
Ext.ARA.ContainerPanel.removeAll(false);
Ext.ARA.ContainerPanel.add(Ext.ARA.FormPanelB);
Ext.ARA.ContainerPanel.doLayout();
}
Ext.ARA.AddFormPanelDoesWorkA = function()
{
Ext.ARA.ContainerPanel.removeAll(true);
Ext.ARA.ContainerPanel.add(new Ext.form.FormPanel({title:'Form Panel A', padding:5, items:[new Ext.form.TextField({fieldLabel:'Panel A Field', anchor:'100%'})]}));
Ext.ARA.ContainerPanel.doLayout();
}
Ext.ARA.AddFormPanelDoesWorkB = function()
{
Ext.ARA.ContainerPanel.removeAll(true);
Ext.ARA.ContainerPanel.add(new Ext.form.FormPanel({title:'Form Panel B', padding:5, items:[new Ext.form.TextField({fieldLabel:'Panel B Field', anchor:'100%'})]}));
Ext.ARA.ContainerPanel.doLayout();
}
Ext.ARA.FormPanelA = new Ext.form.FormPanel({title:'Form Panel A', padding:5, items:[new Ext.form.TextField({fieldLabel:'Panel A Field', anchor:'100%'})]});
Ext.ARA.FormPanelB = new Ext.form.FormPanel({title:'Form Panel B', padding:5, items:[new Ext.form.TextField({fieldLabel:'Panel B Field', anchor:'100%'})]});
Ext.ARA.ContainerPanel = new Ext.Panel
({
title:'Container Panel',
bbar:new Ext.Toolbar
({
items:
[
{text:'AddFormPanelDoesntWorkA', handler:Ext.ARA.AddFormPanelDoesntWorkA},
{text:'AddFormPanelDoesntWorkB', handler:Ext.ARA.AddFormPanelDoesntWorkB}, '->',
{text:'AddFormPanelDoesWorkA', handler:Ext.ARA.AddFormPanelDoesWorkA},
{text:'AddFormPanelDoesWorkB', handler:Ext.ARA.AddFormPanelDoesWorkB}
]
})
});
Ext.ARA.Mainframe = new Ext.Viewport({layout:'fit', items:[Ext.ARA.ContainerPanel]});
});
</script>
What is the proper way to use persistent form panels in ExtJS? What am I doing wrong here?
I tried your example and made a few tweaks and didn't get it to work and then I realised that I'd have used a CardLayout for this sort of display. See the LayoutBrowser where it is demonstrated using a 'Wizard' type of display. I think it'll give you what you need.
Related
Our testing team require IDs or class values to be set on the HTML elements in our message popup boxes. This is for their automated tests.
I can pass in a class value for the dialog panel by passing in a cls value like so:
Ext.Msg.show({
title:'Reset Grid Layout',
msg: 'Are you sure that you want to reset the grid layout?',
cls:'Reset-Grid-Layout-Message',
buttons: Ext.Msg.YESNO,
fn: function (response) {
if (response == 'yes') {
}
},
icon: Ext.window.MessageBox.QUESTION
});
Now we also need it on the buttons, and also on the text being displayed. Is there some way of getting a cls value onto the buttons?
I was thinking it may be possible to expand the button parameter into something like :
buttons : [{name:'but1', cls:'asdf'}, {name:'but2', cls:'asdf2'}]
But google is not giving me back anything useful.
If your testing team uses Selenium for their automated test, adding ids/classes in every component could be difficult for both of you.
Overriding components in Ext is a good solution, but I don't recommend this because it will affect all your components. Unless you know what you're doing.
I suggest, extend Ext.window.MessageBox and generate classes for your buttons based on your parent cls.
// Put this somewhere like /custom/messagebox.js
Ext.define('App.MyMessageBox', {
extend: 'Ext.window.MessageBox'
,initConfig: function(config) {
this.callParent(arguments);
}
,makeButton: function(btnIdx) {
var me = this;
var btnId = me.buttonIds[btnIdx];
return new Ext.button.Button({
handler: me.btnCallback
,cls: me.cls + '-' + btnId
,itemId: btnId
,scope: me
,text: me.buttonText[btnId]
,minWidth: 75
});
}
});
To use:
App.Box = new App.MyMessageBox({
cls:'reset-grid-layout'
}).show({
title:'Reset Grid Layout'
,msg: 'Are you sure that you want to reset the grid layout?'
,buttons: Ext.Msg.YESNO
,icon: Ext.window.MessageBox.QUESTION
});
Your buttons will have reset-grid-layout-yes and reset-grid-layout-no class.
You can do the same with other components you have. Check out the Fiddle. https://fiddle.sencha.com/#fiddle/7qb
You should refer to the API
cls : String A CSS class string to apply to the button's main element.
Overrides: Ext.AbstractComponent.cls
You can also use the filter on right side (not the one in the right top corner). Just type cls and you will see all properties, methods and events containing cls (note that you see by default just public members, use the menu on the right of this searchfield to extend this)
Edit
If you just need it for testing purpose I would recommend to override the responsible method. This should work (untested!)
Ext.window.MessageBox.override({
buttonClasses: [
'okCls', 'yesCls', 'noCls', 'cancelCls'
],
makeButton: function(btnIdx) {
var btnId = this.buttonIds[btnIdx];
var btnCls = this.buttonClasses[btnIdx];
return new Ext.button.Button({
handler: this.btnCallback,
cls: btnCls,
itemId: btnId,
scope: this,
text: this.buttonText[btnId],
minWidth: 75
});
}
});
I'm trying to save the visual state of a panel. The Panel consists of two child containers, with hbox/flex layout and a splitter between them.
{
xtype:'panel',
layout: {
align: 'stretch',
type: 'hbox'
},
items:[
{
xtype:'container',
title: 'left panel',
flex:1
},
{
xtype:'splitter'
},
{
xtype:'container',
title: 'left panel',
flex:2
}
]
}
I already have a working state manager. The "left panel" contains a grid, and the grid is storing it's column states just fine. The state manager fires from a controllers init function by:
var stateProvider=Ext.create('Ext.state.LocalStorageProvider');
Ext.state.Manager.setProvider(stateProvider);
The grid uses the framework standard approach for storing it's state by setting stateId: 'GridState' and stateful:true.
However I'm unable to figure out how ExtJS want's me to do the same with the flex values of the main layout. I've tried setting stateful and stateId on the splitter. I've tried without events, and with stateEvents: ['move']. I've also tried setting stateful on the leftpanel and with stateEvents to resize. Finally I've tried setting stateful on the parent panel, with and without stateEvents: afterlayout.
I do know that it's possible to fetch the event after the splitter is moved. Then I could store the flex values as custom states and manually look for them somewhere in the layout/render process, however I guess there must be a more standard approach for a problem that seems so trivial.
What is the standard framework approach for storing the "splitter position" / "flex values" of a hbox/vbox layout?
Yes there is a standard way to add states. And there is no default state for your splitter so you'll have to add these functions:
Example state:
getState: function () {
var me = this;
var state = {};
state.yourCustomState = 'state'; //you can save what you want
return state;
},
applyState: function (state) {
var me = this;
if (state && state.yourCustomState) {
//Do stuff
}
}
And you need your state to be triggered, you can use stateEvents: http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.resizer.Splitter-method-addStateEvents
You can add the resize event to your stateEvents.
I've been using the ExtJS grid row editing plugin pretty liberally for CRUD operations in web applications. Now, I have a requirement to allow a database record to be edited along with a related collection/array (from another datastore) using this row editing plugin.
To do this I want to insert drag-n-drop grids inside of a row that has been selected for editing, one grid showing the available (unused) collection items on the left and another grid to hold the defined collection items on the right.
To illustrate what I am trying to do, here is the normal row editing plugin with a row selected for editing:
I am trying to do this (drag-n-drop grids inside of row editor div):
To do this I have been trying to simply run something like Ext.getCmp(???).add(myDnDGridPanel); but I haven't found the right thing to attach this to (what to put in the question marks).
It seems reasonable enough to use this plugin to edit the related collection/array along with the database record. Does anyone know a simple way to add items to this row editor div?
Or... will I have to hack/extend the plugin to accomplish this?
Below is example RowEditing plugin modification which allows to add additional components. In this demo this is only a button, but it should be easy to customize.
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
beforeedit: function(editor, e, eOpts) {
var body = this.editor.body;
var container = body.down('.container-for-extra-content');
if (!container) {
container = Ext.core.DomHelper.insertAfter(body.last(), '<div class="container-for-extra-content"></div>', true);
container.setWidth(this.editor.body.getWidth(true));
container.setHeight(this.extraHeight);
this.editor.getEl().setHeight(this.editor.getEl().getHeight() + this.extraHeight);
this.editor.body.setHeight(this.editor.body.getHeight() + this.extraHeight);
var panelConfig = {
renderTo: container,
items: [this.extraComponent]
};
Ext.create('Ext.Panel', panelConfig);
}
},
delay: 1
},
extraHeight: 100,
extraComponent: {
xtype: 'panel',
items: [
{ xtype: 'button', text: 'Aloha!' }
]
}
});
Here is working sample: http://jsfiddle.net/e2DzY/1/
I have created a form that displays values in plain displayfields.
There is an "edit" button next to the form and once clicked by the user, the displayfields should switch to being textfields and will, therefore, make the data editable.
This, I am guessing, would be achieved by having two identical forms, one editable and one not and one or the other would be visible, based on the user having clicked the button. Another way, perhaps, is to have the xtype dynamically selected upon clicking the button.
Can anybody point me towards a certain direction in order to do this? I am a complete newbie to ExtJS and only just started learning ExtJS4.
Thank you in advance.
M.
Start by rendering all fields as input fields with disabled:true. Then use this for the Edit button handler:
...
form.getForm().getFields().each(function(field) {
field.setDisabled( false); //use this to enable/disable
// field.setVisible( true); use this to show/hide
}, form );//to use form in scope if needed
Ext.getCmp('yourfieldid').setFieldStyle('{color:black; border:0; background-color:yourcolor; background-image:none; padding-left:0}');
Ext.getCmp('yourfieldid').setReadOnly(true);
You can toggle based on a property isEditable. Then when you click the button you change the property and just remove and add the form. It makes it cleaner if you are switching back and forth.
Ext.define('E.view.profile.information.Form', {
extend: 'Ext.form.Panel',
xtype: 'form',
title: 'Form',
layout: 'fit',
initComponent: function () {
this.items = this.buildItems();
this.callParent();
},
buildItems: function () {
return [this.buildInvestmentPhilosophy()];
},
buildInvestmentPhilosophy: function () {
var field = {
name: 'investmentPhilosophy',
xtype: 'displayfield',
editableType: 'textarea',
grow: true,
maxLength: 6000,
value: '---',
renderer: E.Format.textFormatter
};
this.toggleEditingForForm(field);
return field;
},
toggleEditingForForm: function (form) {
if (this.isEditable) {
Ext.Array.each(form, this.configureFieldForEditing, this);
}
},
configureFieldForEditing: function (field) {
if (field.editableType) {
field.xtype = field.editableType;
}
}
});
You can also try to have two items : a displayfield and a textfield with the same data source and you could hide/show the right item with your button handler.
You should not have any CSS problems
(If you did not have CSS problems I would enjoy to see you code)
When the user clicks on this element, I want it to show an alert.
However, when I click on the DIV that this Panel generates, nothing happens.
How can I make an alert execute when the user clicks on the following panel?
var content = new Ext.Panel({
region:'center',
margins:'5 0 5 5',
cls:'empty',
bodyStyle:'background:ivory; font-size: 13pt',
html:'<p id="test123">This is where the content goes for each selection.</p>',
click: function() {
alert('was clicked');
}
});
You haven't accepted an answer, so I'll assume you're still unclear on this. Here are a few pointers...
First, as coded your Panel will render as a plain square. If you're expecting it to look like a Panel, you should give it a title (so the title bar will render).
Second, as mentioned, click is not a Panel event (it's an Element event). So you have several ways of getting to the behavior you want. You can manually attach a listener to the underlying DOM element after the Panel is rendered:
Ext.get('txest123').on('click', function(){
alert('foo');
});
You could also do as I mentioned in the comments of another answer to generically handle any body click:
// .body is a Panel property for the body element
content.body.on('click', function(){
alert('foo');
});
If you really want to restrict the click to only the child p you could add a check:
// e is the event object, t is the target DOM node
content.body.on('click', function(e,t){
if(t.id == 'txest123'){
alert('clicked the p');
}
});
If I was coding this, I'd probably do something more like this:
var content = new Ext.Panel({
region:'center',
renderTo: document.body,
margins:'5 0 5 5',
cls:'empty',
title: 'My Panel',
id: 'txest123',
bodyStyle:'background:ivory; font-size: 13pt',
html:'This is where the content goes for each selection.',
listeners: {
'render': {
fn: function() {
this.body.on('click', this.handleClick, this);
},
scope: content,
single: true
}
},
handleClick: function(e, t){
alert(this.id); // the panel
alert(t.innerHTML); // the clicked el
}
});
Now the id is on the Panel (where it should be) and you can use Panel and/or Element methods to access child elements as needed. It's best to keep id's at the highest level possible. You'll notice too that the callback function is executed in the scope of the Panel (scope:this) so that inside handleClick you can treat this as the Panel itself and access any of its properties or methods.
So, without knowing exactly what you're trying to achieve, I can't provide you with the exact code you need. However, this should hopefully give you some ideas.
EDIT: I meant to say this originally... in your code (as posted) you are not actually rendering the Panel. As I mentioned in my answer to your related question, if you are adding the Panel as an item to a container that is lazy-rendered, the Panel's DOM won't be available for selection until after the container has rendered it. In my code above I added renderTo so that I don't have this issue, but if you're not doing that you'll have to wait until the Panel is rendered at some time later to access it.
The Panel Component does not expose a click event, so the one you're passing into the config never gets fired.
Try putting an id on your Ext.Panel object and then getting its element using Ext.get(). Then add a click event through on():
var content = new Ext.Panel({
id: 'myPanel',
region:'center',
margins:'5 0 5 5',
cls:'empty',
bodyStyle:'background:ivory; font-size: 13pt',
html:'<p id="txest123">This is where the content goes for each selection.</p>'
});
Ext.get('myPanel').on('click', function() {alert('You clicked me');});
The following sample is a bit rough but it works for me. It is a panel with a box component, which is showing a thumbnail. When clicking on the thumbnail, it is showing a lightbox with slimbox2. Not pretty, but very effective. The hardcoded images are just for test here.
var panel = new Ext.Panel({
title : 'Image',
header : false,
frame : true,
border : false,
bodyStyle : 'padding : 5px',
width : 125,
items : [{
xtype : 'box',
height : 115,
width : 115,
listeners : {
'render': function() {
var id = Ext.id(this);
Ext.fly(id).addListener('click', function () {
jQuery.slimbox('thisisnotanimage', 'CBX');
});
}
},
autoEl: {
tag : 'div',
html : 'somehtmltagstuff'
}
}
]
});
According to the API, click is not a valid event for Panels... However, you should still be able to add the click event to the underlying DIV element.
Ext.fly(e.id).addListener('click', Ext.getCmp(e.id) , this);
I believe you need something like:
var content = new Ext.Panel({
region:'center',
margins:'5 0 5 5',
cls:'empty',
bodyStyle:'background:ivory; font-size: 13pt',
html:'<p id="test123">This is where the content goes for each selection.</p>',
listeners: {
click: function() {
alert('was clicked');
}
}
});