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.
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 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.
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.
I need a little help, I am building an app in Sencha Touch and I need to change the docked items within a container when a button is pressed. I assume this is the best way to alter the content within the app (i.e. switching between pages).
So far I have the following code -
var App = new Ext.Application({
name: 'Test',
useLoadMask: true,
launch: function () {
// Toolbar
Test.views.toolbar = new Ext.Toolbar({
id: 'toolbar',
title: 'Friend Pay'
});
// Content
Test.views.content = new Ext.Panel({
id: 'content',
layout: 'fit',
dockedItems: [{
cls: 'copy',
html: '<h2>Copy block</h2>'
}, {
xtype: 'button',
id: 'buttonPanel',
html: 'Request Payment',
handler: function () {
// Link to newBlock panel
}
}]
});
// Content
Test.views.newBlock = new Ext.Panel({
id: 'content',
layout: 'fit',
dockedItems: [{
cls: 'copy',
html: '<h2>Test 2</h2>'
}]
});
// Container
Test.views.container = new Ext.Panel({
id: 'container',
layout: 'fit',
dockedItems: [Test.views.toolbar, Test.views.content]
});
// Viewport - Entire screen
Test.views.viewport = new Ext.Panel({
fullscreen: true,
scroll: 'vertical',
items: [Test.views.container]
});
}
});
What function is required within the function() tag for the button handler to change the dockedItem within the container to be newBlock rather than content.
Many thanks for help in advance.
addDocked and removeDocked.
Test.views.viewport.removeDocked( Test.views.content )
Test.views.viewport.addDocked( Test.views.newBlock )
It seems a little odd you are adding content into dockedItems though, maybe you ment to add them to the normal items collection?
Either way, checkout everything available for Ext.Panel in the main api docs to familiarise yourself with the standard component functions.
layout:window-->tabpanel-->formpanel.
if i want submit formpanel,but have a lot formpanel,
i don't know how to do!
is layout problem ?
i'm java programmer.i use struts2+extjs...
Don't use multiple form panels.
Use:
new Ext.Window({
layout: 'fit',
items: {
xtype: 'form',
layout: 'fit',
items: {
xtype: 'tabpanel',
items: {
title: 'Tab 1',
layout: 'form'
}
}
}
});
After that, you only submit the one main form.