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'});
}
}
]
Related
I am new to working with iframes in extjs. I am looking to embed content from another page (another URL) into an existing extjs application. Is extjs iframe the correct way to go about it? if so, how do I render the component ? Any suggestions would be helpful for me to try. I was trying the code as below, but I don't see the component being rendered/contents getting embedded.
Ext.define(Ext.panel.Panel,
initComponent: function(){
this.items = [{
xtype: 'box',
autoEl: {
tag: 'iframe',
src: some URL,
width: 640,
height: 680,
}
}];
this.callParent(arguments);
}
});
1.You can create a Extjs js class like above and to render this component,you need to create and use it's instance like below code.
Ext.define('Iframe', {
extend: 'Ext.panel.Panel',
xtype: 'sample',
initComponent: function(){
this.items = [{
xtype: 'box',
autoEl: {
tag: 'iframe',
src: 'https://www.sencha.com/',
width: 640,
height: 680,
}
}];
this.callParent(arguments);
}
});
Ext.create({
xtype: 'sample',
renderTo: Ext.getBody()
});
2.You can create an Extjs class like below and use them inside your application.
In my case i have created Extjs class and used it in my application using it's xtype.
Extjs class code:
Ext.define('MyApp.view.main.Iframe', {
extend: "Ext.panel.Panel",
xtype: 'iframe',
title: 'iframe',
initComponent: function() {
var me = this;
me.items = [{
xtype: 'box',
autoEl: {
tag: 'iframe',
src: 'https://www.sencha.com/',
width: 640,
height: 680,
}
}];
this.callParent(arguments);
},
});
Inside my main.js:(main-view)
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'MyApp.view.main.MainController',
'MyApp.view.main.MainModel',
'MyApp.view.main.List'
],
controller: 'main',
viewModel: 'main',
ui: 'navigation',
header: {
layout: {
align: 'stretchmax'
},
title: {
bind: {
text: '{name}'
},
flex: 0
},
iconCls: 'fa-th-list'
},
tabBar: {
flex: 1,
layout: {
align: 'stretch',
overflowHandler: 'none'
}
},
items: [{
title: 'Home',
iconCls: 'fa-home',
items: [{
xtype: 'mainlist'
}]
}, {
title: 'Groups',
iconCls: 'fa-users',
items: [{
xtype: 'iframe'
}]
}, {
title: 'Settings',
iconCls: 'fa-cog',
bind: {
html: '{loremIpsum}'
}
}]
});
I'm trying to do a dropdown menu with for each button in it, a link to a page.
I made the following code but I'm not able to create some link inside, i get an error each time :
Ext.create('Ext.menu.Menu', {
layout: 'hbox',
width: 500,
height: 40,
margin: '10 0 0 10',
renderTo: Ext.getBody(),
floating: false,
items: [{
text: 'Home'
},
{
text: 'Inventory',
menuAlign: 'tr-br',
menu:{
items:[
{
text: 'Show',
},
{
text: 'Search'
},
{
text: 'Service Catalog'
}
]
}
},
{
text: 'Request',
menuAlign: 'tr-br',
menu:{
items:[
{
text: 'New Request'
},
{
text: 'My requests'
}
]
}
},
{
text: 'Management',
menuAlign: 'tr-br',
menu:{
items:[
{
text: 'Sites'
},
{
text: 'Users'
},
{
text: 'Stocks'
},
{
text: 'Export'
}
]
}
},
]
});
Does anyone know how to create link in a button ?
Solution find :
I just added a handler in my code :
{
text: 'Search',
handler : menuH
},
and the handler :
var menuH = function() {
window.location = "/myapplication";
}
I just created a little Homepage with Sencha Touch. Now I want use the buttons to link to another site/page. How can I do that? I don't want to use the standard Tab bar.
Ext.define('RMA-App.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
requires: [
'Ext.TitleBar'
],
config: {
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'RMA-App'
},
{
xtype: 'button',
text: 'Event anlegen',
ui: 'normal',
iconCls: 'add',
iconMask: 'true',
iconAlign: 'top',
margin: '5 5 5 5'
},
{
xtype: 'button',
text: 'Events anzeigen',
ui: 'normal',
iconCls: 'list',
iconMask: 'true',
iconAlign: 'top',
margin: '5 5 5 5'
}
]
}
});
You can navigate to view with a handler
{
xtype: 'button',
text: 'Events anzeigen',
handler: function() {
var someRootContainer = Ext.ComponentQuery.query("#someRootContainer");
someRootContainer.removeAll();
someRootContainer.add(Ext.create(yourTargetView));
}
}
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 hope this is my last question of today. I found a nice actioncolumn option in designer 2. I add one to my grid and it looks like this:
xtype: 'gridpanel',
title: 'Reports',
forceFit: true,
store: 'ReportsStore',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Type',
text: 'Type'
},
{
xtype: 'gridcolumn',
dataIndex: 'Description',
text: 'Description'
},
{
xtype: 'actioncolumn',
dataIndex: 'Name',
items: [
{
handler: function(view, rowIndex, colIndex, item, e) {
console.log(row, col);
},
altText: 'Run report',
iconCls: 'runReport'
}
]
}
],
viewConfig: {
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
iconCls: 'addReport',
text: 'Add report',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
But there is nothing happening. What i want is that there is an button/icon and when you click on it it will open a ext.window with the reportId from that row. I can't find how i do this with designer.
I don't see an icon now so there is nothing yet to click on. What do i miss?
Thanks,
TJ
You miss listener for this button:
add something like that into your item definition:
handler: function(grid, row, col) {
console.log(row, col);
}