I have an application where i am using sencha touch JS API for UI rendering. The UI works fine in chrome browser but not working in Android or iPhone device.
i have used the following code.
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var store1 = new Ext.data.JsonStore({
model : 'Contact',
autoLoad : true,
autoDestroy : true,
data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'}
]
});
new Ext.Application({
launch: function() {
var panel = new Ext.Panel({
fullscreen: true,
id:'thePanel',
layout: 'auto',
style: 'background-color:darkblue',
scroll:'vertical'
});
//do this in your dynamically called function
var list = new Ext.List({
id :'theList',
itemTpl : '{firstName} {lastName}',
store: store1,
width: '100%',
scroll:false
});
var stateList = new Ext.form.Select({
label : 'State',
widht: '100%',
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
],
autoLoad : true,
autoDestroy : true
});
panel.items.add(list);
panel.items.add(stateList);
panel.doLayout();
}
});
It gives the UI like as shown in the image. But the select control is not working for (State list in not populating). please help me.
Each form field needs to have a name property, i.e. the name of the parameter to be send when the form is submitted. Updated your stateList object like this:
var stateList = new Ext.form.Select({
label : 'State',
name: 'selectField',
width: '100%',
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
],
autoLoad : true,
autoDestroy : true
});
Related
I need to show custom icons in my places, that icons are loaded from a specific URL dynamically. Here is my code.
const PlacesMarker = props => {
const { places } = props
const [geoJson, setGeoJson] = useState([])
useEffect(() => {
if (places)
renderPlaces(places)
}, [places])
const renderPlaces = (places) => {
let features = places.content.map((item) => {
return {
type: "Feature",
id: item.id,
properties: {
id: item.id,
icon: item.type.iconUri,
name: item.name,
type: item.type.name
},
geometry: {
type: "Point",
coordinates: [item.location.lon, item.location.lat],
},
}
})
setGeoJson(features)
}
return (
<View>
{geoJson.length > 0 ?
<MapboxGL.ShapeSource id={'places-map'}
shape={{ type: "FeatureCollection", features: geoJson }}>
<MapboxGL.SymbolLayer
id={Math.random().toString()}
style={{
iconImage: ['get', 'icon']
iconAllowOverlap: true,
// iconSize: 0.80,
iconIgnorePlacement: true,
textField: ['get', 'icon']
}}
/>
</MapboxGL.ShapeSource> : null
}
</View >
)
}
export default PlacesMarker
In the style, I used the expression 'get', and it works, because I set the textField with Icon URI value and it shows the uri. However if I set the iconImage property with the URI, then the icon appear successfully
In react-native-mapbox-gl 7.0 if iconImage is constant then you can use url-s. But if it's an expression it should be a key in images dict of Images, <Images images={images} />.
See https://github.com/react-native-mapbox-gl/maps/issues/652
I trying to build an application using Sencha Touch 2.4.1,
and using cordova packager.
My simple application show chart, when i use
"start sencha web start" application for browsing.
(picture 1).
But when i pack the app to android apk,
on my android phone, it doesn't show the chart,
only starting animation..
(picture 2)
However if i remove line with xtype: 'companystockchart',
my application (on phone) is working (of course without chart)!
What am i doing wrong?
Source code:
app.js:
Ext.require([
]);
Ext.application({
name: 'app',
views: ['CompanyStockChart'],
launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'fit',
title: 'Chart',
iconCls: 'overview',
items:[{
xtype: 'companystockchart'
}],
listeners: {
activate: function() {
}
}
})
}
});
app.view.CompanyStockChart.js:
Ext.define('app.view.CompanyStockChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.companystockchart',
config: {
store: {
fields: ['name', 'value'],
data: [
{ name: 'Jan', value: 110},
{ name: 'Feb', value: 252},
{ name: 'Mar', value: 952},
{ name: 'Apr', value: 325},
{ name: 'May', value: 123},
{ name: 'Jun', value: 52},
{ name: 'Jul', value: 1122},
{ name: 'Aug', value: 35},
{ name: 'Sep', value: 172},
{ name: 'Oct', value: 752},
{ name: 'Nov', value: 810},
{ name: 'Dec', value: 410}
]
},
animate: false,
interactions: ['panzoom'],
series: [
{
type: 'line',
xField: 'name',
yField: 'value',
style: {
fill: 'rgba(0,40,170,0.3)',
stroke: 'black'
}
}
],
axes: [
{
type: 'numeric',
position: 'left',
title: 'Number of Hits',
minimum: 0,
maximum: 1200,
grid: {
fill: '#efefef',
odd: {
fill: '#cdcdcd'
},
even: {
lineWidth: 3
}
}
},
{
type: 'category',
position: 'bottom',
title: 'Month of the Year',
grid: true,
style: {
estStepSize: 1
}
}
]
}
});
Next i try to debug the app, and i see next issue:
(picture 3)
Following is my Sencha code of a simple registration form:
xtype: 'fieldset',
items: [
{
name: 'name',
id: 'rename',
xtype: 'textfield',
placeHolder: 'Name*',
tabIndex: 1
},
{
name: 'emailfield',
id: 'reemailid',
xtype: 'emailfield',
placeHolder: 'email#example.com*',
tabIndex: 2
},
{
name: 'password',
id: 'repassword',
xtype: 'passwordfield',
placeHolder: 'Password*',
tabIndex: 3
},
{
name: 'confpassword',
id: 'reconfpassword',
xtype: 'passwordfield',
placeHolder: 'Confirm Password*',
tabIndex: 4
},
{
name: 'address',
id: 'readdress',
xtype: 'textareafield',
placeHolder: 'Address*',
tabIndex: 5
},
{
name: 'dob',
id: 'redob',
placeHolder: 'Date Of Birth',
xtype: 'datepickerfield',
destroyPickerOnHide: true,
picker: {
yearFrom: 1960
},
tabIndex: 6
}
]
When I am filling up the form in Android keyboard there is a 'Go' button in bottom right corner of the android keyboard, which helps us to submit the form. But I want a 'Next' button which will take me to the next field, I mean if I filled the name and press the 'Next' button on Android keyboard then it should take me to email.
The action event is triggered on a textfield whenever the "Return" or "Go" key is pressed. You should leverage that to call the focus method on the next field.
Something like this will work on Android, didn't test it on iOS though
Ext.define('Fiddle.view.Main', {
extend: 'Ext.Container',
config: {
fullscreen: true,
styleHtmlContent: true,
items: [
{
xtype: 'textfield',
label: 'First field',
listeners: {
action: function() {
Ext.getCmp('field_2').focus();
}
}
},
{
id: 'field_2',
xtype: 'textfield',
label: 'Second field'
}
]
}
});
Working example at: https://fiddle.sencha.com/?fiddle=b3o#fiddle/b3o
[EDIT]
Previous solution remains valid but I found this linked question:
How to change the Android softkey keyboard "Go" button to "Next".
This is done on the native Android project and modifies the behavior of the "Go" button application wide. Check it out.
In my ST2-app i create a panel which contains a carousel-element.
This carousel has to be filled dynamically with images from my store.
My problem is that the code shown below works fine in Chrome, but when i package my app and install it on my Galaxy S2, the initialize-event wont fire.
Has anyone a suggestion what could be the problem here?
I thought the browser androis is using is based on googles chrome-browser, so it should work the same.
Code:
createPanelBalloonSelect: function() {
panelBalloonSelect = Ext.Viewport.add({
xtype: 'panel',
centered: true,
styleHtmlContent: true,
width: '90%',
height: '70%',
modal: true,
scope: this,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'toolbar',
title: 'Auswahl Ballon',
docked: 'top'
},
{
xtype: 'carousel',
id: 'myCarousel',
flex: 1,
items: [],
config: {
initialize: function() {
console.log('ich initialisiere!');
drawingsStore = Ext.getStore('drawingsStore');
data = drawingsStore.getRange();
console.log('data: ' + data);
for(var i=0;i<data.length;i++){
console.log('ich adde');
this.add({
xtype: 'image',
src: data[i].data.canvasData,
cls: 'card'
});
}
}
},
defaults: {
listeners: {
activate: function(newActive, self, oldActive, opt) {
choosenBalloon = self.getActiveIndex();
console.log(choosenBalloon);
}
}
}
},
{
xtype: 'button',
text: 'OK',
name: 'btnAcceptTemplate',
scope: this,
handler: function() {
this.setBalloonSrc(data[choosenBalloon].data.canvasData);
//this.drawBalloon();
this.initSzeneryCanvas();
panelBalloonSelect.destroy();
}
}
]
});
},
My View (MyFormPanel)
var controllers = Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
username: "username"
},
},
launch: function () {
alert('Controller launched');
},
init: function () {
alert('Controller init');
},
myaction : function (options) {
alert('options');
var username = options.username;
this.render ({
xtype: 'MyATM',
username: username})}
});
var formPanel = Ext.create('Ext.form.Panel', {
fullscreen: true,
scrollable: 'vertical',
layout: {
align: 'center',
type: 'vbox'
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'Login Form'
},
{
xtype: 'fieldset',
items: [
{
xtype: 'fieldset',
title:'Enter user name & password',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '50%'
},
items: [
{
xtype: 'textfield',
name : 'username',
label: 'User Name',
allowBlank:false,
useClearIcon: true
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
allowBlank:false,
useClearIcon: false
},
{
xtype: 'checkboxfield',
required:false,
id: 'RememberMe',
name: 'RememberMe',
label: 'Remember Me',
labelWidth: '50%'
},
{
xtype: 'button',
ui: 'confirm-round',
text: 'Log In' ,
handler: function() {
//Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
Ext.ControllerManager.get('formcontroller').ControllerMethod({myaction: myaction});
}
}
]
}],
}]
});
formPanel.add({
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
});
My controller (FormController)
Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
username: "username"
},
},
launch: function () {
alert('Controller launched');
},
init: function () {
alert('Controller init');
},
myaction : function (options) {
alert('options');
var username = options.username;
this.render ({
xtype: 'MyATM',
username: username})}
});
I am using Sencha touch2 with Phonegap 1.4 on android 2.3. When i try to move view to controller on Login button click on handler function to invoke controller , i am getting error , Ext.dispatch is not defined as function .
Tell me the actual way how to move view to controller and vice versa.
Thanks
Ext.dispatch is not the recommended way to use in Sencha Touch 2. It might be removed...
Anyway, the best way to listen to & handle events on your views from controllers is:
Ext.define("MyApp.controller.formcontroller", {
extend: "Ext.app.Controller",
config: {
refs: {
loginButton: "#login-button" // set an id for your login button and this ref works
},
control: {
loginButton: {
tap: 'handleLogin',
}
handle_login: function(){whatever you want to do here}
}
And in Architect...
a. you go to the button's config, and
b. search for Event Handlers, and
c. you press the [+] button on the right.
d. Add a "basic handler"
e. Choose the TAP event
f. Give it a name (onButtonSendTap or whatever)
g. press DONE
h. right mouse
i. Convert to action
j. Choose [New Controller] or an existing controller
k. If you chose new controller give it a name
and voilla, you have your handler in the controller.
And in Architect...
a. you go to the button's config, and
b. search for Event Bindings, and
c. you press the [+] button on the right.
d. Add a "basic handler"
e. Choose the TAP event
f. Give it a name (onButtonSendTap or whatever)
g. press DONE
h. right mouse
i. Convert to action
j. Choose [New Controller] or an existing controller
k. If you chose new controller give it a name
and voilla, you have your handler in the controller.