I understood that by calling MyDetailView.Update(record.data) I send record.data to MyDetailView and can access them in the xtemplate:
tpl:'<h1>{title}></h1>'
Additionally I want to use record.data in an item of xtype 'map':
items: [
{
xtype: 'map',
getLocation: true,
padding: '20 0 0 0',
mapOptions: {
center : new google.maps.LatLng(lng, lat), // <-- here record.data.lat
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
]
How can I access the data in MyDetailView?
Thanks
----------------EDIT------------------
I add my complete code. In the list view I call an AppDetailcard.update(record.data).
var AppDetailcard = new Ext.Panel ({
id: 'detailcard',
styleHtmlContent: false,
tpl: 'my {lat}', //<-- here it works
fullscreen: true,
dockedItems: [AppDetailcardToolbar],
items : [
{
xtype: 'map',
getLocation: true,
mapOptions: {
center : new google.maps.LatLng(data.lat, data.lng), //<-- here it does not
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
]
You have to also push the new record into your items array.
this.down('map').setMapCenter({
latitude: newRecord.data.latitude,
longitude: newRecord.data.longitude
});
I usually push records, not data, into the view and then use the updateRecord event to accept that record and push it further down the items array.
Look at the navigationview example on the Sencha site, in the Show.js view file, where they do exactly that.
Related
I have put two buttons inside a tab Panel in Sencha Touch 2 application. The code is given below:
var btnAttendance = Ext.create('Ext.Button', {
text: 'Take Attendance',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var btnAddUser = Ext.create('Ext.Button', {
text: 'Add User',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: true,
title: 'Home',
defaults: {
margin: 5
},
layout: {
type: 'vbox',
align: 'center'
},
padding: 10,
items: [
btnAttendance,
btnAddUser
]
});
Ext.application({
requires: [
'Ext.tab.Panel'
],
launch: function () {
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
buttonContainer,
{
title: 'Present',
items: {
html: '2',
centered: true
},
cls: 'present'
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
}
});
I have tried modifying the handler function as:
handler: function (button, event)
But this also doesn't work.
Thanks,
Nitin
You need to put all your code inside Ext.application... and launch:function(){...}.... Your code is working fine. See demonstration here.
But then again, buttonContainer is not really being added to any tab panel. If you change the tab, you can see buttonContainer is gone once to change the tabs. If you want to add it inside any tab do this-
First -
Set fullscreen:false to you buttonContainer panel.
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: false,
....... //rest of the code.
And suppose you want to add those buttons in Present tab. You can do this with following--
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
{
title: 'Present',
cls: 'present',
items: [
{
html: '2',
centered: true
},
buttonContainer
]
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
Here, buttonContainer is added as an item inside present tab only. You can switch the tabs and can see buttons there with correct event handler.
See this demo here
If you follow MVC architecture, your job becomes much easier writing application having multiple views and user interactions. ST is all about MVC and it's good practice to follow it.
Pardon me if this doesnt make much sense as i am still trying to understand certain aspects of extjs.. I m trying to to dynamically fetch a menu when a page is loaded. But seems like my MenuFetch() function does not get called.
Here is my code and here is the page:
http://srikanthrajan.com/test/
Center = Ext.create('Ext.panel.Panel', {
title: "User Admin",
region: 'center',
layout: 'fit',
dockedItems: {
xtype: 'panel',
dock: 'left',
title: 'Main Menu',
width: 160,
layout: 'anchor',
collapsible: true,
collapseDirection: 'left',
items: [
{
defaults: {
width: 140,
layout: 'vbox',
xtype: 'linkbutton'
},
id: 'MainMenu',
xtype: 'panel',
listeners: {
load: function(menu) {
menu.show()
MenuFetch()
this.load()
}
}
}
]
}
});
//function that uses ajax to fetch menu items and add them
function MenuFetch() {
Ext.getBody().mask('loading')
var menu = Ext.ComponentManager.get('MainMenu')
menu.removeAll(true)
Ext.Ajax.request({
url: 'PanelScripts/getMenu.php',
method: 'POST',
callback: function(opt, success, response) {
var text = response.responseText;
var obj = Ext.JSON.decode(text);
if (success && !obj.failure) {
menu.add(obj)
Ext.getBody().unmask()
menu.show()
} else {
obj = Ext.JSON.decode(response.responseText);
Ext.Msg.alert('Error',obj.Error)
Ext.getBody().unmask()
}
}
});
}
PS: I am not sure if I even need the load listener. Basically I need to call the menuftech function which fetches the menu items in a json format.
Use the Ext.ComponentLoader (or loader config property) to load remote content for the menu. It seems like the xtype should be 'menu' instead of 'panel' based on what you are trying to accomplish. Try something like this:
var adminPanel = Ext.create('Ext.panel.Panel', {
title: 'User Admin',
region: 'center',
layout: 'fit',
dockedItems: {
xtype: 'panel',
dock: 'left',
title: 'Main Menu',
width: 160,
layout: 'anchor',
renderTo: Ext.getBody(),
items:[
{
xtype: 'menu',
width: 100,
loader: {
url: 'foo.bar',
autoLoad: true,
callback: function(loader, success, response, options) {
var menu = adminPanel.down('menu');
if (success) {
menu.add(response.items);
menu.show();
}
},
scope: this
}
}
]
}
});
forum member
I am having some problems in displaying different panel on the center area of border layout window.
Consider I am having border layout window with east side containing different button, which on click will display the grid on the center of the layout window.
my window is shown below with east containing buttons and center is empty.
my updated controller code is given below
Ext.define('rms.controller.companymgt.CompanyMgtController',{
extend: 'Ext.app.Controller',
stores:['companyStore'],
models:['companyModel'],
views: [
'companymgt.companyMain',
'companymgt.companyView',
'companymgt.companyDetail',
'companymgt.companyAdd',
'companymgt.fileUpload'
,'companymgt.departmentDetail',
'companymgt.designationDetail',
'companymgt.groupDetail'
],
refs: [{
ref: 'companyMain',
autoCreate: true,
selector: 'companymain',
xtype: 'companymain'
},{
ref: 'companyAdd',
autoCreate: true,
selector: 'companyadd',
xtype: 'companyadd'
},{
ref: 'fileUpload',
autoCreate: true,
selector: 'fileupload',
xtype: 'fileupload'
},{
ref: 'departmentDetail',
autoCreate: true,
selector: '#departmentdetail',
xtype: 'departmentdetail'
},{
ref: 'designationDetail',
autoCreate: true,
selector: '#designationdetail',
xtype: 'designationdetail'
},{
ref: 'groupDetail',
autoCreate: true,
selector: '#groupdetail',
xtype: 'groupdetail'
},{
ref: 'companyDetail',
autCreate: true,
selector: '#companydetail',
xtype: 'companydetail'
}],
init: function() {
this.control({
'#companyview button[action=company-view]': {
click: this.createCompanyview
},
'#companyview button[action=department-view]': {
click: this.createDepartmentview
},
'#companyview button[action=designation-view]': {
click: this.createDesignationview
},
'#companyview button[action=group-view]': {
click: this.createGroupview
},
'#companyview button[action=file-view]': {
click: this.createFilemgtview
},
'#companydetailtoolbar #mnuDept': {
click: this.createDepartmentnew
},
'#companydetailtoolbar #mnuExcel': {
click: this.exportExcel
},
'#companydetailtoolbar #mnuCSV': {
click: this.exportCSV
}
});
},
createCompanyview: function(btn) {
alert('company view clicked');
},
createDepartmentview: function(btn) {
alert('department view clicked');
var departmentCard = this.getDepartmentDetail();
var mainComp = this.getCompanyMain();
mainComp.getLayout().setActiveItem('departmentCard');
},
createDesignationview: function(btn) {
alert('designation view clicked');
},
createGroupview: function(btn) {
alert('group view clicked');
},
createFilemgtview: function(btn) {
alert('FILE MGT WINDOW');
this.getFileUpload().show();
},
createDepartmentnew: function(obj) {
this.getCompanyAdd().show();
}
});
my main view code is given below
Ext.define('rms.view.companymgt.companyMain', {
extend: 'rms.model.desktopmgt.Module',
alias: 'widget.companymain',
requires: ['rms.view.companymgt.companyView','rms.view.companymgt.companyDetail'],
id: 'companymain',
init: function() {
this.launcher = {
text: 'Company Management System',
iconCls: 'project-mini-icon',
handler: this.createWindow,
scope: this
};
},
createWindow: function() {
var desktop = this.app.getDesktop();
var win = desktop.getWindow('companymgt-win');
if(!win){
win = desktop.createWindow({
id: 'companymgt-win',
title: 'Company Management System',
height: 566,
width: 900,
layout: 'border',
constrain: true,
modal: true,
closeAction: 'destroy',
items: [{
region: 'west',
collapsible: true,
//html: 'MAIN VIEW',
xtype: 'companyview',
flext:1
},{
region: 'center',
collapsible: true,
//html: 'DETAIL VIEW',
xtype: 'companydetail',
flex:3
}]
});
}
win.show();
return win.setPosition(100,100);
}
});
when the company button is clicked I get the alert window.
But based on the button click I want to open different detail view to the center layout of the window.
Please suggest me some solution, so I can view different window on the border layout of the window as shown above.
I would go with a card layout. The easiest thing would be to give each component an itemId. Then in your controller you would have:
, refs: [
{
ref: 'mainCardComponent'
, selector: '#mainCardComponent'
},
{
ref: 'companyCard'
, selector: '#companyCard'
},
{
ref: 'departmentCard'
, selector: '#departmentCard'
}...
Then you can reference using get... within the scope of your controller like:
var companyCard = this.getCompanyCard();
To swap out the cards, you would do something like:
var mainComp = this.getMainCardComponent();
mainComp.getLayout().setActiveItem('companyCard');
You have two options:
Make center piece a container and remove old/add new stuff to it when needed.
If you have limited number of content pages make center piece layout 'card' and create all pages at once. Only one will be visible. You can change visibility when user click certain button.
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 have a question about xtypes. When I do this:
// map
var map = new Ext.map({
fullscreen: true,
getLocation: true,
mapOptions: {
zoom: 12
}
});
map.map.setCenter(new google.maps.LatLng(record.attributes.record.data.latitude, record.attributes.record.data.longitude));
Everything is fine, the map is showing up.
Now, when I work with xtypes, the 'map'-variable won't recognize the 'setCenter'-property.
Code:
var map =
{
fullscreen: true,
xtype: 'map',
title: 'Map',
getLocation: true,
useCurrentLocation: true,
mapOptions:
{
zoom: 12
}
};
map.map.setCenter(new google.maps.LatLng(record.attributes.record.data.latitude, record.attributes.record.data.longitude));
With this code, I get this in the console:
Uncaught TypeError: Cannot call method
'setCenter' of undefined
I hope someone can help me. Thanks in advance!
When you are calling map.map.setCenter(), your map object has already been instantiated. By defining your map with xtype, lazy instantiation is used.
You could try somethign along the lines of:
{
xtype: 'map',
fullscreen: true,
getLocation: true,
mapOptions: {
zoom: 12
},
listeners: {
maprender: function(component, map) {
map.setCenter( ... )
}
}
}