I am using sencha touch carousel, in which i am using horizontal swipe. Which works perfect.
But within that i am using panels which i want to scroll vertically(scroll each page to the bottom). How to do that? I have given scroll:'vertical' in each panel as follows:
var myFirstPage = Ext.Panel({
id:'tableId',
iconCls:'myToolBar',
style:'overflow:auto;' ,
scroll:'vertical',
items:.........});
Ext.setup( {
onReady: function() {
myCarouselId = new Ext.Carousel({
fullscreen: true,
id:'myCar',
items : [ myFirstPage]...............});
But i cant scroll the panel to the bottom . Where am going wrong?
Sencha touch vertical scroll content in a horizontal carousel . Accroding to this stackoverflow answer we can scroll child contents vertically in horizontal carousel , same issue like me. But i am doing the same here , which i cant scroll.
My child panel contains vbox and hbox layout.
Can somebody answer my question ?
Try this, it worked for me and i got it from sench forum
set the scrollable config in Panel
scrollable : {
direction : 'vertical',
directionLock : true
}
Example
var myFirstPage = Ext.Panel({
id:'tableId',
iconCls:'myToolBar',
scrollable : {
direction : 'vertical',
directionLock : true
},
items:.........});
Ext.setup( {
onReady: function() {
myCarouselId = new Ext.Carousel({
fullscreen: true,
id:'myCar',
items : [ myFirstPage]...............});
see this fiddle
Edit: If you want 'hbox' usability inside your panels, you need to fit its width inside the container.
If it will need to create scrollbars of its own, it will fail to do so.
What you need is to define scrolling differently:
scrollable: {
direction: 'vertical',
directionLock : true
}
Like this:
var carousel = Ext.create('Ext.Carousel', {
fullscreen: true,
items : [
{ xtype: 'panel',
scrollable: {
direction: 'vertical',
directionLock: true
},
html: 'This panel is scrollable!',
items: [{
xtype: 'textfield',
name : 'first',
label: 'First'
},
{
xtype: 'textfield',
name : 'second',
label: 'Second'
},{
xtype: 'textfield',
name : 'third',
label: 'Third'
},{
xtype: 'textfield',
name : 'first1',
label: 'First1'
},
{
xtype: 'textfield',
name : 'second1',
label: 'Second1'
},{
xtype: 'textfield',
name : 'third1',
label: 'Third1'
},{
xtype: 'textfield',
name : 'first12',
label: 'First12'
},
{ xtype: 'panel',
layout: 'hbox',
width: 200,
items: [{
xtype: 'textfield',
name : 'first-box',
label: 'First-box'
},
{
xtype: 'textfield',
name : 'second-box',
label: 'Second-box'
},{
xtype: 'textfield',
name : 'third-box',
label: 'Third-box'
}]
}, {
xtype: 'textfield',
name : 'second12',
label: 'Second12'
},{
xtype: 'textfield',
name : 'third12',
label: 'Third12'
}]
}, {
xtype: 'panel',
scroll:'vertical', // will not work
html: 'This panel is not scrollable!',
}]
});
You can try this within any live preview of sencha docs
Hope this helps
Related
I am using ExtJS viewport border layout. in order to create a north, center and south region. The first issue faced is that the viewport could not display a scrollbar for its contents, so i used a panel inside the viewport and added panels inside them with the location i wanted:
Ext.create('Ext.container.Viewport', {
id: 'viewportContainer',
layout: {
type: 'border',
align: 'center'
},
forceFit: 'true',
items : [{
layout:'anchor',
scroll:true,
autoScroll:true,
region : 'center',
xtype : 'panel',
items : [ {
region: 'north',
xtype: 'panel',
bodyStyle: {
'background': 'none'
},
items: [upperPanel, messagePanel()]
},{
layout:'anchor',
form: searchForm.id,
id: 'innerBody',
region : 'center',
xtype : 'panel',
items : [searchForm, gridPanel ]
} ,{
region: 'south',
xtype: 'panel',
items: [bottomPanel]
} ]
} ]
}
What i want to do is
stick the bottomPanel to the bottom of the page, if the other
contents are shorter than the viewable area (clientHeight) and
if they are taller, let the footer be located right below the innerBody section.
The current implementation places the footer right below the innerBody panel but doesn't stick to the bottom when all the contents of the page are shorter than the viewable area(clientHeight)
Any help would be highly appreciated!
Thank you
I'm doing the following code please check it.
Mycode:
Ext.create('Ext.container.Viewport', {
id: 'viewportContainer',
layout: {
type: 'border',
align: 'center'
},
forceFit: 'true',
items : [{
layout:'anchor',
scroll:true,
autoScroll:true,
region : 'center',
xtype : 'panel',
items : [ {
region: 'north',
xtype: 'panel',
bodyStyle: {
'background': 'none'
},
items: [upperPanel, messagePanel()]
},{
layout:'anchor',
form: searchForm.id,
id: 'innerBody',
region : 'center',
xtype : 'panel',
minHeight:'540',
items : [searchForm, gridPanel ]
} ,{
region: 'south',
xtype: 'panel',
items: [bottomPanel]
} ]
} ]
}
I'm only applying the 'minHeight' property to the'innerBody' panel. It works. Please try it.
I am using layout: 'hbox'for a container and this contain has four child items as below
label
Continer having textfield and div for message
label
Container having textfield and div for message
I want all these four elements to be displayed horizontally in single line, that's why I used HBox layout, but its showing only first two child items. I looked up generated html and found that items 3 and 4 are generated but are getting position incorrectly.
Here is jsfiddle link for below code http://jsfiddle.net/5znVE/
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
width: '100%',
bodyPadding: 10,
items: [{
xtype: 'container',
id: 'chkNumberCtnr',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'label',
cls: 'field-label',
text: 'from Check Number',
}, {
xtype: 'container',
id: 'frmChkFldCntr',
cls: 'field-container',
items: [{
xtype: 'textfield',
id: 'fromChk'
}, {
xtype: 'container',
id: 'frmChkMessage',
cls: 'error-message',
html: '<div>This is required field</div>'
}]
}, {
xtype: 'label',
text: 'to Check Number'
},{
xtype: 'container',
id: 'toChkFldCntr',
cls: 'field-container',
items: [{
xtype: 'textfield',
id: 'toChk'
}, {
xtype: 'container',
id: 'toChkMessage',
cls: 'error-message',
html: '<div>This is required field</div>'
}]
}]
}
]
});
Add flex: 1 to all four of your child items in order to have them size automatically to fill the available width.
I've two nested container and I wanto to fit vertically (only vertically) the first container to the page size, and the second container to the first container size.
In case of resize of the page all containers should resize themselves automatically.
I'm not able to do this feature. I think that is a layout problem.
This is my sample code and my jsfiddle:
Ext.onReady(function() {
myPanel = Ext.create('Ext.container.Container', {
layout:'fit',
flex:1,
width:100,
renderTo: Ext.getBody(),
items: [{
xtype:'container',
layout : {
type : 'vbox',
align : 'stretch'
},
items:[
{
//this is the right panel not collapsible
xtype : 'panel',
border:true,
//hidden:false,
bodyBorder:true,
padding: '5 5 5 5',
itemId:'right',
//default layout of inner element is hbox
layout : {
type : 'hbox',
//align : 'stretch'
},
//takes all possible space
flex : 1
}]}
]
});
});
http://jsfiddle.net/eternasparta/yxeSG/
thank you all!
View port is the key element that monitors browser size.
http://jsfiddle.net/dbrin/6r7Dd/
var myPanel = Ext.create('Ext.panel.Panel', {
layout: 'fit',
width: 200,
title: 'Panel 1',
items: [{
xtype: 'panel',
title: 'Panel 2',
layout: 'fit',
items: [{
xtype: 'panel',
title: 'Right P',
padding: '5'
}]
}]
});
Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
align: 'stretch'
},
items: [myPanel]
});
So I have the view below. This view is called when an item from a list on a previous view is tapped. The lists on this view are filtered based on the previous selection, but I want to be able to add items to these lists that contain the same filter (store field = "value"). How can I get it so that the value that is filtering the lists is also passed when clicking the button and loading a new view?
My View page.
Ext.define("MyApp.view.ShowAll", {
extend: 'Ext.Container',
requires: ['Ext.NavigationView', 'Ext.dataview.List', 'Ext.layout.HBox', 'Ext.Container'],
xtype: 'myapp-showall',
config: {
layout: 'hbox',
items: [
{
layout: 'fit',
xtype: 'container',
itemId: 'listContainer',
flex: 1,
items: [
{
xtype: 'list',
store: 'leftStore',
itemTpl: '{storeField}',
emptyText: 'No values added yet'
},
{
xtype: 'toolbar',
docked: 'bottom',
padding: '5px',
items: [{ xtype: 'button', itemId: 'addValue', text: 'Add Values', ui: 'confirm', width:'100%' }]
}
]
},
{
style: "background-color: #333;",
width: 10
},
{
layout: 'fit',
xtype: 'container',
itemId: 'listContainerTwo',
flex: 1,
items: [
{
xtype: 'list',
store: 'rightStore',
itemTpl: '{storeField}',
emptyText: 'No values added yet'
},
{
xtype: 'toolbar',
docked: 'bottom',
padding: '5px',
items: [{ xtype: 'button', itemId: 'addValueRight', text: 'Add Values', ui: 'confirm', width:'100%' }]
}
]
}
]
}
});
Here is part of my Controller (which sets the store filters)
showValues: function() {
this.showValueDetails(arguments[3]);
},
showValueDetails: function(record) {
var title = "Value: "+record['data']['name'];
var showValue = Ext.create('MyApp.view.ShowAll', { title: title });
showValue.setRecord(record);
var valueName = record['data']['name'];
var leftStore = Ext.getStore("leftStore");
leftStore.clearFilter();
leftStore.filter('storeField', valueName);
var rightStore = Ext.getStore("rightStore");
rightStore.clearFilter();
rightStore.filter('storeField', valueName);
this.getMain().push(showValue);
},
It sets the page title correctly and filters the store also. I just am unsure how to pass a variable so when the buttons are clicked the valueName (from controller) is passed to the next view.
Since I was able to set the title fine using the code above, once I click the submit button all it takes is the following to get the title.
var titleVariable = Ext.getCmp('ShowAll')['title'];
I want to 2 forms, & I want to use card layout, so that when the user submits form1, he is taken to form2. But, when I try to MyApp.container.setActiveItem(2) (using console), it does not move to form2(card2).
Ext.define('MyApp.view.Forms', {
extend: 'Ext.Container',
xtype: 'formsPage',
id: 'formsForm',
config: {
title: 'Patient Registration',
iconCls: 'user',
layout:{
type: 'card'
},
items: [
{
xtype: 'fieldset',
title: 'Patient Registration1',
items: [
{
xtype: 'textfield',
label: 'Names',
name: 'name'
},
{
xtype: 'textfield',
label: 'City',
name: 'city'
}
]
},
{
xtype: 'fieldset',
title: 'Patient Registration1',
items: [
{
xtype: 'textfield',
label: 'Phone',
name: 'phone'
},
{
xtype: 'textfield',
label: 'Country',
name: 'conutry'
}
]
}
],
constructor:function(config) {
this.initConfig(config);
return this;
}
}
});
MyApp.container = Ext.create('MyApp.view.Forms', {});
Please note that array items in Sencha Touch 2 are indexed from 0, so if you want to activate second one, it should be something like this:
MyApp.container.setActiveItem(1)
Edited: I've figured it out. You should add another config to your view: fullscreen:true and it should work well :)
Is your form xtype of 'formsPage' custom, I can't seem to find it in the doco? If it's not, that might be contributing to the issue.
The doco also suggests that you don't create the card layout directly, but instead use carousel or tab panel. Maybe use a carousel as your base component, then make each card a separate form? This would make your intentions clear that each card/form is to be independent.
Hope that helps
do the following:
extend the carousel
extend: 'Ext.Carousel',
change the config section to:
config: {
title: 'Patient Registration',
iconCls: 'user',
cls: 'card'
----
guess that should fix it