How to create something like:
var simple = Ext.widget({
xtype: 'form',
layout: 'form',
collapsible: true,
frame: true,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
}],
buttons: [{
text: 'Save',
}]
});
but when i click on collapse button stay visible?
Any Ideas?
It is possible to make this kind of behavior when panel is collapsed
enter image description here
an when it is expanded to show it with text and the icons align left to the text.
Related
I am trying to design a layout like the one shown in the image. I tried the following code
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
defaults: {
// applied to each contained panel
bodyStyle: 'padding:20px'
},
items: [{
// This is the component A in layout image
xtype: 'textfield',
fieldLabel: 'Text-1'
},{
// This is the component B in layout image
xtype: 'textfield',
fieldLabel: 'Text-2'
},{
// This is the component C in layout image
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
colspan: 2
}],
layout: {
type: 'table',
columns: 2,
align:'stretch'
},
});
}
});
But I'm not able to make the colspan work for the textarea field. The output of the above code looks something like this.
Can anyone please help me to make this one work?
PS: I tried emulating the table layout by creating a container - Hbox layout combination. That one works. But I still need to get this one working.
As #qmat suggests, you need to assign a percentage width to your textareafield, in order to give it the full width. The colspan is working as intended, but the textarea uses its standart width.
{
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
width: "100%", // <- gives the textarea the full width
colspan: 2
}
The align:'stretch' config has no effect, it is not an actual config of the table layout.
See the ExtJs 4.2.5 docs and the working Sencha Fiddle.
Hope This will work for you.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
items: [{
// This is the component A in layout image
xtype: 'textfield',
width:250,
emptyText :'A'
},{
// This is the component B in layout image
xtype: 'textfield',
width:250,
emptyText :'B'
},{
// This is the component C in layout image
xtype: 'textfield',
width:500,
colspan:2,
emptyText :'C'
}],
layout: {
type: 'table',
columns: 2
},
});
}});
You can check the link below and adjust width size as your requirment. Also add css if you want.
https://fiddle.sencha.com/#fiddle/1at3
I have a tall form panel, how can I make the bottom toolbar with the submit button floating at a fixed position at the bottom of the screen?
Ext.define('MyApp.view.myobj.MyPanel', {
extend:'Ext.Panel',
layout: 'fit',
items: [{
xtype: 'form',
defaultType: 'textfield',
items: [
{fieldLabel: 'Field'},
{fieldLabel: 'Field'},
],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
fixed: true,
items: [
{xtype: 'button', text: 'Submit', formBind: true}
]
}]
}],
});
Fiddle
I think you'll need the parent to have a layout defined (so it has an height), and use scrollable.
For example: https://fiddle.sencha.com/#fiddle/12ap
I have a toolbar with buttons that are hidden by default, and then shown based on the user's privileges. They appear and function after I call .show(), but do not appear in the overflow menu when the window is resized. The items that are initially shown appear in the overflow menu correctly.
Any advice on how I can fix this problem?
Thanks
Edit: Here's the simplest example I could come up with that works with fiddle for the problem. https://fiddle.sencha.com/#fiddle/877
Ext.onReady(function(){
var toolbar1 = Ext.create('Ext.toolbar.Toolbar', {
region: 'north',
layout: {
overflowHandler: 'Menu'
},
items: [{
xtype: 'textfield',
emptyText: 'FIX ME'
},{
xtype: 'button',
text: 'Test Lists',
id: 'testListsButton',
hidden: true
},{
xtype: 'button',
text: 'All Lists',
id: 'allListsButton',
},{
xtype: 'button',
text: 'Other Lists',
id: 'otherListsButton',
hidden: true
},{
xtype: 'button',
text: 'Email Lists',
id: 'emailListsButton',
hidden: true
}]
});
Ext.getCmp('emailListsButton').show();
Ext.getCmp('otherListsButton').show();
Ext.getCmp('testListsButton').show();
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border',
autoRender: true,
items: [
toolbar1
]
});
})
I found a work-around.
I set the items to be visible initially, hide them before they're rendered, and then show them again when checking the user's privileges. This properly displays the items in the overflow menu.
It looks like this is a bug, all be it a minor one.
i need to intimate the user that toolbar contains the scroll bar and there is some more buttons in the toolbar.
Any sample code for the issue.
thanks in advance...
You may try something like this (in Sencha Touch 2):
var toolbar = Ext.create('Ext.Panel', {
id: 'meetingList',
flex: 1,
scrollable: {direction: 'horizontal', indicators: false},
defaults: {width: 200},
items: [{
xtype: 'button',
text: 'Button1'
},{
xtype: 'button',
text: 'Button2'
},
....
]
});
i'm trying to load some content to an existing panel with #{component}.load({url:''}); but the panel has already some content, how do i clear the panel content?
See the panel method removeAll(...).
var panel = new Ext.Panel({
title: 'Panel',
id: 'panel',
layout: 'form',
items:
[
{
xtype: 'textfield',
fieldLabel: 'Text',
value: 'Textfield'
}
]
});
panel.removeAll(true);
Does this work for you?
Ext.getCmp('xxxxxxxxxxx').getStore().removeAll();
WHERE XXXXXXXXX IS YOUR STORE.