Extjs iframe - Embedding content from another page into an extjs application - iframe

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}'
}
}]
});

Related

ExtJS, combo, listbox, text-align

Could you help me to align to the right the entries in ExtJS combo listbox?
The config 'style' doesn't work with text-align or I'm doing something wrong?
See sample coding or the fiddle example here
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
defaultType: 'textfield',
fieldDefaults: {
labelAlign: 'right',
labelWidth: 150
},
renderTo: Ext.getBody(),
standardSubmit: true,
title: 'Form',
width: 400,
items: [{
displayField: 'val1',
fieldLabel: 'Combo',
name: 'field01',
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
fields: ['key1', 'val1'],
style: 'text-align: right', // doesn't work
data: [
{"key1":"AL", "val1":"Alabama..."},
{"key1":"AK", "val1":"Alaska"},
{"key1":"AZ", "val1":"Arizona"}
]
}),
valueField: 'key1',
xtype: 'combo'
}]
});
}
});
try with this .. it is working fine at my end.
CSS
.alignRight .x-boundlist-item{
text-align: right;
}
add the above css class to our combo using listConfig .You can see the same in the code.
displayField: 'val1',
fieldLabel: 'Combo',
name: 'field01',
queryMode: 'local',
listConfig:{
cls:'alignRight',
},
store: Ext.create('Ext.data.Store', {
fields: ['key1', 'val1'],
data: [
{"key1":"AL", "val1":"Alabama..."},
{"key1":"AK", "val1":"Alaska"},
{"key1":"AZ", "val1":"Arizona"}
]
}),
valueField: 'key1',
xtype: 'combo'
Directly select the class of the combobox list in css and apply the style it should override any ExtJS style.
This will work:
.x-combo-list-item {
text-align: right;
}

How to display Open Street Map using Ext.ux.LeafletMap in Sencha Touch2

I have been overviewing HTML5 base mobile framework and playing with Sencha Touch. It looks great but hard to be familiar with, particularly debugging. I would like to display Open Street Map and I found out a plugin called Ext.ux.LeafletMap. I put some code but I cannot get the map on the browser.
Here is my code:
app/view/Main.js
Ext.define("MyApp.view.Main", {
extend: 'Ext.TabPanel',
requires: [
'Ext.TitleBar',
'MyApp.view.Home',
'MyApp.view.Map'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'homecard'
},
{
xtype: 'mapcard'
}
]
}
});
app/view/Map.js
Ext.define('MyApp.view.Map', {
extend: 'Ext.Panel',
xtype: 'mapcard',
requires: ['Ext.ux.LeafletMap'],
config: {
title: 'Map',
iconCls: 'maps',
items: [{
layout: 'fit',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Maps',
items: [{
xtype: 'button',
align: 'left',
ui: 'back',
text: 'Back'
}]
}, {
// Ext.ux.LeafletMap Component
xtype: 'leafletmap',
id: 'leafletmap',
useCurrentLocation: false,
autoMapCenter: false,
enableOwnPositionMarker: false,
mapOptions: {
zoom: 15
}
}]
}]
}
});
Home view is shown well but nothing appears in map page. In browser debugging console has no error.
Your help would be appreciated.

Arranging components in Sencha Touch 2

I need some help in Sencha Touch because I'm not familiar with it.
I want to arrange two buttons in the center of the page.
My problem is, that the container doesn't stretch in the place between the top- and bottom-toolbar.
Ext.define("AccessibleMap.view.ChooseView", {
extend: "Ext.form.Panel",
alias: "widget.chooseview",
initialize: function () {
console.log("Start");
this.callParent(arguments);
var topToolbar = {
xtype: "toolbar",
docked: "top",
title: "Accessible Map",
};
var locationButton = {
xtype: "button",
maxWidth: '60%',
minWidth: '50%',
text: "Standort ausgeben",
handler: this.onLocationBtnTap,
scope: this,
margin: '20 5 20 5'
};
var poisButton = {
xtype: "button",
maxWidth: '60%',
minWidth: '50%',
text: "POIs auswählen",
handler: this.onPoiBtnTap,
scope: this,
margin: '20 5 20 5'
};
var buttonCont ={
xtype: 'container',
style:{
background: 'red',
'margin-top':' 14%'
},
layout:{
type: 'vbox',
align: 'center'
},
items:[
locationButton,
poisButton
]
};
//buttons for bottom-toolbar
...
var tabpanel ={
xtype: 'toolbar',
docked: 'bottom',
layout:{
pack:'center',
type: 'hbox'
},
items: [ homeButton, locateButton, optionsButton, infoButton]
};
this.add([ topToolbar, buttonCont, tabpanel ]);
},
//listeners...
});
I colored the container red, thus I can see how big it is.
Making the container fullscreen results in an empty container.
Can somebody help me please?
I found an answer to this problem. I changed the code so that I don't have to call the initialize function. Instead, I put everything in the config settings.
Ext.define("AccessibleMap.view.ChooseView", {
extend: "Ext.form.Panel",
alias: "widget.chooseview",
config:{
layout:{
type: 'vbox',
pack: 'center'
},
items:[{
xtype: "toolbar",
docked: "top",
title: "Accessible Map",
},{
xtype: 'container',
flex: 1,
layout:{
type: 'vbox',
align: 'center'
},
items: [{
xtype: 'button',
...
}],
}],
listeners:[{ ...}]
}
});
As you can see, I defined the layout in the outer Panel to vbox with pack = center and the inner container to align = center. Moreover I defined a flex for the container.

Buttons in a same row

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'});
}
}
]

action button extjs don't work

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]

Resources