I'm trying to create panel draggable by an element inside that panel.
Unfortunately delegate property is not working in my code and whole panel can be used as drag handle.
What am I doing wrong?
How to fix this code?
I'm using extjs 4.1.1.
Thanks.
http://jsbin.com/ahipob/1/watch
Ext.onReady(function() {
var btn1 = Ext.create('Ext.button.Button', {
text: 'btn1'
});
var btn2 = Ext.create('Ext.button.Button', {
text: 'btn2'
});
var panel1 = Ext.create('Ext.panel.Panel', {
width: 100,
height: 100,
items: [btn1, btn2],
draggable: {
delegate: '#'+Ext.escapeId(btn1.id)
}
});
Ext.create('Ext.Viewport', {
renderTo: Ext.getBody(),
items: [
panel1
]
});
});
Related
If I show an ExtJS context menu on ExtJS panel after text selection, it hides or deselects the text selection or window selection. How can I keep the selection when the context menu is shown?
listeners: {
afterrender: function(comp) {
comp.getEl().on('contextmenu', function(e,src) {
//stop default browser context menu appearing
e.stopEvent();
contextMenu = new Ext.menu.Menu({
items: [{
text: "Show On Map",
iconCls: 'map',
handler: function(a,b,c) {
alert(this.id);
}
}]
});
contextMenu.showAt([e.getPageX(),e.getPageY()]);
});
}
}
var contextMenu = Ext.create('Ext.menu.Menu', {
items: [{
id:'zoom',
text: 'Zoom in',
layout: {
align: 'left'
},
handler: function() {
alert('You clicked the Zoom in button!');
}
},
{
text: 'Zoom out',
align: 'left'
},
{
text: 'Add Marker',
align: 'left'
}
]
});
map.div.oncontextmenu = function noContextMenu(e) {
if (OpenLayers.Event.isRightClick(e)){
contextMenu.showAt(e);
}
return false; //cancel the right click of brower
};
I have a map with a marker, and i want to make the marker clicktable to show some basic info.
I am new to Sencha, and I need advice what should I implemante in listener function to get the same effect as i click on list item:
for example, this is my code of maprender function
var lat = 37.428607;
var lng = -122.169344;
var latLng = new google.maps.LatLng(lat, lng);
var marker = new google.maps.Marker({
position: latLng,
map: gmap,
draggable: false,
animation: google.maps.Animation.DROP,
title: 'cool'
});
var contentString = 'bla bla bla';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
/* here comes something that will make my detail list visible with the marker details*/
});
and i want to make it work in the same way as my function for "itemtap" which i use in my list... something like this:
onMyListItemTap: function(dataview, index, target, record, e, options) {
this.setActiveItem('detalji');this.down('#back').show();
this.down('#detalji').setData(record.data);
}
There is a great example on Github for Sencha Touch 1...I believe it's called World Map. If you unzip that (the app is in one of the many folders) you can see a Google map wil multiple custom markers. This project is very useful for learning, as it not only shows custom map markers, but also popup overlays on a marker click.
I have yet to adapt it to Sencha Touch 2, but it shouldn't be too difficult...here is some example code (after multiple markers have been added):
google.maps.event.addListener(marker, 'click', function()
{
if (!this.popup)
{
this.popup = new Ext.Panel(
{
floating: true,
modal: true,
centered: true,
width: 500,
styleHtmlContent: true,
scroll: 'vertical',
items:[{
xtype:'button',
ui:'round',
text:'See Country Profile',
handler:goToCountryWrapper,
scope : this
},
(new countryOverlay(country)).overlayPanel
],
layout: {
type: 'auto',
padding: '55',
align: 'left'
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: country.title
}],
});
};
this.popup.show('pop');
});
Also I think from what I understand about Sencha Touch 2, you would have to put a listener in your map controller (MyApp.map.controller file)....read up about the refs, as the refs 'finds' the marker(s) you have defined and adds a listener to the item.
If you have any progress please post your findings :-)
I have a MainView with 'card' layout has 2 items : MenuView and TestView. When I setActive for the MenuView, it has width equal to the MainView's width which is 1280. In the next action after tap a button in menuView, I setActive the TestView, but it's width is only 0. Can anyone explain that for me ? And give me a way to set the TestView's width to 1280.
Here is my code in sencha touch 1:
'Ext.regController('MainController',{
'index': function(options){
if (!Test.views.mainView){
Test.views.mainView = new Test.views.MainView();
}
console.log('mainView width: '+ Test.views.mainView.getWidth());
console.log('menuView width: '+ Test.views.menuView.getWidth());
Test.views.mainView.setActiveItem(Test.views.menuView);
},
'start': function(options){
console.log('testView width: '+ Test.views.testView.getWidth());
Test.views.mainView.setActiveItem(Test.views.testView);
}
});
Test.views.MainView = Ext.extend(Ext.Panel, {
fullscreen : 'true',
layout : 'card',
cardSwitchAnimation : 'slide',
initComponent : function (){
Ext.apply(Test.views, {
menuView: new Test.views.MenuView(),
testView: new Test.views.TestView()
});
this.items = [Test.views.menuView, Test.views.testView]
Test.views.MainView.superclass.initComponent.call(this);
}
});
Test.views.MenuView = Ext.extend(Ext.Panel,{
initComponent: function(){
this.startButton = new Ext.Button({
text: 'Start',
ui: 'action',
scope: this,
handler: function(){
Ext.dispatch({
controller: Test.controllers.mainController,
action: 'start'
});
}
});
this.exitButton = new Ext.Button({
text: 'Exit',
ui: 'action',
scope: this,
handler: function(){
}
});
this.items = [this.startButton, this.exitButton]
Test.views.MenuView.superclass.initComponent.call(this);
}
});
Test.views.TestView = Ext.extend(Ext.Panel,{
initComponent: function(){
this.html = 'test';
Test.views.TestView.superclass.initComponent.call(this);
}
});
You can set width with setWidth();
Test.views.testView.setWidth('50px');
The view doesnt render properly . It only shows the button . What am i doing wrong here ?
Ext.application({
name: 'App',
models: ['Picture'],
stores: ['Pictures'],
views: ['Picture'],
requires: [
'Ext.carousel.Carousel',
'Ext.data.proxy.JsonP'
],
launch: function() {
var titleVisible = false,
info, carousel;
carousel = Ext.create('Ext.Carousel', {
store: 'Pictures',
direction: 'horizontal',
listeners: {
activeitemchange: function(carousel, item) {
info.setHtml(item.getPicture().get('title'));
}
}
});
info = Ext.create('Ext.Component', {
cls: 'apod-title',
top: '50',
left: 0,
right: 0
});
var view = Ext.create('Ext.NavigationView', {
title:'Paramore',
items: [carousel,info,{xtype:'button',text:'help'}]
});
Ext.Viewport.add(view);
--- some code ----
});
}
});
.I also tried this
var view = Ext.create('Ext.NavigationView', {
title:'Test',
items : [
{
xtype : 'container',
title : 'test',
scrollable : 'vertical',
items : [carousel,info]
}
There are a few issues with your code:
Ext.Carousel does not support the store configuration. You can learn how to do this here.
The items specified in a navigation view is the initial stack of items when released. So if you put in 3 items, the last item will be visible and the Back button will be visible. When you press the back button, it will remove that last item and there will be 2 items in the items stack.
You probably shouldn't put a Ext.Button directly inside a NavigationView. Doing this will make the button stretch to the size of the NavigationView, making it look pretty bad.
If you remove the reference to a store and listeners from your Carousel, your example works as expected. Here is the code I used to make it work. I just commented out broken code:
Ext.application({
name: 'App',
// models: ['Picture'],
// stores: ['Pictures'],
// views: ['Picture'],
requires: ['Ext.carousel.Carousel', 'Ext.data.proxy.JsonP'],
launch: function() {
var titleVisible = false,
info, carousel;
carousel = Ext.create('Ext.Carousel', {
// store: 'Pictures',
direction: 'horizontal',
items: [{
html: 'one'
}, {
html: 'two'
}, {
html: 'three'
}]
// listeners: {
// activeitemchange: function(carousel, item) {
// // info.setHtml(item.getPicture().get('title'));
// }
// }
});
info = Ext.create('Ext.Component', {
cls: 'apod-title',
top: '50',
left: 0,
right: 0
});
var view = Ext.create('Ext.NavigationView', {
title: 'Paramore',
items: [carousel, info,
{
xtype: 'button',
text: 'help'
}]
});
Ext.Viewport.add(view);
}
});
I'm writing a Sencha Touch 1.1 MVC app.
My view code looks like this
MyApp.views.MainIndexView = Ext.extend(Ext.TabPanel, {
ui: 'light',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
initComponent: function() {
this.topToolbar = new Ext.Toolbar({
title: 'My App'
})
this.temperatureTab = new Ext.Panel({
title: 'Temperature',
html: '<h1>Log A Temperature</h1>'
})
this.dockedItems = [this.topToolbar];
this.items = [this.temperatureTab];
this.tabBar = {
dock: 'bottom',
layout: {
pack: 'center'
}
}
MyApp.views.MainIndexView.superclass.initComponent.call(this);
}
})
The view renders, but the tabBar at the bottom is super small. It makes no sense.
Is there a way to make this normal height without adding icons?
Adding icons was the only way that I found to fix this.