Related
I wan't to detect 'pinch' event on a Extjs 5 Panel, if I load the panel content using loader property it's working, but if I put an item (Iframe) in the panel, it doesn't work
Panel with an item (IFrame):
Ext.create('Ext.panel.Panel', {
layout: 'fit',
autoScroll: true,
items: [
Ext.create('Ext.ux.IFrame', {
autoScroll: true,
src: 'resources/docs/doc1.html',
cls: 'iframeStyle'
})
],
listeners: {
pinch: function (event) {
alert('pinch event');
},
element: 'body'
}
})
Panel that the content was loaded using loader property
Ext.create('Ext.panel.Panel', {
layout: 'fit',
loader: {
url: 'resources/docs/doc1.html',
autoLoad: true
},
listeners: {
pinch: function (event) {
alert('pinch event');
},
element: 'body'
}
})
Can you explain me the difference, and why with an IFrame it doesn't work??
Thank you
I have successfully implemented this slide navigation library. I can slide the main viewport in and out to reveal and hide the navigation on the left of the viewport.
However, I'm unable to find a way of hiding and showing the navigation via button click. How can I tie in my existing slide navigation into a button click action?
UPDATE:
My attempt to add a customized bar to Main.js was a matter of extending TitleBar in a class called CustomBar. I then used it via xtype in Main.js. The code below shows my Main.js code with configuration for the Slide Navigation library:
Ext.define('RT.view.Main', {
extend: 'Ext.ux.slidenavigation.View',
xtype: 'main',
requires: [
'Ext.TitleBar',
// 'Ext.Video'
],
config: {
fullscreen: true,
// slideSelector: 'x-toolbar',
slideSelector: '',
containerSlideDelay: 10,
selectSlideDuration: 200,
itemMask: true,
/*slideButtonDefaults: {
selector: 'toolbar'
},*/
listPosition: 'left',
list: {
maxDrag: 300,
width: 200,
items: [
{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Menu',
centered: false,
width: 200,
left: 0,
},
items: [{
docked: 'top',
xtype: 'searchfield',
placeHolder: 'search',
width: 180
}]
}
]
},
slideButton: true,
slideButton: {
selector: 'toolbar'
},
defaults: {
style: 'background: red',
xtype: 'container',
},
/****************************************************/
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'custombar',
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Messages',
xtype: 'messages',
iconCls: 'user',
},
{
title: 'Sections',
xtype: 'sections'
},
{
title: 'submenu#1',
html: 'submenu#1',
group: 'Group 2',
},
{
title: 'submenu#2',
html: 'submenu#2'
},
{
title: 'submenu#3',
html: 'submenu#3'
},
]
}
});
My customBar.js code is as follows:
Ext.define('RT.view.CustomBar',{
extend: 'Ext.TitleBar',
xtype: 'custombar',
config:{
title: 'TESTING ...',
items: [
{
// name: 'BTNslidenav',
iconMask: true,
iconCls: 'list',
ui: 'plain',
},
{
iconMask: true,
// iconCls: 'user',
iconCls: 'star',
ui: 'plain',
align: 'right'
}
]
}// config
});
This customBar code is used by Views statically. My LIST components use a different solution for getting the NavigationBar and adding components to it to generate a similar looking bar as CustomBar.
I need to make a connection between my pre-existing LIST icon button from CustomBar.js with the Slide Navigation functionality - so I can drag or click the icon to show/hide the navigation menu.
UPDATE#2
Having followed your direction in your update below and in my previous question, the solution I implemented for placing my LIST back buttons into the same toolbar as my custom navigation no longer worked. The image below shows my results:
I had been successfully using the following code to detect the messages and sections list views, get the navigation bar and place my icons into the bar. My thinking was to then use a listener on the list icon to show/hide the menu. However, as there is no listener and just the slideButton configuration, my code is redundant:
Ext.define('RT.controller.BarGenerator', {
extend: 'Ext.app.Controller',
config: {
refs: {
messagesView: 'messages',
sectionsView: 'sections'
},
control: {
'sections': {
initialize: 'generateBarSections'
},
'messages': {
initialize: 'generateBarMessages'
},
}
},
//called when the Application is launched, remove if not needed
launch: function(app) {
},
generateBarSections: function(list, record){
console.log('LOADING ICONS AND CUSTOMIZING BAR!');
navigationview = this.getSectionsView().getNavigationBar();
navigationview.add(
{
// name: 'BTNslidenav',
id: 'BTNslidenav',
iconMask: true,
iconCls: 'list',
ui: 'plain',
},
{
id: 'BTNuser',
iconMask: true,
iconCls: 'user',
ui: 'plain',
align: 'right'
}
);
},
generateBarMessages: function(list, record){
console.log('LOADING ICONS AND CUSTOMIZING BAR!');
navigationview = this.getMessagesView().getNavigationBar();
navigationview.add(
{
slideButton: {
selector: "custombar"
},
// name: 'BTNslidenav',
id: 'BTNslidenav',
iconMask: true,
iconCls: 'list',
ui: 'plain',
},
{
id: 'BTNuser',
iconMask: true,
iconCls: 'user',
ui: 'plain',
align: 'right'
}
);
}
});
The Ext.ux.slidenavigation.View comes with a slide button functionality.
You only need to specify where the button should be.
You can populate the items array of the Ext.ux.slidenaviagtion.View with containers. These containers have a property slideButton where you can define a selector which is used to find the component into which the button should be inserted.
items : [
{
xtype : 'container',
group : 'my first group',
slideButton :
{
selector : 'toolbar'
},
items :
[
{
xtype : 'toolbar',
itemId : 'start_toolbar',
title : 'first view',
docked : 'top'
},
{
xtype : 'start'
}
]
},
{
xtype : 'container',
group : 'my first group',
slideButton :
{
selector : 'toolbar'
},
items :
[
{
xtype : 'toolbar',
title : 'second view',
docked : 'top'
},
{
xtype : 'anotherview'
}
]
}
]
In the example the items array of the Ext.ux.slidenavigation.View holds 2 containers. A container always holds two components. A toolbar and the actual view I want to show. The slideButton config property defines that the button is inserted into a component with the xtype toolbar.
Update:
Thank you for providing some code. I have rearranged your code, so it fits my example.
Ext.define('RT.view.CustomBar',{
extend: 'Ext.TitleBar',
xtype: 'custombar',
config:{
title: 'TESTING ...',
items: [
{
iconMask: true,
// iconCls: 'user',
iconCls: 'star',
ui: 'plain',
align: 'right'
}
]
}// config
});
First, I have removed your button from your custombar. The slide navigation will create the button for you.
Ext.define('RT.view.Main', {
extend: 'Ext.ux.slidenavigation.View',
xtype: 'main',
requires: [
'Ext.TitleBar'
],
config: {
fullscreen: true,
containerSlideDelay: 10,
selectSlideDuration: 200,
itemMask: true,
listPosition: 'left',
list: {
maxDrag: 300,
width: 200,
items: [
{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Menu',
centered: false,
width: 200,
left: 0,
},
items: [{
docked: 'top',
xtype: 'searchfield',
placeHolder: 'search',
width: 180
}]
}
]
},
slideButton: true,
/****************************************************/
slideButtonDefaults: {
iconMask: true,
iconCls: 'list',
ui: 'plain'
},
items: [
{
xtype: "container",
group: "first group",
title: 'Welcome',
iconCls: 'home',
slideButton: {
selector:"custombar"
},
items: [
{
docked: 'top',
xtype: 'custombar',
},
{
styleHtmlContent: true,
scrollable: true,
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
}
]
},
{
xtype: "container",
group: "first group",
title: 'Messages',
iconCls: 'user',
slideButton: {
selector: "custombar"
},
items: [
{
docked: 'top',
xtype: 'custombar',
},
{
xtype: 'messages'
}
]
}
]
}
});
Since the slide navigation will create the slide button for you, you can use slideButtonDefaults to customize it.
The items array of the slide navigation is the important part.
It contains now two containers. That means you get two entries in the side navigation. Each of these container contain your custombar and the view you actually want to show when one taps an entry in the side navigation.
Each of the wrapping container define where the slide button will be placed in its child views. It's done by
slideButton: {
selector: 'custombar'
}
And that's it.
Update#2
This happens because you have multiple toolbars now. The testing-toolbar is inserted into every container that will be displayed by the slide navigation. The other toolbar comes from the navigation view which is hosted inside the slide navigation container.
The are some ways to "fix" it.
First you could hide the navigation view toolbar when it comes active and your first view inside the navigation view is shown. It's important that this view is a view that will never have a logical predecessor. So there will never be any reason to have a back button at that level. When you start navigating in the navigation view and you push more and more views to it you can hide the 'testing'-toolbar. The question is: is it important that you have the slide button in every child view or is it good enough to have it on the top view only. Consider this: to many buttons in a toolbar is quite to much and might confuse the user. Opening the slide navigation is still possible by swiping.
Or you don't use your custombar at all but customize the titlebar of the navigation view. The items array of your slide navigation would look like this:
items: [
{
xtype: "container",
group: "first group",
title: 'Welcome',
iconCls: 'home',
slideButton: {
selector:"titlebar"
},
items: [
{
xtype: "navview"
}
]
},
{
xtype: "container",
group: "first group",
title: 'Messages',
iconCls: 'user',
slideButton: {
selector: "tilebar"
},
items: [
{
xtype: 'navView2'
}
]
}
]
But be aware of having two buttons in the navigation titlebar (docked to the left) when you start pushing views.
Here my code in sencha touch, i tried to add 2 button horizontaly, Means one to other.No,luck its keep on coming one in upper side and the other one lower.
var profilese = {
standardSubmit : false,
items: [tab,{
xtype: 'button',
text: 'ADD',
ui: 'confirm',
handler: function() {
view.setActiveItem(2, {type:'fade', direction:'right'});
}
},{
xtype: 'DELETE',
text: 'Search Friends',
ui: 'Search',
handler: function() {
view.setActiveItem(3, {type:'fade', direction:'right'});
}
}]
};
How to set button in a same row.Please help me to sort it out.
I'm not sure what tab is in your code, but what you need to get the buttons aligned horizontally is an hbox layout:
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'ADD',
ui: 'confirm',
handler: function() {
view.setActiveItem(2, {type:'fade', direction:'right'});
}
},{
xtype: 'button',
text: 'Search Friends',
ui: 'Search',
handler: function() {
view.setActiveItem(3, {type:'fade', direction:'right'});
}
}
]
http://docs.sencha.com/touch/2.2.1/#!/api/Ext.layout.HBox
In ExtJS point, there must be a container as parent to hold the children(Buttons). And the set the layout config as "hbox".
The code must look like,
items:[
tab,
{
xtype:'container',
layout:'hbox',
items:[
{
xtype:'button1'
},
{
xtype:'button2'
}
]
}
]
layout: {
type: 'column'
},
items: [
{
xtype: 'button',
columnWidth: 0.5,
text: 'ADD',
ui: 'confirm',
handler: function() {
view.setActiveItem(2, {type:'fade', direction:'right'});
}
},{
xtype: 'button',
columnWidth: 0.5,
text: 'Search Friends',
ui: 'Search',
handler: function() {
view.setActiveItem(3, {type:'fade', direction:'right'});
}
}
]
i have a js view that contain button when i click this button i want to open another view
and it connot work
this is my first view
Ext.define('Ext4Example.view.login.WestMenu', {
extend: 'Ext.panel.Panel',
alias: 'widget.westmenu',
frame:'true',
initComponent: function() {
Ext.apply(this, {
title: 'Writeup',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
iconCls:'logo',
split: true,
collapsible: true,
items: [
{
xtype : 'button',
text:'Ajouter réunion',
action:'meet',
iconCls:'add',
name:'meet',
width:120,
height:30,
x:20,
y:30
}]
});
this.callParent(arguments);
}
});
and this is my second view
Ext.define('Ext4Example.view.login.create-rd', {
extend: 'Ext.window.Window',
alias: 'widget.test',
frame:'true',
initComponent: function() {
var win= Ext.create('Ext.window.Window', {
title: 'Ajouter réunion',
width : 630,
height: 600,
layout: 'fit',
iconCls:'add',
items: [{
xtype: 'form',
id : 'form-widgets',
},
items: [
{
fieldLabel: 'date',
xtype : 'datefield',
name : 'date'
}
],
}
]
}).show();
}
});
and this is my controller
Ext.define('Ext4Example.controller.Login', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'Home',
selector: 'home'
},
{
ref: 'Login',
selector: 'login'
}
],
stores: ['Login'],
models: ['Login'],
views: ['login.LoginForm','login.HomePage','login.CenterPanel','login.WestMenu','login.create-rd'],
init: function() {
this.control({
'login button[action=reset]': {
'click' : function(button, event, opt) {
var form = button.up('form');
form.getForm().reset();
}
},
'login button[action=connect]': {
'click' :this.connect
},
'login button[action=meet]': {
'click' :this.meet
}
});
},
connect:function()
{
this.getLogin().close();
var view1 = Ext.widget('home');
},
meet:function()
{
this.getHome().close();
var view2 = Ext.widget('test');
}
});
please any one have a solution of this
You have nothing that matches login. The selector login button[action=reset] means "Find a button xtype, with an attribute action, with a value reset, that exists as a child item under a container with xtype login".
It's the last past of your selector that's not satisfied.
Change the selector to:
westmenu button[action=reset]
i'm new in sencha touch and i'm having a weird problem with a button. I'm using mvc, and i have:
Adduserview.js
Ext.define('App.view.Adduserview', {
extend: 'Ext.form.Panel',
xtype: 'adduserview',
requires: ['Ext.form.FieldSet','Ext.field.Select','App.store.Companies'],
config: {
id: 'userform',
items: [
{
xtype: 'fieldset',
title: 'Details',
items:[
{
xtype: 'textfield',
name: 'userName',
label: 'Name'
},
{
xtype: 'textfield',
name: 'userLastname',
label: 'Lastname'
},
{
xtype: 'textfield',
name: 'userNumber',
label: 'Number'
}
]
},
{
xtype: 'fieldset',
title: 'Links',
items: {
xtype: 'selectfield',
label: 'Company',
store: Ext.create('App.store.Companies'),
displayField: 'companyName',
valueField: 'companyName'
}
},
{
xtype: 'button',
text: 'Send',
id: 'adduserButton'
}
]
}
});
Adduser.js
Ext.define('App.controller.Adduser', {
extend: 'Ext.app.Controller',
config: {
refs:{
userform: '#userform'
},
control: {
'#adduserButton': {
tap: function(){
var valuesUser = this.getUserform().getValues();
console.log(valuesUser);
if (notNull(valuesUser.userName) && notNull(valuesUser.userLastname) && notNull(valuesUser.userNumber)){
Ext.Ajax.request({
url: 'http://server.com/insertUser.php',
params: valuesUser,
method: 'post',
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
this.getUserform().reset();
}
else{
Ext.Msg.alert('Error', 'All the fields are necessary');
}
}
}
}
}
});
function notNull(a) {
if(a!="" && !(a.match(/^\s+$/))){
return true;
}
else{
return false;
}
};
The problem is that the button does not work, it just does nothing when pressed, and i have other two FormPanels exactly like that but with different data, and each of them has a controller just like the one i showed but with different code in the tap function, and they work. I noticed that when i see the scripts that are loaded in chrome, the Adduser.js is not there, so i guess thats the reason its not working, but im not sure why its not loading.
By the way i added the controllers to App.js.
Thanks for the help.
Change your refs to
refs:{
userButton: '#adduserButton'
}
And the Control As
control: {
userButton: {
Hope this helps you
update your controoler code with
Ext.define('App.controller.Adduser', {
extend: 'Ext.app.Controller',
config: {
refs:{
userform: '#userform'
}
},
init: function () {
this.control({
'#adduserButton': {
tap: function(){
var valuesUser = this.getUserform().getValues();
console.log(valuesUser);
if (notNull(valuesUser.userName) && notNull(valuesUser.userLastname) && notNull(valuesUser.userNumber)){
Ext.Ajax.request({
url: 'http://server.com/insertUser.php',
params: valuesUser,
method: 'post',
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
this.getUserform().reset();
}
else{
Ext.Msg.alert('Error', 'All the fields are necessary');
}
}
}
});
},
}
});
Add
controllers: [
'App.controller.Adduser',
],
in app