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.
Related
I have used highcharts in my iphone application, Everything works great except one is that when I click on pagination arrows of legend in highchart, it skips one page and goes to next page.
Say I have 4 pages, so if I am on 1st page right now and click to view another page then it jumps to 3rd page. After clicking next for 3rd page I go to 4th page and when I click on prev it skips 3rd page and jumps to 2nd page. And very important to take note is, its happening on iphone only not browser.
I am surprised to see this and unable to identify why this behaviour is there with pagination...
following is my code for creating highchart
var defaultBarChart = {
options: {
chart: {
type: 'column',
alignTicks:false,
//height: 250,
width: Constants.analyticChartWidth
},
yAxis: {
title: {
text: ''+$filter('translate')('values')
}
},
tooltip: {
enabled: false,
style: {
width: 200,
padding: 10,
lineHeight: "normal"
},
useHTML:true
},
legend: {
verticalAlign: 'bottom',
align: 'left',
x: 0,
itemStyle: {
width: deviceWidth,
'color':'#434f5a',
'font-size':'12px'
},
maxHeight: 105,
navigation: {
activeColor: '#3E576F',
animation: true,
arrowSize: 18,
inactiveColor: '#CCC'
}
},
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
''
],
crosshair: true
},
tooltip: {
/* style: {
width: 100
}*/
enabled: false
},
/* tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
style: {
width: 100
}
},*/
series: [{
name: '',
data: [0],
showInLegend: false
}],
loading: false,
credits: {
enabled: false
}
};
I want to ask, if problem anywhere else other than navigation can affect on it?
Please.. help me to get out of this...!!
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?
I have implemented Tabbar in sencha touch without any content as follows:
using code
Ext.ns('sink', 'demos', 'Ext.ux');
Ext.ux.UniversalUI = Ext.extend(Ext.Panel,
{
fullscreen: true,
layout: 'hbox',
items:
[
//Root view
{
xtype: 'panel',
html: 'TableView/Rootview goes here ...',
flex: 1
},
//Details view
{
xtype: 'panel',
html: 'Message Detail view goes here ....',
flex: 2
}
]
});
But I need two Tableviews one as Rootview and the other as Detailsview as follows
You need to use Ext.List. So instead of your left panel (commented as //Root view), you can add this :
{
xtype:'list',
id: 'navigation',
data: [
{ title: 'Page 1'},
{ title: 'Page 2'},
{ title: 'Page 3'},
{ title: 'Page 4'},
{ title: 'Page 5'}
],
itemTpl: new Ext.XTemplate('{title}'),
}
I let you guess what you have to do for the second view ;)
Hope this helps
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 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,