Using Sencha Touch:
I want to create a slide out menu. But not like the facebook type:
What I want it to do instead is slide out on top(over the container under the title) and under the menu so it goes over it and not push it off to the right:
Ive searched and havent found any samples. Can anyone recommend a site or a tutorial on doing this.
Update - 5/24/2014
Thanks all for the different advice. The only thing is that I dont want it to look like the FB sliders. Ive seen those. I want it to slide over like the second screen shot i added. I was able to create it. Here is my code:
Ext.define('Slider.view.Main',
{
extend: 'Ext.Container',
xtype: 'mainPage',
requires:
[
'Ext.TitleBar',
'Ext.form.Panel',
'Ext.List',
'Ext.navigation.View',
'Ext.Component',
'Ext.Panel'
],
config:
{
layout: 'fit',
items:
[
{
xtype: 'titlebar',
docked: 'top',
title: 'Slider Test',
items:
[
{
iconCls: 'list',
align: 'left',
handler: function()
{
var con1 = Ext.ComponentQuery.query('container > #container1')[0];
var draggable = Ext.ComponentQuery.query('container > #navContainer')[0];
if(con1.element.hasCls('out'))
{
draggable.hide({type: 'slideOut', direction: 'left', duration : 500});
con1.element.removeCls('out').addCls('in');
}
else
{
con1.element.removeCls('in').addCls('out');
draggable.show({type:'slideIn', direction:'right', duration : 500});
}
}
}
]
},
{
xtype: 'container',
layout: 'hbox',
itemId: 'container1',
items:
[
{
xtype: 'container',
layout: 'card',
width: 250,
hidden: true,
itemId: 'navContainer',
style: 'position: absolute; top: 0; left: 0; height: 100%;z-index: 2',
zIndex : 1,
items:
[
{
xtype: 'list',
itemTpl: '{title}',
data:
[
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
}
]
},
{
xtype: 'container',
itemId: 'mainContainer',
width: '100%',
html: 'Main content area'
}
]
}
]
}
});
Check this sample Slide navigation with sencha touch
Set cover to true.
Ext.Viewport.setMenu(this.createMenu(), {
side: 'left',
cover: true
});
This will have the menu slide out on top of the container. I'm not sure about having it under the nav bar, but some maybe some clever css can solve that problem.
Thanks everyone for the tips. I was able to create what I wanted and posted the code under the update
Related
I am working on Ext JS 6.5 modern. I have some condition to disable the grid component, user has only rights to view the grid no one else.
I have tried disabled config and disable method but not working. Here is my Fiddle.
Code snippet
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
fields: ['name'],
data: [{
name: 'Test 1'
}, {
name: 'Test 2'
}, {
name: 'Test 3'
}, {
name: 'Test 4'
}]
});
Ext.create({
xtype: 'grid',
layout: 'fit',
fullscreen: true,
title: 'Baisc grid example',
store: 'gridStore',
//Here I have put {disabled: true} but not working
disabled: true,
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
}],
listeners: {
childtap: function (grid, location, eOpts) {
alert('childtap');
}
},
items: [{
xtype: 'toolbar',
items: {
xtype: 'button',
ui: 'action',
text: 'Disabled grid',
iconCls: 'x-fa fa-ban',
handler: function () {
//IT is also not working
this.up('grid').setDisabled(true);
this.up('grid').disable();
}
}
}]
//renderTo:Ext.getBody()
});
}
});
Somebody please help me with a solution for disabling the grid component.
As a workaround we can use grid.setMasked(true);
Here is the example Fiddle.
Another approach is to set grid's hideMode to opacity and then set it to hidden (this.up('grid').setHidden(true);).
For Example (editing your fiddle)
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
fields: ['name'],
data: [{
name: 'Test 1'
}, {
name: 'Test 2'
}, {
name: 'Test 3'
}, {
name: 'Test 4'
}]
});
Ext.create({
xtype: 'grid',
layout: 'fit',
fullscreen: true,
title: 'Baisc grid example',
store: 'gridStore',
//Here I have put {disabled: true} but not working
//disabled: true,
hideMode: 'opacity',
columns: [{
text: 'Name',
flex: 1,
dataIndex: 'name'
}],
listeners: {
childtap: function (grid, location, eOpts) {
alert('childtap');
}
},
items: [{
xtype: 'toolbar',
items: {
xtype: 'button',
ui: 'action',
text: 'Disabled grid',
iconCls: 'x-fa fa-ban',
handler: function () {
this.up('grid').setHidden(true);
}
}
}]
//renderTo:Ext.getBody()
});
Also you need this css override:
<style>
.x-hidden-opacity {
opacity: 0.2 !important; //default is 0
pointer-events: none;
}
</style>
UPDATE:
I found if do this
this.add([topToolbar, {
xtype: "fieldset",
items: [showNameEditor, textEditor]
},
showsList, bottomToolbar
]);
and
layout: {
type: 'fit'
}
Then the list shows but the textfields don't appear
Original:
I am trying to get a list to show in my panel the two textFields show but the list doesn't appear. I tried different Stores with the list but still it doesn't show.
var showNameEditor = {
xtype: 'textfield',
name: 'name',
label: 'Name',
required: true
};
var textEditor = {
xtype: 'textfield',
name: 'name',
label: 'Name',
required: true
};
var showsList = {
xtype: 'list',
title: 'Sample',
itemTpl: '{title}',
data: [{
title: 'Item 1'
}, {
title: 'Item 2'
}, {
title: 'Item 3'
}, {
title: 'Item 4'
}
]
};
this.add([topToolbar, {
xtype: "fieldset",
items: [showNameEditor, showsList, textEditor]
},
bottomToolbar
]);
You have to specify dimensions for fieldset & form if you want to display their contents so use width & height configs
How can I have the three regions left, middle, right within a toolbar? I know that I can use -> to trigger the right aligned container for all following items but what about center?
You can archive this with a trick:
Ext.create('Ext.panel.Panel', {
title: 'Toolbar Fill Example',
width: 300,
height: 200,
tbar : [
'Item 1',
{ xtype: 'tbfill' },
'Item 4',
{ xtype: 'tbfill' },
'Item 2'
],
renderTo: Ext.getBody()
});
JSFiddle
Note that:
[
'Item 1',
'->',
'Item 4',
'->',
'Item 2'
]
is working all the same.
How it work
-> or it's xtype tbfill is nothing more than a empty Component with a flex: 1 configuration.
Ext.create('Ext.panel.Panel', {
title: 'Toolbar Fill Example',
width: 300,
height: 200,
tbarCfg:{
buttonAlign:'center' //for center align
// buttonAlign:'left' //for left align
// buttonAlign:'right' //for right align
},
tbar : [
'Item 1',
{ xtype: 'tbfill' },
'Item 4',
{ xtype: 'tbfill' },
'Item 2'
],
renderTo: Ext.getBody()
});
For Right:
bbar: ['->',{
xtype: 'button',
text: 'xyz',
}]
For Left:
bbar: ['<-',{
xtype: 'button',
text: 'xyz',
}]
dockedItems: [{
xtype: 'toolbar',
buttonAlign:'center',
dock: 'top',
items: [{
text: 'Docked to the top'
}]
}]
First program logic:
I have a main panel and there is a list at the left side and another panel at the right side.
When user touches the list item some html appears in right panel. What i need to do is using carousel instead of right panel.
My view
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
xtype:'mypanel',
config: {
ui: 'dark',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Lezzet Dunyasi',
},
{
xtype: 'list',
docked: 'left',
id: 'mylist',
ui: 'round',
pinHeaders: false,
grouped: true,
//disableSelection: true,
width: 331,
itemTpl: [
'<img src="{img_url}" width="60" heigh="60"></img><span>{label}</span>'
],
store: 'Menius',
items: [
{
xtype: 'searchfield',
docked: 'top',
placeHolder: 'Search...',
},
]
},
{
xtype: 'panel',
styleHtmlContent:true,
style: {
backgroundImage: 'url(resources/img/Landscape.png)',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
},
id:'mypanel'
}
]
}
});
As you can see there is a xtype:panel and i tried to modify that code and i did it like this
xtype: 'carousel',
defaults{
styleHtmlContent:true,
id:'mypanel'},
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3'
}
]
Also i use a controller
Ext.define('MyApp.controller.MeniuController',{
extend:'Ext.app.Controller',
config:{
refs:{
leftMeniu:'mypanel list[id=mylist]',
myPanel:'mypanel panel[id=mypanel]'
},
control:{
leftMeniu:{
itemtap:'onItemTap'
}
}
},
onItemTap:function(list, index, item, record, e , opts)
{
var content = '<h2>' + record.get('label') +'</h2>' + record.get('html');
this.getMyPanel().setHtml( content );
}
});
And i modified this part like this
refs:{
leftMeniu:'mypanel list[id=mylist]',
myPanel:'mypanel carousel[id=mypanel]'
Although these modifications i can't run my code , what should i do ?
A couple of small issues that I see. You are missing a colon on defaults: And I think you want to move that id to one of your carousel elements, right? With your code, I'm only getting one page with the id defined at that level. If you move it down you will see three pages.
defaults: {
styleHtmlContent:true,
id:'mypanel' // IN WRONG PLACE?
},
[UPDATE]
I got it working so that you can write to any of your carousel panels. I just created a direct reference to each id in the refs:{} section. I'm drawing to the second page so drag it into view to see the updates.
Also, I'm adding the model, store, and app.js so that anyone reading this will have a complete working example.
Ext.define('MyApp.controller.MeniuController', {
extend:'Ext.app.Controller',
config:{
refs:{
leftMeniu:'mypanel list[id=mylist]',
// myPanel:'mypanel panel[id=mypanel]'
// myPanel:'mypanel carousel[id=mypanel]'
myFirstPanel:'#mypanel1',
mySecondPanel:'#mypanel2'
},
control:{
leftMeniu:{
itemtap:'onItemTap'
}
}
},
onItemTap:function(list, index, item, record, e, opts) {
var content = '<h2>' + record.get('label') + '</h2>' + record.get('html');
this.getMySecondPanel().setHtml(content);
this.getMyFirstPanel().setHtml(content);
}
});
Complete MyPanel View:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
xtype:'mypanel',
config: {
ui: 'dark',
layout: {
type: 'card'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Lezzet Dunyasi'
},
{
xtype: 'list',
docked: 'left',
id: 'mylist',
ui: 'round',
pinHeaders: false,
// grouped: true,
//disableSelection: true,
width: 331,
itemTpl: [
'{label}'
],
store: 'Menius',
items: [
{
xtype: 'searchfield',
docked: 'top',
placeHolder: 'Search...'
}
]
},
// {
// xtype: 'panel',
// styleHtmlContent:true,
// style: {
// backgroundImage: 'url(../images/risk2.png)',
// backgroundRepeat: 'no-repeat',
// backgroundPosition: 'center'
// },
// id:'mypanel'
// }
{
xtype: 'carousel',
defaults: {
styleHtmlContent:true
},
items: [
{
html: 'Item 1',
style: 'background-color: #5E99CC',
id:'mypanel1'
},
{
html: 'Item 2',
style: 'background-color: #759E60',
id:'mypanel2'
},
{
html: 'Item 3'
}
]
}
]
}
});
app.js
Ext.application({
name: "MyApp",
views: ['MyPanel'],
models: ['Meniu'],
stores: ['Menius'],
controllers: ['MeniuController'],
launch: function() {
Ext.Viewport.add(Ext.create('MyApp.view.MyPanel'));
}
});
Model:
Ext.define('MyApp.model.Meniu', {
extend: 'Ext.data.Model',
config: {
fields: ['img_url', 'label', 'html']
}
});
Store:
Ext.define('MyApp.store.Menius', {
extend: 'Ext.data.TreeStore',
config: {
model: 'MyApp.model.Meniu',
defaultRootProperty: 'items',
grouper: function(record) {
return record.get('label')[0];
},
root: {
text: 'foo',
items: [
{img_url: 'foo.png', label: 'one', html:'nice', leaf: true},
{img_url: 'foo.png', label: 'two', html:'carousels', leaf: true}
]
}
}
});
I have a panel which consists of a toolbar and tabs. On each tab there should be a list and a button. I believe I have this set up correctly except for the list, which I am trying to add as follows:
Ext.define('Myapp.view.Search', {
xtype: 'search',
extend: 'Ext.tab.Panel',
config: {
activeItem: 0,
tabBar: {
docked: 'top',
autoScroll: 'auto',
ui: 'light',
layout: {
pack: 'center'
}
},
items: [
{
xtype:'toolbar',
docked:'top',
ui: 'light',
title: 'Search'
},
{
title: 'Tab 1',
xtype: 'formpanel',
items: [
{
xtype: 'Mylist' //DOES NOT WORK
},
{
xtype: 'panel',
defaults: {
xtype: 'button',
style: 'margin: 0.1em',
flex : 1
},
layout: {
type: 'hbox'
},
items: [
{
text: 'Button 1',
}
]
}
]
},
{
title: 'Tab 2',
xtype: 'formpanel',
items: [
{
xtype: 'panel',
defaults: {
xtype: 'button',
style: 'margin: 0.1em',
flex : 1
},
layout: {
type: 'hbox'
},
items: [
{
text: 'Button 1',
}
]
}
]
}
]
}
});
Please let me know what I am doing wrong and thanks for you help!
EDIT: added Mylist below:
Ext.define('Myapp.view.Mylist', {
extend: 'Ext.dataview.NestedList',
xtype: 'Mylist',
config: {
store: 'Sections'
},
getTitleTextTpl: function() {
return '{name}';
},
getItemTextTpl: function(node) {
return '<strong>{name}</strong>';
},
});
Try these
in View:
{
xtype: 'panel',
flex: 4,
width: '400px',
height:"700px",
layout: {
type: 'fit'
},
items: [
{
xtype: 'list',
// loadingText:"Loading Category",
styleHtmlContent: true,
// id:"mylist2",
width:"300px",
itemTpl:
'<div class="mycon">'+
'<input type="image" id="click" img src="{coupon_image}" style="max-width:130%;border:6px double #000000;" width="200" height="200"' +'style="padding:3px;">' +
'</div>'+
'<div><font size="2" color="red"><b>Coupon Name:</b></font></div>'+
'<div><font size="2" color="green"><b>{coupon_name}</b></font></div>'+
'</div>',
store : 'ViewCategoryStore',
},
]
}
in controller:
Ext.define('Expressdeal.controller.ViewCategoryController', {
extend: 'Ext.app.Controller',
config: {
refs: {
viewcat : 'viewcategory' // xtype of the view
},
control: {
'viewcategory list: {
activate: 'onActivate',
itemtap: 'onItemTap',
},
Where you define your list in your List view you should say
alias:'widget.Mylist'
instead of
xtype:'Mylist'
also your list needs an itemTpl config im pretty sure.
config: {
store: 'Sections',
itemTpl:'{example}'
}
And as long as the store that drives your list is in working shape the list should appear correctly