I'm trying to create view which loads list using JSONP, but I want to reload the list when user choose a value from selectfield.
My code:
var distance = 50;
Ext.define('MyApp.view.ListUpdate', {
extend: 'Ext.Container', //Ext.navigation.View
xtype: 'listUpdate',
requires: [
'Ext.dataview.List',
'Ext.data.proxy.JsonP',
'Ext.data.Store',
'Ext.field.Select'
],
config: {
style: ' background-color:white;',
layout: 'vbox',
items:
[
{
xtype: 'toolbar',
docked: 'top',
title: 'List update',
minHeight: '60px',
items: [
{
ui: 'back',
xtype: 'button',
id: 'backButton', //taki sam id jak w view.GdzieJestem
text: 'Back',
},
{
minHeight: '60px',
right: '5px',
html: ['<img src="resources/images/myImage.png"/ style="height: 100%; ">',].join(""),
},
],
},
{
xtype: 'fieldset',
title: 'Choose distance',
items: [
{
xtype: 'selectfield',
id: 'selectField',
options: [
{text: '50km', value: 50},
{text: '100km', value: 100},
{text: '150km', value: 150},
{text: '200km', value: 200},
{text: '250km', value: 250},
{text: '300km', value: 300},
{text: '350km', value: 350},
{text: '400km', value: 400},
{text: '450km', value: 450},
{text: '500km', value: 500},
{text: '550km', value: 550},
{text: '600km', value: 600},
],
listeners: {
change: function (select, newValue, oldValue) {
// console.log('change', newValue.data.value);
console.log(Ext.getCmp('selectField').getValue());
distance = Ext.getCmp('selectField').getValue();
} // change
} // listeners
}
]
},
{
xtype: 'list',
style: ' background-color:white;',
itemTpl: '<h2>{company}, {firstName} {lastName}</h2><p> <span style="color:blue;">{city}, {street}, tel: {telephoneNumber}, </span><span style="color:orange;"> odległość: {distance}km</span></p>',
flex: 1,
store: {
autoLoad: true,
fields : ['company', 'firstName', 'lastName', 'city', 'street', 'telephoneNumber', 'distance'],
proxy: {
type: 'jsonp',
url: 'http://192.168.1.15:8080/MyServer/agents/list?userLat='+lat+'&userLon='+lon+'&distance='+distance+'',
reader: {
type: 'json',
rootProperty: 'agents'
}
}
}
}
]
}
});
My second question is: Have you any idea why geolocation works when app runs in Chrome but when it runs on device natively, geolocation doesnt work.
Code:
var lat = 0;
var lon = 0;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
lat = position.coords.latitude;
lon = position.coords.longitude;
//Ext.Viewport.setActiveItem(Ext.create('Proama.view.WyszukajAgenta'));
},
function (error)
{
switch(error.code)
{
case error.TIMEOUT:
alert ('Timeout');
break;
case error.POSITION_UNAVAILABLE:
alert ("Postition unavailable");
break;
case error.PERMISSION_DENIED:
alert ('Permission denied');
break;
case error.UNKNOWN_ERROR:
alert ('Unknown error');
break;
}
}
);
}
else {
alert('Problem with device.');
}
For question 1, I would just reload the list component's store on select change. The way you have this setup you will need to access the list component's store via the list. for example, on change event:
change: function(select, newValue, oldValue){
var items = select.getParent().getParent().getItems(); // access parent's parent's items
var list = items[1]; // list is the second item in the parent's
list.getStore().load(); // reload the list's store
}
Ideally you should abstract the store and register it at the application level (if you are developing in MVC format). With the store abstracted you would be able to call Ext.getStore('MyStore').load(); anywhere in your application.
As for question 2, when you wrap the app in a native shell, in my experience HTML5 geolocation does not work. You will need to make a bridge to the native GPS calls using a tool like PhoneGap (http://docs.phonegap.com/en/1.9.0/cordova_geolocation_geolocation.md.html#Geolocation)
Hope this helps.
Related
First off: There are a bunch of questions about this exact thing all over the place. I have spent the better part of a day reading through them all and clearly I am still failing to understand this.
I am getting my store data from a httprequest (rather than standard ajax call) and this is working and adding my data to the store. But whatever I try, this data will not populate the list. Currently my code looks like:
Model:
Ext.define('estarCamera.model.Event', {
extend: 'Ext.data.Model',
config: {
fields: [
'Id',
'Title',
'Content',
'Image',
'Location',
'Latitude',
'Longitude',
'Radius',
'Starts',
'Expires',
'Prestart'
]
}
});
Store:
Ext.define('estarCamera.store.Events', {
extend: 'Ext.data.Store',
config: {
model: 'estarCamera.model.Event',
storeId: 'EventStore'
}
});
Data is populating the store:
var jsonResponse = JSON.parse(xhr.responseText);
if(jsonResponse.status == "Success"){
//Success
var eventsJsn = JSON.parse(jsonResponse.message);
$.each(eventsJsn, function(){
$.each(this, function(k,v){
//Events root element
$.each(this, function(k,v){
//Each 'Event' element
var eStore = Ext.getStore('EventStore');
eStore.add({
Id: this.ID,
Title: decodeURIComponent(this.Title),
Content: decodeURIComponent(this.Content),
Image: this.Image,
Location: this.Location,
Latitude: this.Latitude,
Longitude: this.Longitude,
Radius: this.Radius,
Starts: this.Starts,
Expires: this.Expires,
Prestart: this.Prestart
});
eStore.sync();
})
});
});
Ideally this will then populate:
Ext.define('estarCamera.view.Events', {
extend: 'Ext.Panel',
xtype: 'events',
requires: [
'estarCamera.store.Events',
'Ext.form.FieldSet',
'Ext.List'
],
config: {
title:'Events',
iconCls: 'star',
layout: 'vbox',
items:[
{
docked: 'top',
xtype: 'toolbar',
title: 'Active Events'
},
{
xtype: 'container',
layout: 'fit',
flex: 10,
items:[{
xtype:'list',
title: 'Events',
width: '100%',
height: '100%',
store: 'Events',
styleHtmlContent: true,
itemTpl: new Ext.XTemplate(
'<div class="outerEvent">',
'<h1>title{Title}</h1>',
'<p>{Content}</p>',
'</div>'
)
}]
}]
}
});
Does anyone know why this is happening?
OK, feeling a bit fooling now .. eventually (after an embarrassingly long time) found that this was because my list was trying to reference 'Events' which is the name of my store and how I thought it was supposed to work. Changed this to 'EventStore' (the storeid of my store) and it worked perfectly.
I have a fully functional Sencha Touc 2.1.1 app bundled in Phonegap 2.5. In it, I have several lists that I use to spawn form panels for data entry and other sundry activities.
An example one is as follows (it happens on all my form panels that get opened via a list tap):
I have a list with an item template is rendered in this container:
Ext.define('EvaluateIt.view.Push', {
extend: 'Ext.Container',
fullscreen: true,
//requires: ['Ext.TitleBar'],
alias: 'widget.pushview',
config: {
layout: 'vbox',
layout: 'fit',
//id: 'pushview',
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'button',
itemId: 'loginButton',
text: 'Login',
iconCls: 'arrow_right',
iconMask: true
},
{
xtype: 'button',
itemId: 'logOutButton',
text: 'Logout',
iconCls: 'arrow_right',
iconMask: true
}
]
},
{
flex: 1,
xtype: 'pushList'
}
],
listeners: [{
delegate: '#logOutButton',
event: 'tap',
fn: 'onLogOutButtonTap'
}]
},
onLogOutButtonTap: function () {
this.fireEvent('onSignOffCommand');
}
});
The list is:
Ext.define('EvaluateIt.view.PushList', {
extend: 'Ext.dataview.List', //'Ext.tab.Panel',
alias : 'widget.pushList',
config: {
width: Ext.os.deviceType == 'Phone' ? null : 300,
height: Ext.os.deviceType == 'Phone' ? null : 500,
xtype: 'list',
store: 'SiteEvaluations', //getRange(0, 9),
itemTpl: [
'<div><strong>Address: {address}</strong></div> '
],
variableHeights: false
}
});
And the form that is opened on tapping an address rendered in the itemTpl is:
Ext.define('EvaluateIt.view.PushForm', {
extend: 'Ext.form.Panel',
alias : 'widget.pushForm',
requires: [
'Ext.form.Panel',
'Ext.form.FieldSet',
'Ext.field.Number',
'Ext.field.DatePicker',
'Ext.field.Select',
'Ext.field.Hidden'
],
config: {
// We give it a left and top property to make it floating by default
left: 0,
top: 0,
// Make it modal so you can click the mask to hide the overlay
modal: true,
hideOnMaskTap: true,
// Set the width and height of the panel
//width: 400,
//height: 330,
width: Ext.os.deviceType == 'Phone' ? screen.width : 350,
height: Ext.os.deviceType == 'Phone' ? screen.height : 500,
scrollable: true,
layout: {
type: 'vbox'
},
defaults: {
margin: '0 0 5 0',
labelWidth: '40%',
labelWrap: true
},
items: [
{
xtype: 'textfield',
name: 'address',
readOnly: true
},
/*{
xtype: 'checkboxfield',
id: 'addImage',
label: 'Upload Image'
},*/
{
xtype: 'button',
itemId: 'save',
text: 'Push to server'
}
]
}
});
This is called as a ViewPort via the following method in my controller:
onSelectPush: function(view, index, target, record, event) {
console.log('Selected a SiteEvaluation from the list');
var pushForm = Ext.Viewport.down('pushForm');
if(!pushForm){
pushForm = Ext.widget('pushForm');
}
pushForm.setRecord(record);
pushForm.showBy(target);
console.log('Selected a Push from the list ' + index + ' ' + record.data.address);
}
This usually works as expected:
Open Push view
Tap on address in list
PushForm opens for user to do their thang.
However! Occasionally, when the user taps on the address, instead of the PushForm opening a black arrow shows up underneath the address in the list (see attached image)
.
It is unpredictable when this will happen, but it does. So far, its only happened on my Android device, not on an emulator or in a Web browser (I have not yet heard from any of my iOS users about this yet).
Note: The only way to get the app to function "normally" again is to either do a complete restart or a force close of the application.
Any ideas what is causing it? Grazie!!
I would dynamically change the title of my list titlebar. This is my app.js where you can view my app (see var list where there is the toolbar item and title that I would change)
How can I do this?
Thanks.
var mainForm ;
var mainFormPanel={};
var myStore = Ext.create('Ext.data.Store', {
storeId: 'MyStore',
fields: ['txt']
}); // create()
var list= Ext.create('Ext.List', {
fullscreen: true,
store: 'MyStore',
itemTpl: '{txt}',
items: [{
xtype: 'titlebar',
docked: 'top',
title:'change dinamically this title!!!!'
}] // items (list)
}); // create()
Ext.application({
glossOnIcon: false,
autoMaximize: false,
icon: {
57: 'lib/sencha-touch/resources/icons/icon.png',
72: 'lib/sencha-touch/resources/icons/icon#72.png',
114: 'lib/sencha-touch/resources/icons/icon#2x.png',
144: 'lib/sencha-touch/resources/icons/icon#114.png'
},
phoneStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen.jpg',
tabletStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen~ipad.jpg',
requires: [
'Ext.tab.Panel',
'Ext.form.*',
'Ext.field.*',
'Ext.Button',
'Ext.data.Store'
],
launch: function() {
mainForm = Ext.create('Ext.form.Panel', {
xtype:'formpanel',
items: [
{
xtype: 'textfield',
name : 'distance',
label: 'Distance'
},
{
xtype: 'textfield',
name : 'quantity',
label: 'Quantity'
}
]
});
mainFormPanel={
xtype: 'toolbar',
docked: 'bottom',
layout: {
pack: 'center'
},
items: [
{
xtype: 'button',
text: 'Set Data',
handler: function() {
mainForm.setValues({
distance: '300',
quantity: '25'
})
}
},
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(mainForm.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
mainForm.reset();
}
}
]
};
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
{
//each item in a tabpanel requires the title configuration. this is displayed
//on the tab for this item
title: '1-tab',
layout:'fit',
//next we give it some simple html
items: [mainForm,mainFormPanel],
//then a custom cls so we can style it
cls: 'card1'
},
{
//title
title: '2-tab',
layout:'fit',
items: [list],
cls: 'card2'
},
{
//title
title: '3-tabs',
//the items html
items: {
html: 'mia auto',
centered: true
},
//custom cls
cls: 'card3'
}
]
});
}
});
Ext.List component's superclass is Ext.DataView., not Ext.Panel.
Hence, it is not possible to directly add / dock any item inside the Ext.List component.
So, I recommend you to wrap your Ext.List component inside Ext.Panel.
Do it like this,
var myStore = Ext.create('Ext.data.Store', {
storeId: 'MyStore',
fields: ['txt']
}); // create()
var listpanel = new Ext.Panel({
layout: 'fit', // important to make layout as 'fit'
items: [
{
xtype: 'titlebar',
id: 'myTitle',
docked: 'top',
title: 'Before Change title',
items: [
{
xtype:'button',
text:'Change Title',
align:'right',
listeners : {
tap : function() {
Ext.getCmp('myTitle').setTitle('After Title Change');
}
}
}
]
},
{
//Definition of the list
xtype: 'list',
itemTpl: '{txt}',
store: myStore,
}]
});
....
....
{
title: '2-tab',
layout:'fit',
items: [listpanel],
cls: 'card2'
},
....
....
Sample Output :-
Before changing the title
After changing the title
FYI, If you look inside the Ext.List class in Sencha Docs, you will see the following code inside initComponent() method,
if (Ext.isDefined(this.dockedItems)) {
console.warn("List: List is not a Panel anymore so you can't dock items to it. Please put this list inside a Panel with layout 'fit'");
}
I cannot figure out how I can retrieve a given Data item in a store (id-number) to send it to the "setActiveItem" method in a listener:
So I have a store - model:
Ext.regModel('PictureItem', {
fields: ['id', 'titel', 'url']
});
var pictureItems = new Ext.data.Store({
model: 'PictureItem',
data: [
{id:1, titel:'page 1', url:'http://placekitten.com/1024/768'},
{id:2, titel:'page 2', url:'http://placekitten.com/1024/768'},
{id:3, titel:'page 3', url:'http://placekitten.com/1024/768'},
]
});
Here is my menuList called "leftList":
var leftList = new Ext.List({
dock: 'left',
id:'list1',
width: 135,
overlay: true,
itemTpl: '{titel}',
singleSelect: true,
defaults: {
cls: 'pic'
},
store: pictureItems,
listeners:{
selectionchange: function (model, records) {
if (records[0]) {
Ext.getCmp('karte').setActiveItem(!!!Here the number of the selected Item
or respondend "id" in the data store!!!);
}
}
}
});
and the carousel....
var carousel = new Ext.Carousel({
id: 'karte',
defaults: {
cls: 'card'
},
items: [{
scroll: 'vertical',
title: 'Tab 1',
html: '<img class="orientation" alt="" src="img_winkel/titel_v.jpg">'
},
If I call
Ext.getCmp('karte').setActiveItem(2);
it works with the called card - but how can I get the number from the id of the selected item in the menu List /store????
By the way: what does mean:
if (records[0]) {
why [0]?
I FOUND THE ANSWER FOR MYSELF - IT'S EASY:
Ext.getCmp('karte').setActiveItem(records[0].get('id'), {type: 'slide', direction: 'left'});
The secret to get the record-entry is ".get()":
records[0].get('arrayfield')
So now I can change the activeItem in the carousel easely...
I'm building an app and i've got a list loaded with some info from store, it has a lot of items in it but when I try to scroll down it scrolls back up as if there were not enough items to scroll. Here is some code:
app.views.SearchTab = Ext.extend(Ext.Panel, {
iconCls: 'search',
id: 'search',
items: {
xtype: 'list',
store: app.stores.results,
scroll: 'vertical',
itemTpl: '<div class="list_left_panel"><div class="list_photo_wrapper"><div class="list_photo"><img src="http://realio.cz/images/{link}_0s.jpg" /></div></div></div><div class="list_right_panel"><div class="list_name">{titul}</div><div class="list_info"><div>{cena} Kč</div><div class="list_info_grey">{m2} m<sup>2</sup></div><div>{typ}</div></div></div>',
onItemDisclosure: function (record) {
Ext.dispatch({
controller: app.controllers.detail,
action: 'show',
id: record.getId()
});
}
},
initComponent: function() {
app.stores.results.load();
app.views.SearchTab.superclass.initComponent.apply(this, arguments);
}
});
app.models.Results = Ext.regModel("app.models.Results", {
fields: [
{name: "titul", type: "string"},
{name: "book_id", type: "int"},
...
{name: "u", type: "int"}
]
});
app.stores.results = new Ext.data.Store({
model: "app.models.Results",
proxy: {
type: 'ajax',
url: 'http://site.com/json_list2.php?...',
reader: {
type: 'json',
root: 'markers'
}
},
autoLoad: false
});
How can i fix the list so that it scrolls correctly? Thanks.
add this library this will help you: https://github.com/Lioarlan/UxBufList-Sench-Touch-Extension