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. :)
Related
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);
I have a grid with cell editing plugin on it. When i click the cell i want to edit, sometimes the dropdown list of the combo box is behind the grid/window (I can not see it, but if i modify the window size i can see the combo box items behind it).
My code looks like this (I have a window which contains this form):
items: [{
xtype: 'form',
items: [
me.currentMultipleValuesGrid = Ext.create('Ext.grid.Panel', {
store: me.gridStoreToValidate,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
delay: 10
})],
listeners: {
validateedit: function (editor, cell, eOpts) {
//cell.cancel = true;
}
},
columns: [{
header: GTR(CLNAME(me), 'colSource.Text', 'Source'),
dataIndex: 'source',
flex: 1
}, {
dataIndex: 'name',
header: GTR(CLNAME(me), 'colLinkDestination.Text', 'Link destination'),
editor: {
xtype: 'combobox',
queryMode: 'local',
valueField: 'nr',
displayField: 'name',
store: me.comboBoxEditorStore,
listeners: {
change: function (thisCmb, newValue, oldValue) {
},
beforerender: function (thisCmb, eOpts) {
}
}
},
flex: 1
}, {
dataIndex: 'linkdestination',
hidden: true
}]
})]
}]
I think it is a layout problem, so I tried different layouts (anchor and fit) assigned to window, grid or form, with various combinations of them. No success so far. Any ideas? Thank you. I am using Extjs 4.0.7
I solved this a while ago. Came back to post the answer, in case someone needs it. It seems it is a Sencha bug, which causes the drop down list to be displayed behind the window, when the window is modal (like it was in my case). I managed to make a workaround, by assigning a css class to the drop down list of the combo, by adding this in combo settings :
listConfig: { cls: 'clsZIndexMax' }
where clsZIndexMax is my css class containing z-index: 100000 !important;
PS: I had this bug in version 4.0.7, don't know if they already solved it in future versions.
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.
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
}
]
}
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...