Here is code which works fine:
"ObjectsGrid" is a Ext.grid.Panel component with lots of rows.
Ext.application({
requires : ['Ext.container.Viewport'],
name : 'crm',
appFolder : 'app',
controllers : ['Controller'],
launch : function() {
Ext.create('Ext.container.Viewport', {
id : "MainViewPort",
layout : 'fit',
applyTo : Ext.getBody(),
items : [
{
xtype: 'ObjectsGrid'
}]
});
}
});
But when I try to organize Viewport space by adding some panels (with same ObjectsGrid inside), all grid rows disappears. Looks like grid has moved outside the Viewport:
Ext.application({
requires : ['Ext.container.Viewport'],
name : 'crm',
appFolder : 'app',
controllers : ['Controller'],
launch : function() {
Ext.create('Ext.container.Viewport', {
title : 'main panel',
layout: 'fit',
bodyStyle: 'padding:5px',
applyTo : Ext.getBody(),
items: [
{
xtype: 'panel',
border: false,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
html: 'upper panel',
height: 20,
margin: '0 0 5 0'
},{
xtype: 'ObjectsGrid'
}
]
}
]
});
}
});
My grid component:
Ext.define('crm.view.ObjectsGrid' ,{
extend: 'Ext.grid.Panel',
id : "ObjectsGrid",
alias : 'widget.ObjectsGrid',
store : 'ObjectFormStore',
title : 'title',
stripeRows : false,
.....
Whats wrong with my grid?
And is it normal for big application to organize Viewport space with panels component?
There must be some "best practice"?
Whats wrong with my grid?
It is missing flex config value. Try this:
{
xtype: 'ObjectsGrid',
flex: 1
}
is it normal for big application to organize Viewport space with
panels component?
It's OK if you need a panel and it is actually Ext.panel.Panel that you need (versus say just an Ext.container.Container). In your example, the panel bearing vbox layout looks redundant: you could specify your vbox layout on the viewport directly (instead of fit).
There must be some "best practice"?
Decide what you need from usability/UX perspective. Build it with minimal complexity. Keep everything necessary / reasonable / rational. Don't let redundant stuff in, etc. etc.
P. S. If you are starting a new app from scratch, better use the latest version of ExtJS.
Related
I have a Panel and in that panel I am loading grid dynamically.
Here is code for panel
{
xtype: 'panel',
region: 'center',
frame: true,
scrollable: true,
itemId: 'MyGrid',
reference: 'MyGrid',
layout: {
type: 'vbox',
align: 'stretch'
},
items: []
}
and Sample of grid.
Ext.define("MyApp.view.MYGrid", {
extend: 'Ext.grid.Panel',
alias: 'widget.MyGrid',
requires: [
'Ext.grid.filters.Filters',
'Ext.form.field.ComboBox',
],
emptyText: 'No data available.',
disableSelection: true,
margin: '3 3 0 3',
collapsible: true,
multiSelect: false,
closable: true,
columnLines: true,
uniqueFields: [],
});
initComponent: function() {
var me = this;
me.fields = me.prepareFields(me.headersXmlDoc);
me.columns = me.prepareColumns(me.headersXmlDoc);
me.store = me.prepareGridStore(me.headersXmlDoc);
this.callParent(arguments);
},
Now when Grid have enough data then both horizental and vertical scroll is coming correctly but When grid have less data with more columns scrollbar is coming down. I supposed just beow the last record but it comming in down.
All the grid is taking same height though it have a less record.
Example pic
https://i.stack.imgur.com/RKdTb.png
I want scrollbar just below the last data. By debugging I found layout : fit
But not sure how to overcome out from that.
Can anybody help me that. Thanks for help.
You need to apply overflowY as true for grid.I don't think there is some problem with fit layout.If above config doesn't work share some fiddle.
I have a Sencha Touch 2.4 website with multiple views.
All views scroll as expected on iOS and Android. But on Windows Phone they do not scroll.
When I scroll down I can see the other content, but when I stop scrolling the page scrolls back to the top.
I can also see at the scrollbar it doesn't expect the rest of the page.
Underneath the code of a view.
Ext.define('App.view.Welcome', {
extend : 'Ext.Container',
xtype : 'Welcome',
config : {
styleHtmlContent : true,
scrollable : true,
layout : 'vbox',
items : [ {
docked : 'top',
xtype : 'titlebar',
title : 'Title',
items : [ {
xtype : 'button',
iconCls : 'help',
align : 'right'
} ]
}, {
xtype : 'image',
baseCls : 'logo'
}, {
xtype : 'label',
html : 'Introduction text',
width : '100%'
}, {
xtype : 'element1',
width : '100%'
}, {
xtype : 'element2'
} ]
}
});
I have tried several things. Also changes on the css.
But cannot find a solution for the scroll problem yet.
Please, Help!
I've created an issue for the AccordionList creator at GitHub.
After testing his AccordionList demo on a Windows Phone it had the same issue.
I am trying to create a screen with Sencha Touch 2 with the following structure:
Where the red main square is a Panel,, the blue square is a container and the geen squares should be two items with HTML content in them.
Below is the code I use in the Main.js file
Ext.define('EventApp.view.Main', {
extend : 'Ext.tab.Panel',
id : 'mainView',
xtype : 'main',
requires : [ 'Ext.TitleBar', 'Ext.Video' ],
config : {
tabBarPosition : 'bottom',
items : [ {
title : 'Home',
iconCls : 'home',
items : [ {
docked : 'top',
xtype : 'titlebar',
title : 'Welcome to Sencha Touch 2'
}, {
xtype : 'eventsCarrousel'
} ],
},
{
title : 'Events',
iconCls : 'time',
id : 'eventsButton',
items : [ {
docked : 'top',
xtype : 'titlebar',
title : 'Events'
}, {
xtype : 'eventList',
} ]
}
]
}
});
and in the view named eventsCarrousel.js
Ext.define('EventApp.view.eventsCarrousel', {
extend: 'Ext.Container',
xtype: 'eventsCarrousel',
config: {
layout: {
type: 'vbox',
align: 'stretch'
},
items : [{
flex: 1,
html : "This is the sample top pannel." ,
style : 'background-color: #5E99CC;'
}, {
flex: 1,
html : "Second pannel.",
style : 'background-color: #4D99CC;'
}]
}
});
What I get out of this code is the following output:
Here are my problems (which I have circled in red)
In Google Chrome the title text of the main panel is not displaying although it does display if I use Netscape.
The items do not seem to be arranged using the vbox layout, although I have tried this same config in Sencha Try and did produce the desired Layout.
Could someone be so kind to point me out to what I might be doing wrong?
Extended info:
I found the following entry in stackoverflow wich pointed to the need of defining a template on the containing element ( Vbox layout issue in a tab panel ) therefore I modified my code of Main.js to add a fit layout to the component containing the eventsCarrousel
Ext.define('EventApp.view.Main', {
extend : 'Ext.tab.Panel',
id : 'mainView',
xtype : 'main',
requires : [ 'Ext.TitleBar', 'Ext.Video' ],
config : {
tabBarPosition : 'bottom',
items : [ {
title : 'Home',
iconCls : 'home',
layout: 'fit', // JUST ADDED THIS LINE
items : [ {
docked : 'top',
xtype : 'titlebar',
title : 'Welcome to Sencha Touch 2'
}, {
xtype : 'eventsCarrousel'
} ],
},
{
title : 'Events',
iconCls : 'time',
id : 'eventsButton',
items : [ {
docked : 'top',
xtype : 'titlebar',
title : 'Events'
}, {
xtype : 'eventList',
} ]
}
]
}
});
After this change it still did not work when I tested it using Firefox desktop browser and it works, but it does not work when using Firefox. I thought that it was suposed to be the other way arround since Chrome is a webkit based browser.
This is the output I get in Firefox:
An this is the exact same code running in Google Chrome.
My understanding was that the recomended testing browser was Google Chrome because it was based on webkit. Is this correct? Which is the most reliable desktop browser to test sencha touch 2 development in before doing so in the mobile devices?
Thanks
Finally I got the answer through another question posted in StackOverflow.
Most of my problems were caused by - Chrome 29 bug. See how to fix this here: http://www.sencha.com/forum/announcement.php?f=90&a=43
I am new to ExtJs. I need to create an entry form in 2 columns using column layout.
My code is as follows:
Ext.onReady(function(){
var patientForm = new Ext.FormPanel({
renderTo: "patientCreation",
frame: true,
title: 'Search Criteria',
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
width: 900,
items: [
{
layout:'column',
items:[
{ // column #1
columnWidth: .33,
layout: 'form',
items: [
{ xtype: 'textfield',
fieldLabel: 'FirstName',
name: 'firstName',
vtype : 'alpha',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'MiddleName',
name: 'middleName',
vtype : 'alpha'
}
] // close items for first column
}]
}]
});
var win = new Ext.Window({
layout:'form',
closable: false,
resizable: false,
plain: true,
border: false,
items: [patientForm]
});
win.show();
});
But when I run the code, I got h is undefined error. How to design a form in column layout? Is there any procedure, steps or links which give a clear idea?
I have run the same code with ExtJs 3.2.2 and got a similar error. But when I removed renderTo: "patientCreation"
code worked:
That part is not necessary 'cause you are placing the form in a the window.
I do not know anything about ExtJS 3. If you are using ExtJS 4, then you have specified layout config at wrong place. You have specified it inside items config, it should not be inside items config.
Layout can be specified as follows in ExtJS 4:
Ext.define('your_domain_name.viewName', {
extend : 'Ext.panel.Panel',
alias : 'widget.any_name_you_want',
layout : 'column',
initComponent : function() {
this.items = [
// all items inside form/panel will go here
];
this.callParent(arguments);
}
});
You can get sample code about all the panels here
try applying renderTo config to window instead of form
check example
I'm having trouble getting a panel to fill the space within its container panel. The container is a panel with a vbox layout having two child panels. I looked at Extjs how to set 100% height for vbox panel
and have something similar but it doesn't seem to work.
Screenshots:-
http://i.imgur.com/nAbCr.png
The screenshot is from when i use a 'fit' layout or dont even have the combobox or optionsview in a containing panel. So, what i want is for the 'options' panel to extend all the way down till the 'results' panel.
with the present vbox layout this is what i get - http://i.imgur.com/cB0k1.png
Ext.define('PA.view.CreateReportView', {
extend: 'Ext.panel.Panel',
alias: 'widget.createreportview',
id: 'createreport-panel',
requires: [
'PA.view.OptionsView', // options panel
'PA.common.Connection'],
title: 'Create Report',
items: [{
xtype: 'panel',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
border: false,
height: '50px',
items: [{
xtype: 'combobox',
....
}]
}, {
xtype: 'panel',
border: false,
flex: 1,
items: [{
xtype: 'optionsview', // options panel
style: {
paddingTop: '10px'
}
}]
}]
}]
});
The value of height: should be a number, not a string. So use height: 50 instead.
I think you have it close to what you need. Couple of observations:
1. Heights need to be set as integers (no px suffix)
2. Each container that will have children should have a layout defined for them, even though there is default - it might not be what you want.
Here is your layout working reasonably well http://jsfiddle.net/dbrin/NJjhB/
One other suggestion I would add is to use a tool like Illuminations for Developers - a firebug plugin that knows about ExtJS framework.