Related
I added dockedItems to my form.Panel, it aligns to the form, but I want the dockedItems align to the table inside the form, how should I do.
Here is the demo: https://fiddle.sencha.com/#view/editor&fiddle/3kso
Thanks!
Since you set the viewport's layout to fit, and you also specify a fixed width for the table (300 px), the form is ordered to occupy the remaining area, and that's why the toolbar is at the left edge.
Although you could try to make the toolbar floating and align it the the table, I think it is easier to let the form take only the space it needs, and therefore the toolbar will we aligned to the form.
To do so, at the end of your fiddle, try this code to change the viewport's layout:
Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
});
If you need the fit layout for some other reasons, you can keep the fit layout, and add the form within a container:
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
}]
});
Or if you need a panel that occupies all place, and you want a panel inside this with aligned toolbar, you can use and outside and an inside panel also (check the grey background to see the outside panel):
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
bodyStyle: {
background: '#eeeeee'
},
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
}]
});
The important thing is that by using vbox and middle in the layout the form will only occupy the place it needs.
EDIT 1:
To address the issues in the comments, here is a complete example that can be run as fiddle:
const form = Ext.create('Ext.form.Panel', {
autoScroll: true,
bodyStyle: {
background: '#abd1ca'
},
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '300px',
'background': '#e3f2fd',
'border-collapse': 'collapse',
}
},
tdAttrs: {
style: {
border: '1px solid #ccc',
padding: '6px',
}
}
},
fieldDefaults: {
labelWidth: 40,
width: '100%',
},
items: new Array(100).fill({
fieldLabel: 'sample',
xtype: 'textfield'
}),
dockedItems: [{
xtype: 'toolbar',
dock: 'left',
items: [{
iconCls: null,
glyph: 61,
xtype: 'button'
}, '-', {
iconCls: null,
glyph: 88,
xtype: 'button'
}, {
iconCls: null,
glyph: 70,
xtype: 'button'
}, '-', {
iconCls: null,
glyph: 47,
xtype: 'button'
}]
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
bodyStyle: {
background: '#eeeeee'
},
layout: {
type: 'hbox',
align: 'stretch',
pack: 'middle'
},
items: [form],
buttonAlign: 'center',
buttons: [{
text: 'Save',
handler: 'save',
}, ],
}]
});
I'm trying to add a combobox to a floating (popup) form panel in ExtJS. But I'm getting a "Cannot set property 'component' of null" error and the window will not load.
I use the following code in a controller to create the window:
onTreeAddDocClick: function () {
var f = new Ext.form.Panel({
frame: false,
header: false,
floating: true,
closable: true,
items: [{
xtype: 'addDoc'
}]
});
f.show();
}
The code for the window itself is as follows:
Ext.define('OPENhrm.view.dossier.widget.popup.AddDoc', {
extend: 'Ext.form.Panel',
xtype: 'addDoc',
requires: [
'Ext.layout.container.VBox'
],
controller: "dossier-addDoc",
viewModel: {
type: "dossier-addDoc"
},
id: 'addDocForm',
frame: true,
title: 'Add document',
width: 400,
bodyPadding: '10 10 0',
layout: 'form',
closable: true,
defaults: {
anchor: '100%',
allowBlank: false,
msgTarget: 'side',
labelWidth: 50
},
items: [{
// item selector
xtype: 'filefield',
emptyText: 'Select Document',
fieldLabel: 'Document',
name: 'filePath',
id: 'filePath',
buttonText: 'upload document',
buttonConfig: {
icon : '/resources/images/icons/add.jpg'
}
}, {
xtype: 'combo',
fieldLabel: 'Test',
hiddenName: 'test',
store: new Ext.data.SimpleStore({
data: [
['Test1'],
['Test2']
],
id: 0,
fields: ['text']
}),
valueField: 'text',
displayField: 'text',
triggerAction: 'all',
editable: false
}],
// buttons
buttons: [{
text: 'Add',
handler: 'onAddDockClick'
}, {
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
}]
});
If I remove the combobox, the window works just fine. If I place the combobox in a form somewhere else in my application (e.g. on a page with 2 panels; a searchfilter/form and a grid with search results), it works just fine. That other page however, is not a floating/popup window.
I got it to work by defining the whole page in the controller, but as I'm using a MVC structure, that doesn't seem like the way to go. Does anyone know how to get the combobox to work in a floating window, without putting the whole code for that window in the controller?
Learning Sencha Touch, and already love it. Much better then JQTouch in my opinion. Just working on some app idea I had, and I need to have 2 tabs where the first tab will hold a ext.List with some data. I've come this far, but have one problem I can't figure out.
Problem: The detailpanel won't show when I touch a name from the list. When it wasn't in a tab panel, I had no problems at all. Tried the forums, can't find the solution.
This is my entire code (based upon many examples):
ShotjesApp = new Ext.Application({
name: "Shotjes",
launch: function() {
ShotjesApp.detailPanel = new Ext.Panel({
id: 'detailpanel',
tpl: 'Omschrijving: {Naam} <br> <br> {Inhoud}',
dockedItems: [
{
xtype: 'toolbar',
items: [{
text: 'terug',
ui: 'back',
handler: function() {
ShotjesApp.Viewport.setActiveItem('listwrapper', {type:'slide', direction:'right'});
}
}]
}
]
});
ShotjesApp.listPanel = new Ext.List({
id: 'disclosurelist',
store: ListStore,
itemTpl: '<div class="contact">{Naam} {Basis}</div>',
grouped: true,
onItemDisclosure: function(record, btn, index) {
var naam = record.data.Naam;
ShotjesApp.detailPanel.update(record.data);
ShotjesApp.Viewport.setActiveItem('detailpanel') //THIS WON'T WORK?
ShotjesApp.detailPanel.dockedItems.items[0].setTitle(naam);
}
});
ShotjesApp.listWrapper = new Ext.Panel ({
id: 'listwrapper',
layout: 'fit',
items: [ShotjesApp.listPanel],
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'Shotjes'
}],
});
this.mainView = new Ext.TabPanel({
tabBar: {
dock: 'bottom',
ui: 'dark',
layout: { pack: 'center' }
},
cardSwitchAnimation: {
type: 'fade',
cover: true
},
items:[{
title: 'Shotjes',
cls: 'card 1',
id: 'card 1',
items: [ShotjesApp.listWrapper, ShotjesApp.detailPanel] ,
iconCls: 'home',
layout: 'card',
}, {
title: 'About',
cls: 'card 2',
id: 'card 2',
html: 'about',
iconCls: 'calendar',
layout: 'card',
}
],
tabBarDock: 'bottom',
fullscreen: true,
layout: 'fit'
});
this.Viewport = this.mainView;
}
});
try this
ShotjesApp.Viewport.setActiveItem(ShotjesApp.detailPanel);
Also in your code the semicolon is missing.
Cool, thanks. I also added this, otherwise the slide would open as a new tab:
ShotjesApp.Viewport = new Ext.Panel ({
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items: [ShotjesApp.listWrapper, ShotjesApp.detailPanel]
});
Combined with your change, it works perfectly..
One huge problem though. Because the Viewport is Fullscreen, The second tab won't show when I press it. When I set the second tab to Fullscreen: true, I see the animation, but first tab is still on top of it.
When I change fullscreen: false in the Viewport, the old problem comes back and the details pane won't show.
I'm having a problem where I would like to remove a FormPanel from a Window.
Here is my Form which is being loaded in a Window:
myForm = new Ext.FormPanel({
frame: true,
width: '100%',
id: 'myform',
layout: 'form',
autoHeight: true,
autoDestroy: false,
region: 'center',
monitorValid: true,
items: [{
xtype: 'textfield',
id: 'mytextfield',
fieldLabel: 'My Label',
}]
});
MyWindow = new Ext.Window({
title: 'MyWindow',
layout: 'auto',
resizable: false,
width: 717,
autoheight:true,
id:'mywindow',
closeAction:'hide',
closable: true,
items:[Ext.getCmp("myform")]
});
Now I want to remove this form and have to show another form, and I'm doing like this somewhere else:
MyWindow.removeAll();
MyWindow.add(Ext.getCmp("myAnotherForm"));
But this gives me error "Uncaught TypeError: Cannot read property 'events' of undefined" in ext-all-debug.js.
Is there anything, I'm missing here ?
Thanks.
You can remove the form and add another form by using the following code:
Ext.onReady(function() {
var btn = new Ext.Button({
id : 'button',
width : 100,
height : 30,
text : 'click me',
listeners : {
click : function(){
var myanother = myAnotherForm;
var anotherbtn = btn1;
Mywindow.removeAll();
Mywindow.add(myanother);
Mywindow.add(anotherbtn);
Mywindow.doLayout();
}
}
});
var btn1 = new Ext.Button({
id : 'button1',
width : 100,
height : 30,
text : 'Another button'
});
myAnotherForm = new Ext.FormPanel({
frame: true,
width: '100%',
id: 'myanotherform',
layout: 'form',
autoHeight: true,
autoDestroy: false,
region: 'center',
monitorValid: true,
items: [{
xtype: 'textfield',
id: 'mytextfield',
fieldLabel: 'My Another Label',
}]
});
myForm = new Ext.FormPanel({
frame: true,
width: '100%',
id: 'myform',
layout: 'form',
autoHeight: true,
autoDestroy: false,
region: 'center',
monitorValid: true,
items: [{
xtype: 'textfield',
id: 'mytextfield',
fieldLabel: 'My Label',
}]
});
var Mywindow = new Ext.Window({
title: 'MyWindow',
layout: 'auto',
resizable: false,
width: 317,
autoheight:true,
id:'mywindow',
closeAction:'hide',
closable: true,
items : [myForm,btn]
});
Mywindow.show();
});
The working sample for the above is follows:
http://jsfiddle.net/kesamkiran/MVewR/1/
* Click on 'click me' button then you will get the another form with another button.If you want to change only form,then you can remove the button.
I try to get a selectfield inside a floating, modal centerd panel working but when I click to select, the "mother"-panel closes and only the selection-panel of the selectfield stays.
if (!this.popup) {
this.popup = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 390,
height: heightOfPopUp,
styleHtmlContent: true,
scroll: 'vertical',
items: [{
xtype: 'selectfield',
name: 'options',
options: [
{text: 'This is just a big select', value: '1'},
{text: 'Another select item', value: '2'}
]
}]...
what am I doing wrong?
thnx!
Try adding this to the panel options:
hideOnMaskTap: false,