Bind BasicForm to Ext.Toolbar - javascript

Hi I've got an Ext.Toolbar with form elements in it including a FileUploadField. I'd like to be able to submit this "form" using an Ext.form.BasicForm. How should I do this? Ideally it should behave as a FormPanel with a ToolbarLayout (though this doesn't render correctly).

I've just tried the other way and it seems to work ok (using a form inside a toolbar), at least for the rendering part...
You can try it out with this toolbar code...
var toolBarConversationList = new Ext.Toolbar({
items:[
{
xtype: 'button',
text: 'Some Button'
},
{xtype: 'tbfill'},
{
xtype: 'form',
id: 'toolbarForm',
border: false,
bodyStyle: {
background: 'transparent',
marginTop: 3
},
items: [
{
xtype: 'textfield',
name: 'form.text',
fieldLabel: 'Some Text'
}
]
}
});
If you want you can style up the label with labelStyle on each field. If you want to include more fields you could use a column layout and form layout for each of the fields.
To submit the form you could use Ext.getCmp('toolbarForm').getForm().submit();
I hope this is what you're looking for...

Related

ExtJS Can I use an IF statement inside the same component

I'm managing a software with a framework ExtJS 3.3.1.
My problem is that I want to use a component depending by the caller.
I have a region of a tabpanel and I want to use this pseudo-code:
items: [{
region: 'center',
title: 'List of Transmissions',
// PSEUDO CODE START
IF (RECEIVE A CALLER BY THIS COMPONENT) {
id: 'idTab1'
xtype: 'typeA'
}
ELSE IF(RECEIVE A CALLER BY THIS COMPONENT) {
id: 'idTab2'
xtype: 'typeB'
}
// PSEUDO CODE END
}]
Could someone help me to translate it in ExtJS 3.3.1 ?
Thank you
You can used binding function for hide/show typeA and typeB with a caller variable.
You can used afterrender or boxready listener for create you'r cmp after the load of the parent panel.
I can't create fiddle cause i don't have forum sencha account yet but you can tried with this code on this https://fiddle.sencha.com/ :
var callerVar = false;
new Ext.Panel({
renderTo: document.body,
items: [
{
xtype: 'panel',
html: 'firstPanel',
hidden: callerVar
},
{
xtype: 'panel',
html: 'scndPanel',
hidden: !callerVar
}
]
});
You to decide how to update callerVar, i don't how you want to do this.
Thanks to Enzo BLACHON and his idea.
I'm trying to solve using the layout:'card' and add/remove the ID. According to me even if it solve my problem, it's too compicated, I would like to ask if there is a manner less complicated and more useful to improve the quality of the code:
id: 'flip_ID',
region: 'center',
layout: 'card',
activeItem: 0,
items: [
{
itemId: 'idTab1',
xtype: 'typeA'
},
{
itemId: 'idTab2',
xtype: 'typeB'
}]
When there is a call to the first component I added this code:
var center = Ext.getCmp('flip_ID');
center.add(Ext.ComponentMgr.create({
itemId: 'idTab1',
xtype: 'typeA'
}));
center.getLayout().setActiveItem('idTab1');
center.remove('idTab2', true);
When there is a call to the second component I added this code:
var center = Ext.getCmp('flip_ID');
center.add(Ext.ComponentMgr.create({
itemId: 'idTab2',
xtype: 'typeB'
}));
center.getLayout().setActiveItem('idTab2');
center.remove('idTab1', true);

Is it possible to append one xtype to another in Ext JS

Is there any way to append two xtypes in single. I mean i have one xtype as textfield and other one as button.
Here i am giving the code for a button next to a textfield and its working.
But now i need both the textfield and button in single.
{
layout: "column",
anchor: "0",
items: [{
columnWidth: .5,
layout: "form",
items: {
xtype: "textfield",
name: "agent",
fieldLabel: "Representant",
anchor: "0"
}
},{
columnWidth: .5,
items: {
xtype: 'button',
text: 'Click me'
}
}]
}
xtype or widget
A xtype is a sort of a shortconstructor for a class. What you can nest inside a class depends on the class. As for a textfield you can't append any childs. You should take a look at the API if you want more info about any class. Basicly you can nest them as you did it in your question
For what you want
To makes this really clean you could either extend textfield, use triggerfield (this one has already buttons where you can change the layout) or write a plugin which then can get appended to any appropriate field.
Comment Answer
You can try the following untested code! Instead of a composite field you could also use a container with a applied hbox layout. But this feels more suitable for me.
{
xtype: 'compositefield',
labelWidth: 120
items: [
{
xtype : 'textfield',
fieldLabel: 'Title',
flex : 1,
ref : '../myTextfieldRef' // set a selfreference to the ownerCt
},
{
xtype : 'button',
iconCls : 'icon-class-name',
text : 'My Button Text',
width : 20,
ref : '../myButtonRef', // set a selfreference to the ownerCt
handler : function(btn) {
console.log(btn.ownerCt.myTextfieldRef.value);
}
}
]
}
For your requirement, as being said by sra, it is better to use triggerfield (or twinTriggerField if you have two buttons).
For combining other fields, you can also take a look at compositeField.

How to bring text right to textfield in extjs4

I have a form panel with one text field. I want to do something like this:
fieldLabel : ___________________ in Kilos.
How can I bring in Kilos to the right side of the text field in extjs4?
Using afterLabelTextTpl does not cut it, I want it to show immediately after the textfield.
Any suggestions on how I can achieve this?
Here's an example of what I do in my application:
{
xtype: "fieldcontainer",
layout: "column",
width: 300,
items: [
{
xtype: "textfield",
fieldLabel: "fieldLabel",
width: 200
},
{
xtype: "displayfield",
value: "in Kilos",
width: 100
}
]
}

Button inside of an input field Sencha Touch 2.0

What I try to achieve is something alike this:
Only then in a Sencha Touch application.
I have achieved an input field with a button next to it but not a button inside of a input field.
Is there a way to get this functionality in Sencha Touch 2? (without using css to float the button above the input.
you can achieve this, let's try:
{
xtype: 'textfield',
component: {
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'textfield',
flex: 3,
},
{
xtype: 'button',
flex: 1,
text: 'test'
}
]},
},
Explanation: component is a special config for input fields and by default, it's set to {xtype: "input", type: "text"}, that's the key of this work-around. Scale your textfield vs button widths with flex config
Hope it helps. :)

Ext js FormPanel is not showing panel items when toolbar is present

I seem to be having a weird issue here. An extended component has the following code:
MyApp.panels.RelationshipDetails = Ext.extend(Ext.FormPanel, {
closable: true,
relationshipId: null,
documentId: null,
title: 'Relationship',
initComponent: function () {
if (!this.verifyRequiredData()) {
MyApp.panels.RelationshipDetails.superclass.initComponent.call(this);
return;
}
// Build components
this.tbar = this.buildToolbar();
this.items = this.buildDetailItemArray();
MyApp.panels.RelationshipDetails.superclass.initComponent.call(this);
},
verifyRequiredData: function () {
// Verification code here
},
buildDetailItemArray: function () {
return [{
xtype: 'fieldset',
title: 'Details',
collapsible: true,
autoHeight: true,
items: [{
xtype: 'hidden',
name: 'Id'
}, {
xtype: 'textfield',
fieldLabel: 'Name',
name: 'Name'
}, {
xtype: 'textfield',
fieldLabel: 'Description',
name: 'Description'
}, {
xtype: 'button',
text: 'Save',
name: 'saveButton'
}]
}];
},
buildToolbar: function () {
return new Ext.Toolbar({
// Toolbar Config
});
}
});
The issue is that when this panel renders, the toolbar is the only thing that renders. Through debugging I can see that BuildDetailItemArray() is being called correctly and returning the correct result.
It gets even weirder when I comment out the this.tbar = line, because when the toolbar is not present, the fieldset and field renders correctly. This occurs even if I extend Panel instead of FormPanel. I also tried abstracting out the form fields into it's own component, and the same thing occurs.
Anyone have any idea why this doesn't seem to work?
What sort of layout are you trying to put this panel into? Also, are you setting a height for this panel?
Often, if you aren't specifying a height for the component to be added (in your case, this panel), or you're not setting an anchor if using an AnchorLayout, component content won't be shown, but the toolbar still will.
It'd be good to know the context of this panel in your overall layout.

Categories