Sencha Touch not initializing - ios

MY sencha touch application is working fine in all browsers, however when I save the url to the iPad home screen. It will not load and only shows a blank screen. I get no JS errors and nothing comes through the log when debugging. Heres a sample of the app:
script type="text/javascript">
var rootPanel;
if (navigator.userAgent.match(/iPad/i)) {
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=980');
}
Ext.application({
launch: function () {
var contactForm = Ext.create('Ext.form.FormPanel', {
standardSubmit: true,
fullscreen: true,
items: [{
xtype: 'titlebar',
title: 'My App',
docked: 'top'
}, {
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'LoginName',
label: 'Login Name:'
}, {
xtype: 'passwordfield',
name: 'Password',
label: 'Password:'
},
{
xtype: 'hiddenfield',
name: 'ReturnUrl',
value: '/returnUser.html'
}] // items
}, {
xtype: 'toolbar',
layout: {
pack: 'center'
}, // layout
ui: 'plain',
items: [{
xtype: 'button',
text: 'Reset',
ui: 'decline',
handler: function (btn, evt) {
Ext.Msg.confirm('', 'Are you sure you want to reset this form?', function (btn) {
if (btn === 'yes') {
contactForm.setValues({
LoginName: '',
Password: ''
}); // contactForm()
} // switch
}); // confirm()
}
}, {
xtype: 'button',
text: 'Submit',
ui: 'confirm',
handler: function (btn, evt) {
var values = contactForm.getValues();
contactForm.submit({
url: 'Login',
method: 'POST',
waitTitle: 'Connecting',
waitMsg: 'Sending data...',
success: function (form, result) {
Ext.Msg.alert('Login succeeded!', result.response.reason);
},
failure: function (form, result) {
Ext.Msg.alert('Login Failed!', result.response.reason);
}
});
} // handler
}] // items (toolbar)
}] // items (formpanel)
}); // create()
} // launch
}); // application()
$(document).ready(function () {
});
I put an alert in the launch method of Ext.Application but it does not show. When I put it an alert in the document.ready function it does show. I should also note it DOES work on the ipad browser, just not when launched from the icon on the homescreen.

i faced a similar issue in android actually in my case the problem was because of Ext.Loader not enabled I see you have not included it either. Include this script before Ext.application & see if it works
Ext.Loader.setConfig({
enabled:true
});
Ext.application({...});

It appears to be the version of sencha I was using which was 2.1.0 I believe, as soon as I updated to the latest(2.1.1 Build Date 2013-02-05 12:25:50 ) I works fine.

Related

How to prevent select2 to call select2:close the second time when selectOnClose is set to true?

I am using Select2 V. 4.0.10
I want to have a select2 that behaves the same way when you select using the Enter key and the Tab key.
What happens is that when selecting using the Tab key, the close event is called twice, which is not what was intended to do.
var data = [
{ id: 0, text: 'New' },
{ id: 1, text: 'In Process' },
{ id: 2, text: 'Draft' },
{ id: 3, text: 'Submitted' },
{ id: 4, text: 'Deleted' }
];
$(".test").select2({
allowClear: true,
selectOnClose: true,
data: data,
placeholder: "Select a status"
});
$("select.test", "body").off("select2:close").on("select2:close", function (e){
// This is called twice
console.log("select2:close");
});
select.test {
width: 200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<select class="test"></select>
Here are the sequences of the select2 events that are triggered when selecting with the Tab/Enter key.
TAB
select2:opening
select2:open
select2:closing
select2:selecting
change
change.select
select2:closing
select2:close
select2:select
select2:close
ENTER
select2:opening
select2:open
select2:selecting
change
change.select
select2:closing
select2:close
select2:select
As the pattern in always the same, the solution was to create a variable that would be toggled on when select2:select was triggered, and use that to see if it was be used before.
Notice, instead of using the global window object you should rather use a class variable or a prototype property to store this boolean.
var data = [
{ id: 0, text: 'enhancement' },
{ id: 1, text: 'bug' },
{ id: 2, text: 'duplicate' },
{ id: 3, text: 'invalid' },
{ id: 4, text: 'wontfix' }
];
window._select2Select = false;
$(document).on('select2:select', "select", function (e) {
window._select2Select = true;
});
$(".test").select2({
allowClear: true,
selectOnClose: true,
data: data,
placeholder: "Select a status"
});
$("select.test", "body")
.off("select2:close")
.on("select2:close", function(e) {
if(window._select2Select){
window._select2Select = false;
return;
}
console.log("select2:close");
window._select2Select = false;
});

SELECT2 AJAX not selecting results - Ember.js Ember Cli Custom Component

The AJAX functionality of Select2 4.0.0 doesn't seem to be working. It displays the results from the AJAX however when you click on the a result item it does not select it. I have wasted hours on this any help would be appreciated.
The following code does not work:
var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
self._select = self.$().select2({
placeholder: self.get('placeholder'),
tokenSeparators: [','],
multiple: true,
ajax: {
url: "http://localhost:9990/api/v1/users/",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
return {
results: staticdata
};
},
cache: true
}
});
However when I try it WITHOUT Ajax it works and the results are selecting into the input field:
var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
self._select = self.$().select2({
placeholder: self.get('placeholder'),
tokenSeparators: [','],
multiple: true,
data: staticdata
});
So this issue was due to using select2 as custom ember component.
When you create an ember component you can either select an existing html tag e.g.
1. self.$('#selecttext').select2(...)
Where the html tag is located in your ember cli location templates/components/select2-component.hbs:
<select id="selecttext" class=" form-control input-md select2-hidden-accessible" multiple="" tabindex="-1" aria-hidden="true">
</select>
OR alternatively just initialize the component it self using:
2. self.$().select2(...)
When using approach 2. I am guessing select2 AJAX callback somehow loses the reference to select2 component. So that when you select a result from the list select2:selecting event is not generated and hence the result value is not selected.
I tested this using:
self._select.on("select2:selecting", function(e) {
alert('selecting');
});
However when you use approach 1. ajax callback does NOT lose the reference to the select2 component and generates the "select2:selecting" event and works as expected with the results being able to be selected.
Hence this works:
didInsertElement: function() {
var self = this;
var staticdata = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
self._select = self.$('#selecttext').select2({
// note we are explicitly initialising select2 component on #selecttext
placeholder: self.get('placeholder'),
tokenSeparators: [','],
multiple: true,
tags: false,
//data: staticdata
ajax: {
url: "http://localhost:9990/api/v1/users/",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term // search term
};
},
processResults: function (data, page) {
return {
results: staticdata
};
},
cache: true
}
}); //select2 END
} //didInsertElement END

jqxgrid not displaying busy or loading indicator

I am using jqxgrid and I have below code snippet and i want to display load indicator on button click which calls the Ajax method and hide it on the success method or anyway other to display it as i need to show loading indicator from the time request made till i get the data
$("#btnSearch").bind('click', function () {
//show indicator here
LoadLookUpSearchGrid();
}
//Ajax call to fetch data
function LoadLookUpSearchGrid() {
var filterRows = getGridRows();
$.ajax({
type: 'POST',
dataType: 'json',
async: false,
cache: false,
url: 'AddEditView.aspx/LoadLookUpSearchGrid',
data: JSON.stringify({ FilterType: $('select#ddlFilterType').val() , Id: $("#txtId").val() , Name: $("#txtName").val(), SearchText: '', FilterRows: filterGridRows}),
contentType: 'application/json; charset=utf-8',
success: function (data) {
var source = data.d;
SetSearchFields($('select#ddlFilterType option:selected').text(), source);
},
error: function (err) {
alert(err.text + " : " + err.status);
}
});
};
//source object to format data
function SetSearchFields(fieldName, source) {
var columns;
if (fieldName == "Operating Company") {
source =
{
datatype: "xml",
datafields: [
{ name: 'COMPANY', type: 'string' },
{ name: 'DESCR', type: 'string' }
],
async: false,
root: "Company",
localdata: source
};
columns = [
{ text: 'OPCO ID', dataField: 'COMPANY', width: '30%' },
{ text: 'Company Name', dataField: 'DESCR', width: '65%' }
];
}
lookupSearchResultGrid(source, columns,fieldName);
}
//adaptor to fill source and bind grid
function lookupSearchResultGrid(source, columns,fieldName) {
var searchViewGridDataAdapter = new $.jqx.dataAdapter(source);
$("#divLookupSearch").jqxGrid(
{
width: '100%',
source: searchViewGridDataAdapter,
theme: theme,
sortable: true,
pageable: true,
autoheight: true,
selectionmode: 'checkbox',
columns: columns
});
//hide indicator here on on success method of ajax call
};
On the click of the button call showloadelement and in the Ajax call success callback function call hideloadelement.
$("#btnSearch").bind('click', function () {
$('#divLookupSearch').jqxGrid('showloadelement');
//show indicator here
LoadLookUpSearchGrid();
}
...
success: function (data) {
$('#jqxGrid').jqxGrid('hideloadelement');
var source = data.d;
SetSearchFields($('select#ddlFilterType option:selected').text(), source);
},
...
Best Regards,
Alpesh

Sencha Touch 2: Trying to create a login form

I am a 100% newb to Sencha and am trying to take a stab at re-factoring my company's mobile app.
Here is my app.js:
Ext.application({
name: 'RecruitTalkTouch',
views: ['Login'],
launch: function () {
Ext.Viewport.add([
{ xtype: 'loginview' }
]);
}
});
Login.js View:
Ext.define('RecruitTalkTouch.view.Login', {
extend: 'Ext.Container',
alias: "widget.loginview",
xtype: 'loginForm',
id: 'loginForm',
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Button' ],
config: {
title: 'Login',
items: [
{
xtype: 'label',
html: 'Login failed. Please enter the correct credentials.',
itemId: 'signInFailedLabel',
hidden: true,
hideAnimation: 'fadeOut',
showAnimation: 'fadeIn',
style: 'color:#990000;margin:5px 0px;'
},
{
xtype: 'fieldset',
title: 'Login Example',
items: [
{
xtype: 'textfield',
placeHolder: 'Email',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
},
{
xtype: 'passwordfield',
placeHolder: 'Password',
itemId: 'passwordTextField',
name: 'passwordTextField',
required: true
}
]
},
{
xtype: 'button',
itemId: 'logInButton',
ui: 'action',
padding: '10px',
text: 'Log In'
}
]
}
});
Login.js Controller:
Ext.define('RecruitTalkTouch.controller.Login', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: 'loginForm'
},
control: {
'#logInButton': {
tap: 'onSignInCommand'
}
}
},
onSignInCommand: function(){
console.log("HELLO WORLD");
}
});
When I click the submit button, nothing happens. How can I hook up my submit button to listen for events (click, tap, etc) along with submitting the information to a backend API?
In app.js file of your application, add:
controllers: [
'Login'
]
in your application class. And for submitting information, call a Ajax request like this:
Ext.Ajax.request({
url: // api url..,
method: 'POST',
params: {
username: // get user name from form and put here,
password: // get password and ...
},
success: function(response) {
do something...
},
failure: function(err) {do ..}
});
from inside onSignInCommand() function.
You must activate your controller by adding it to the controllers option of your application class.
Then, to submit your data to the backend, you've got several options. You can use a form panel instead of your raw container, and use its submit method. Alternatively, you can use the Ext.Ajax singleton. In this case, you'll have to build the payload yourself. Finally, you can create a model with a configured proxy, and use its save method. This last way is probably the best for long term maintainability... Even if in the case of a simple login form, that may be a little bit overkill.
Can u please refer this sample app to create login form. Its very simple app please go through it.
http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application/

extjs 4.2 load store grid when open window

i'am new with extjs. i have an application asp.net mvc with integrated extjs 4.2 mvc. My application will have multi windows. now i one menu with button and onclick event button open the windows. have two windows. each windows there is a grid with different store, but when i open the windows, extjs load wrong store. i don't understand. the store is setting autoload:false. but don't work =(.
store UtenteStore.js:
Ext.define('MyApp.store.UtenteStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.utenteData'
],
constructor: function (cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
autoSave: false,
model: 'MyApp.model.utenteData',
storeId: 'MyJsonStore',
idProperty: 'Id',
proxy: proxy
}, cfg)]);
}
});
var writer = new Ext.data.JsonWriter({
type: 'json',
writeAllFields: true,
allowSingle: false
});
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
type: 'json',
successProperty: 'success',
messageProperty: 'message'
});
var proxy = new Ext.data.HttpProxy({
timeout: 120000,
noCache: false,
reader:reader,
writer: writer,
type: 'ajax',
api: {
read: '/Clienti/Get',
create: '/Clienti/Update',
update: '/Clienti/Update',
destroy: '/Clienti/Delete'
},
headers: {
'Content-Type': 'application/json; charset=UTF-8'
}
});
store FornitoreStore.js:
Ext.define('MyApp.store.FornitoriStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.fornitoriData'
],
constructor: function (cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
autoSave: false,
model: 'MyApp.model.fornitoriData',
storeId: 'MyJsonStore2',
idProperty: 'Id',
proxy: proxy
}, cfg)]);
}
});
var writer = new Ext.data.JsonWriter({
type: 'json',
writeAllFields: true,
allowSingle: false
});
var reader = new Ext.data.JsonReader({
totalProperty: 'total',
type: 'json',
successProperty: 'success',
messageProperty: 'message'
});
var proxy = new Ext.data.HttpProxy({
timeout: 120000,
noCache: false,
reader: reader,
writer: writer,
type: 'ajax',
api: {
read: '/Fornitori/Lista',
create: '',
update: '',
destroy: ''
},
headers: {
'Content-Type': 'application/json; charset=UTF-8'
}
});
this is my first windows Clienti.js:
var editor = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
Ext.define('MyApp.view.clienti.Clienti', {
extend: 'Ext.window.Window',
height:600,
width: 800,
shadow: 'drop',
collapsible: true,
title: 'Lista Clienti',
maximizable: true,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'gridpanel',
id: 'gridpanelId',
header:false,
store:'MyApp.store.UtenteStore',
forceFit: true,
columnLines: true,
autoResizeColumns: true,
selType: 'rowmodel',
columns: [
{
dataIndex: 'CodiceCliente',
text: 'Codice',
filter: {
type: 'int',
minValue: 1
}
},
{
xtype: 'gridcolumn',
dataIndex: 'DescrizioneCliente',
text: 'Descrizione',
editor: {
xtype: 'textfield',
allowBlank: true
},
filter: true
},
{
xtype: 'datecolumn',
dataIndex: 'date',
text: 'Date'
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
text: 'Boolean'
}
],
listeners: {
afterrender: {
fn: me.loadDb,
scope: me
}
},
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Inserisci',
listeners: {
click: {
fn: me.inserisciClick,
scope: me
}
}
},
{
xtype: 'button',
text: 'Elimina',
listeners: {
click: {
fn: me.eliminaClick,
scope: me
}
}
},
{
xtype: 'button',
text: 'Salva',
listeners: {
click: {
fn: me.salvaClick,
scope: me
}
}
}
]
}
],
plugins: [editor, {
ptype: 'filterbar',
renderHidden: false,
showShowHideButton: true,
showClearAllButton: true
}]
}
]
});
me.callParent(arguments);
},
loadDb: function (component, eOpts) {
},
inserisciClick: function (button, e, eOpts) {
editor.cancelEdit();
Ext.getCmp('gridpanelId').getStore().insert(0, "");
editor.startEdit(0, 0);
},
eliminaClick: function (button, e, eOpts) {
var sm = Ext.getCmp('gridpanelId').getSelectionModel();
Ext.getCmp('gridpanelId').getStore().remove(sm.getSelection());
},
salvaClick: function(button, e, eOpts) {
Ext.getCmp('gridpanelId').getStore().sync();
}
});
this is my second windows ListaFornitori.js:
Ext.define('MyApp.view.fornitori.ListaFornitori', {
extend: 'Ext.window.Window',
height: 600,
width: 900,
layout: {
type: 'absolute'
},
title: 'Lista Fornitori',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'tabpanel',
activeTab: 0,
items: [
{
xtype: 'panel',
title: 'Lista',
items: [
{
xtype: 'gridpanel',
id: 'grdListaFornitori',
height: 362,
header: false,
store:'MyApp.store.FornitoriStore',
forceFit: true,
columnLines: true,
autoResizeColumns: true,
title: '',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'CodiceFornitore',
text: 'Codice',
filter: {
type: 'int',
minValue: 1
}
},
{
xtype: 'gridcolumn',
dataIndex: 'DescrizioneFornitore',
text: 'Descrizione',
filter:true
}
],
plugins: [{
ptype: 'filterbar',
renderHidden: false,
showShowHideButton: true,
showClearAllButton: true
}],
viewConfig: {
preserveScrollOnRefresh: true,
listeners: {
afterrender: {
fn: me.loadDb,
scope: me
},
celldblclick: {
fn: me.editClick,
scope: me
}
}
}
}
]
}
]
},
{
xtype: 'button',
x: 750,
y: 450,
text: 'Inserisci',
icon: '/Scripts/ext-4.2/resources/ico/add.png',
listeners: {
click: {
fn: me.inserisciClick,
scope: me
}
}
}
]
});
me.callParent(arguments);
},
loadDb: function (component, eOpts) {
},
editClick: function (tableview, td, cellIndex, record, tr, rowIndex, e, eOpts) {
Ext.create('MyApp.view.fornitori.InsFornitori', { rIx: rowIndex }).show();
},
inserisciClick: function(button, e, eOpts) {
Ext.create('MyApp.view.fornitori.InsFornitori').show();
}
});
Infine this is my app.js:
Ext.Loader.setConfig({
enabled: true,
disableCaching: true,
paths : {
'MyApp' : '../MyApp'
}
});
Ext.application({
models: [
'utenteData',
'fornitoriData'
],
stores: [
'MyApp.store.UtenteStore',
'MyApp.store.FornitoriStore'
],
views: [
'clienti.Clienti',
'MyViewport',
'fornitori.InsFornitori',
'fornitori.ListaFornitori',
'fornitori.Fornitori'
],
autoCreateViewport: true,
name: 'MyApp',
appFolder: '../MyApp',
});
and this my strucut:
could someone help me? It is some days that I'm stuck?
sorry for my english
There are two ways:
Option 1: This is tested.
xtype: 'gridpanel',
id: 'grdListaFornitori',
... ...
listeners: {
render:{
scope: this,
fn: function(grid) {
//load store after the grid is done rendering
grid.getStore().load();
}
}
}
Option 2: Didn't try this option yet. But It should work.
loadDb: function (component, eOpts) {
component.ownerCt.getStore().load();
},
I am a newbie using extj too, and I can look that you never call the load() method in your stores. You had set autoLoad property to false. Try to call it, and make me know that it works. Good Luck!

Resources