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,
Related
Can anyone help me in creating a form inside a layout window in extjs 3.4. like this? I tried using Ext.Formpanel but it shows error.
Ext.onReady(function() {
// tabs for the center
var tabs = new Ext.TabPanel({
region: 'center',
margins: '3 3 3 0',
activeTab: 0,
defaults: {
autoScroll: true
},
items: [
{
title: 'Movie Grid',
},
{
title: 'Movie Description',
},
{
title: 'Nested layout',
},
{
title: 'The bomb',
}
]
});
// Panel for the west
var nav = new Ext.Panel({
title: 'Movie Information Form',
region: 'west',
split: true,
width: 200,
collapsible: true,
margins: '3 0 3 3',
cmargins: '3 3 3 3',
});
var win = new Ext.Window({
title: 'Button',
closable: true,
width: 600,
height: 350,
//border: false,
plain: true,
layout: 'border',
items: [
nav,
tabs
]
});
win.show(this);
});
This is the js file for creating a layout window. I need to create a form inside "movie information form".
I have solved error in your code.Please check & reply.
https://fiddle.sencha.com/#view/editor&fiddle/2750
I have removed this which was passed to show() of window.
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?
var gridForm3 = new Ext.Panel({
id: 'Main-form2',
frame: true,
labelAlign: 'left',
autoScroll: true,
layout: 'fit',
items: [
gridtree
]
,renderTo:Ext.getBody()
});
This is my code. I am not getting scroll bar to the panel. What I should do?
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.