I'm learning Sencha Touch2 and trying do a simple application to see how it works.
I don't know what I'm doing wrong here: https://fiddle.sencha.com/?fiddle=2da#fiddle/2da
0.- In your Fiddle you are using ExtJs as your Framework instead of Sencha Touch.
1.- You were trying to use 'bolao.view.Main' when it was never declared.
2.- Ext.fly('appLoadingIndicator').destroy(); Is having trouble inside Fiddle but not when used normally in your server.
3.- Even with this changes I can't manage to see it in Chrome, but I do see it in FireFox.
4.- Try this code in your Fiddle and then deploy it to your Apache or whatever server you are using.
5.- Don't use Fiddle for learning purposes (though it is cool for showing code).
6.- I recommend you to follow this tutorial http://docs.sencha.com/touch/2.3.1/#!/guide/first_app
Code:
Ext.application({
name: 'bolao',
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
//Ext.fly('appLoadingIndicator').destroy(); this line is having problems in Fiddle I think 'cos in my local server does work fine
// Initialize the main view
//Ext.Viewport.add(Ext.create('bolao.view.Main')); this view ('bolao.view.Main') is never defined
Ext.Viewport.add(Ext.create('Ext.tab.Panel'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
Best regards #code4jhon
Related
I'm learning extjs as our application uses it. Right now I've been able to build something like:
blur: function(field, lastValues) {
var vField = field.getValue(),
vFormPanel = field.formPanel;
if (Ext.isEmpty(vField)) {
MsgBox.show({
msgs: [{
type: 'info',
msg: Lang.getCustomFrameworkMessage('Do you want to search google?')
}],
buttons: MsgBox.YESNO,
fn: function(buttonId) {
if (buttonId === "yes") {
var redirect = 'https://google.com'
window.location.href = redirect;
}
}
}
}
}
}
In the above code, when the field is tabbed in and out and is empty, it shows the message box. Instead I want that when the page is loaded, very then the message box should be displayed. How can that be done??
You already used blur event to do your thing. You can use afterrender event to display your message.
It will depend on what are you having in your app/UI but the general idea is just look # the documentation for the event you want to tie in and then add your handler there.
Here is an example app:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: Ext.getBody(),
listeners: {
afterrender: function() {
Ext.Msg.alert('TEST')
}
}
});
}
});
Here is a demo in Sencha Fiddle
Note: Demo and example is in Sencha ExtJS 5.1
I'm using protractor to test an webapp, there is a lot of test_.js and it looks like all test are running at the same time. if I set just one test in the export.config.specs it works flawlessly but if I use wildcard or put 2 or more spects it open the browser and try to open all the routes at the same time and fails all test...
So is there a flag or something that I miss to force execute all describes one by one?
An excerpt of my conf file:
exports.config = {
multiCapabilities: [
{'browserName': 'chrome'}
],
seleniumAddress: 'http://localhost:4444/wd/hub',
params: {
domain: 'http://0.0.0.0:3000/'
},
specs: [
'specs/test_login.js',
//'specs/test_*.js'
]
};
an example of one of the many specs:
describe('homepage test', function() {
browser.get(browser.params.domain);
it('should check page title', function() {
return expect(browser.getTitle()).toEqual('The title');
});
});
The browser actions must be allwais within a Jasmin action like
it
before(All/Each)
after(All/Each)
Solution based on example:
describe('homepage test', function() {
beforeAll(function() {
browser.get(browser.params.domain);
});
it('should check page title', function() {
return expect(browser.getTitle()).toEqual('The title');
});
});
source: http://jasmine.github.io/2.4/introduction.html#section-Setup_and_Teardown
If you want all the describes to run sequentially in the same browser window, in exports.config, under multiCapabilities (or capabilities) add shardTestFiles: false
If you want all the describes to run one at a time in separate browser windows, in exports.config, add maxSessions: 1
I am trying to build a search application using ExtJS. I have created dummy form to search for personal details. I have a php script connected to mysql DB. I am able to pass form parameters to php and able to get the return result in msg box. but I am not understanding how to pass it to store and display the same in grid in MVC. I have tried to pass the return data of php to store and then called Grid (List.js) in controller. still did not work. I have shown all the codes that i have used to do this.Another doubt which i have, is that essential to use proxy part of code (i.e url:app/scripts/Info.php) in both store and onSearchButtonClick function in controller? as I can directly pass the return values to store from onSearchButtonClick function, I hope it is not essential to connect php script in both places. However, it would be really nice experts clarify this.
Following is my store:
Ext.define('App.store.Info', {
extend: 'Ext.data.Store',
model: 'App.model.Info',
alias: 'widget.infostore',
pageSize : 50,
autoLoad : false,
remoteFilter: true,
proxy :{
type : 'ajax',
url : 'app/scripts/Info.php',
reader : {
type : 'json',
root : 'result',
successProperty : 'success'
}
},
listeners: {
load : function(store) {
store.each(function(record) {
record.commit();
});
}
}
});
My model looks perfect, simply to reduce somuch code I havent put here
Here is my grid:
Ext.define('App.view.info.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.infolist',
store : 'Info',
initComponent: function(){
this.columns = [
{header:'PID',dataIndex:'pid'},
{header:'Name',dataIndex:'name'},
{header:'Address', dataIndex:'address'},
{header:'Contact', dataIndex:'contact'}
];
this.callParent(arguments);
}
});
This is what my php script returns:
{'success':true, 'result':{'pid':'100','name':'Suman','address':'Bangalore','contact':'suman#xyz.com'}}
Here is controller:
Ext.define('App.controller.Info', {
extend: 'App.controller.Base',
models: ['Info'],
stores: ['Info'],
views: [
'info.Index',
'info.List'
],
refs: [{ref: 'info',selector: 'info'}],
init: function(){
console.log('Main controller init');
this.control({
'button[action=search]':{
click: this.onSearchButtonClick
}
});
},
onSearchButtonClick:function(){
var form = Ext.getCmp('ppanel');
if(form.getForm().isValid()){
Ext.Ajax.request({
waitMsg: 'Searching...',
method: 'POST',
url: 'app/scripts/Info.php',
params: {
searchData: Ext.encode(form.getValues())
},
scope:this,
success: this.onSearchSuccess,
failure: this.onSearchFailure
//Ext.MessageBox.alert("XXXXX","dat");
});
}
},
onSearchSuccess: function(response){
var gData = Ext.JSON.decode(response.responseText);
//var grid = Ext.widget('infolist'); //not working -need help
this.getInfoStore().load(gData);
//Ext.getCmp().setActiveItem('infolist'); //not working-need help
//this.getViewport().getLayout().setActiveItem('infolist'); //not working need help
Ext.MessageBox.alert("XXXXX",response.responseText); //works
},
onSearchFailure: function(err){
Ext.MessageBox.alert('Status', 'Error occured during searching...');
}
});
I hope I have provided required information to understand the problem. Looking forward some sort of help.
The problem is that you have two instances of the store, one in grid and one in controller.
If you want a single instance store (like it seems you want) you have two options:
Add it to your application
Assign a storeId to your store definition.
(if you already added that store to your application, ignore the above text)
Or, better yet, do not work directly with the store but with your grid, like this:
First add a ref to your view->grid in your controller:
refs: [{ref: 'info',selector: 'info'},{selector:'infolist', ref:'infoGrid'}]
And then, in your onSearchSuccess handler, instead of calling: this.getInfoStore().load(gData); you should call: this.getInfoGrid().getStore().loadData(gData);
BTW: this.getInfoStore().load(gData); will never load an array of data or a record, for that you should use: this.getInfoStore().loadData(gData);
Hope this gets you in the right track.
I am trying to organize an existing extjs code in a more standard order (extjs wise).
extjs version: extjs-4.0.2a.
I've worked through the Extjs tutorial example and every thing went well.
When I started working on the company's code I've notice there is no use of the application object there for I've added the Ext.application({...}); call.
Ext.application({
name: 'FOO',
appFolder: 'appFolderName',
launch: function() {
console.log('application was created');
}
});
Upon loading the page I see the console.log output that is included in the "launch" function property - meaning the application object is created but when I look for it ("FOO" object) under the "window" object it is not there. Compering to the tutorial code the application object exist as a property of window.
I encounter a few loading problems but I'm guessing the source of it all is this issue.
What am I doing wrong?
thanks.
You can define it yourself. Add line FOO.app = this; inside the launch function.
Ext.application({
name: 'FOO',
appFolder: 'appFolderName',
launch: function() {
FOO.app = this;
console.log('application was created');
}
});
I followed closely guide on Localization: http://docs.sencha.com/ext-js/4-0/#!/guide/localization, however I cannot make it work in MVC pattern.
I don't need dynamic localization like previous example, I just want to set it when application loads.
I tried like this:
Ext.application({
name: 'KS',
appFolder: 'app',
controllers: ['Menu', 'DailyReport', 'DP'],
launch: function() {
Ext.Ajax.request({
url: 'lib/ext-4.0/locale/ext-lang-es.js',
success: function(response, opts) {
eval(response.responseText);
},
failure: function() {
Ext.Msg.alert('Error', 'Error al cargar archivos de idioma.');
}
});
Ext.create('Ext.container.Viewport', {
items: [{
xtype: 'menu'
},
{
xtype: 'dpedit'
}]
});
}
});
In firebug I get: "Ext.view is undefined" error, and nothing renders. If I try Ajax call after creating Viewport, I don't get any error, but translation is not applied.
A more elegant solution would be to let the autoloader load the class before your launch method is run.
You can do this by define Ext.view.View as required:
Ext.application({
name: 'KS',
appFolder: 'app',
controllers: ['Menu', 'DailyReport', 'DP'],
// This will make shure the class is loaded before your application runs:
requires : ['Ext.view.View'],
launch: function() {
Ext.Ajax.request({
url: 'lib/ext-4.0/locale/ext-lang-es.js',
success: function(response, opts) {
eval(response.responseText);
},
failure: function() {
Ext.Msg.alert('Error', 'Error al cargar archivos de idioma.');
}
});
Ext.create('Ext.container.Viewport', {
items: [{
xtype: 'menu'
},
{
xtype: 'dpedit'
}]
});
}
});
For more details refer to the extjs api
It will work in production mode, when all ext javascript files are loaded before your application start. I had this problem also. Try to do this to test: Import the 'ext-all.js' file and after that, import your language file. This will work. Not the best solution, but the only one I've found that works.
The cause of your problem:
If you open your translation file you will notice directives like this:
Ext.view.View.prototype.emptyText = "";
If the file 'Ext.view.View.js' isn't loaded in the moment that you load your translation file, you'll get an error, because the 'Ext.view.View' class didn't exists.
I hope anybody can help you with a better solution.
I solved this very easily. It's simple and it will work much better. Put this in your document head, after ext.js/ext-all.js, and before your app.js. (I put it at the bottom of the language.js per the localization guide)
var params = Ext.urlDecode(window.location.search.substring(1));
if (params.lang) {
var url = Ext.util.Format.format('/assets/extjs/locale/ext-lang-{0}.js', params.lang);
document.write("<script src='" + url + "'><\/script>");
}
I'm using the /assets to work with rails 3.1.
This facilitates the ?lang=fr in the query params, the rest of the app should work according to the guide.
http://docs.sencha.com/ext-js/4-0/#!/guide/localization