I have done application using EXtjs 4. Application contains many view screens like Login page, Dashboard. home etc, for to access project local URL is file:///E:/MyWeb/Web/index.html . once i visited this URL i will get first Login page because in viewport i have given xtype of Login view. whenever i will go different page URL wont be change it will be remains same as file:///E:/MyWeb/Web/index.html, but i can visit all the pages. some scenario if i am in middle, some problem happens in page when i reload the page it will go again Login page itself i cant be come in current page. again it will ask login and next i need to go required page. Can we change URL of the project in each page navigation? . How to achieve this one in ExtJs?. Graet appreciated. Thank you. My viewport code is below.
Code Here:
Ext.define('GulfMark.view.Viewport', {
renderTo: Ext.getBody(),
extend: 'Ext.container.Viewport',
layout: 'fit',
defaults: {
autoScroll: true
},
items: [{
xtype: 'container',
id: 'mainContainer',
layout: 'fit',
items: [{
xtype: 'loginView'
}]
}],
listeners: {
}
});
I did it making (app.js)x3. Each app.js, was charged in his index.html ( index1.html, index2.hmtl and index3.hmtl)
Every app.js, it charged with him controllers and respective view.
It's a very quick explanation, but it's easy to do.
Related
According to the docs, when building universal app with sencha cmd, one can set the app's main view using either mainView config or within the launch() method of Ext.app.Application (using setMainView method) like this:
Ext.application({
name: 'Fiddle',
launch: function () {
var app = this.getApplication();
//app.setMainView('MyApp.view.main.Main');
//app.setMainView({xtype: 'app-main'});
},
mainView: 'MyApp.view.main.Main'
});
...
A fiddle is available here: Sencha Fiddle
And, it works with the classic toolkit, but when using modern one, the things can get wrong.
If you are using the mainView config - it works as expected (this is by default when you execute sencha generate app).
If you are using the setMainView() method, however, it depends of the parameter type you pass:
you will get a blank screen when you pass the full class name of the view as string ('MyApp.view.main.Main'). The view is created (reachable via Ext.ComponentQuery.query('app-main') within the console), but is invisible
you will get an error when you pass a config object for the view ({xtype: 'app-main'})
You can try it in the Fiddle above by commenting/uncommenting rows 7,8,11 (make sure a modern toolkit is selected before hitting Run).
Any idea how to resolve this, pls?
The ability to use the launch method logic is vital - for example if you are trying to implement an app with login functionality.
If modern add the main view to the viewport otherwise just set the main view
Ext.application({
name: 'Fiddle',
launch: function () {
if (Ext.isModern) {
Ext.Viewport.add([{
xtype: 'app-main'
}]);
} else {
var app = this.getApplication();
app.setMainView('MyApp.view.main.Main');
}
},
});
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.panel.Panel',
xtype: 'app-main',
title: 'Panel Title',
html: 'panel body data...'
});
i am trying to redirect my page to Google from a link in Extjs
Here is the code:
Ext.create("Ext.Component", {
renderTo: Ext.getBody(),
autoEl: {
html: "Link",
href: "www.google.co.in",
tag: "a"
}
});
But instead of redirecting to page it is looking for a file in the working folder.
Please help.
This works for me:
Ext.create("Ext.Component", {
renderTo: Ext.getBody(),
autoEl: {
html: "Link",
href: "http://www.google.co.in",
tag: "a",
target: "_blank"
}
});
It does go to a new window, so you you could just remove the target config if you need to.
If you want to open new url in same tab than another option is to put this line in click handler
window.document.location="http://google.com"
This will open page in same browser tab.
Ext.define('MyApp.view.TopToolbar', {
extend: 'Ext.container.Container',
alias: 'widget.toptoolbar',
initComponent: function() {
Ext.applyIf(this, {
layout: 'fit',
cls : 'x-bottombar',
html : 'HTML FRAGMENT'
});
this.callParent(arguments);
}
});
Originally this component had contained a small fragment of html but now its going to be significantly increased. So I'd like to move it to an external file but I found no way in the docs to do this. Is there a way to do this? I don't want to have a big chunk of html in my js.
Use the loader configuration on the component:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-loader
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentLoader
Asking and answering my own question thanks to a post on another topic:
I have created a cardboard in a custom Rally app. The list of items within the cardboard is longer than the screen will show, but there is no scroll bar in the window or the container. I've tried adding autoScroll:true to first level properties of the cardboard and to both the storeConfig and listConfig of the cardboard. Nothing works. WTH?
Here is the answer from Anders Martinson
You have to add autoScroll:true to the app definition:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
autoScroll: true,
//...
}
Once you do that, you're set.
Is there someone here who made a MVC application using EXTJS 4 BETA 3? and works fine??
please help me how?, ..
I have followed step by step here .. and #Abdel Olakara help
but there is still an error ... here my firebug
[Ext.Loader] Synchronously loading 'AM.controller.Users'; consider adding
Ext.require('AM.controller.Users') above Ext.onReady
[Ext.Loader] Synchronously loading 'AM.store.Users'; consider adding
Ext.require('AM.store.Users') above Ext.onReady
this.getView('Viewport') is null
When i read this at the forum ... there are still some bug with MVC guide ...
so, if you ever make it works.. how?
this is my Application.js :
Ext.Loader.setConfig({enabled:true});
Ext.create('Ext.app.Application', {
name: 'AM',
controllers: [
'Users'
],
views: [
'user.List'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userlist'
}
});
}
});
i'm trying to learn MVC in Extjs...
sorry if my english bad..
Well, I think I should take back my words! I had some success after going through sencha blog. And finally, got my MVC "Skeleton" running!
Here is the working code:
Ext.Loader.setConfig({enabled:true});
Ext.create('Ext.app.Application', {
name: 'AM',
autoCreateViewport: false,
controllers: [],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
Please note that, the code is very minimal and have removed the common errors reported in forums and here. The next step would be to start playing with this code and add controllers, views etc onto it!
I will keep updating this answer going forward.
Update: The first two error mentioned are not actually errors. They are warnings and application works fine even if they display these warnings. The third error you mentioned is a stopper!
Solution to Viewport problem Here are two ways to solve it.
Use the autoCreateViewport: false, property and define your viewport (I see that you have defined your viewport in launch method)
Create a Viewport.js and save it in view folder. In this case, I felt my launch method empty and moved the viewport code to Viewport.js file. But I do get an error:
Uncaught TypeError: Cannot call method 'create' of null
I do use ExtJS 4.1.
In my code [Ext.Loader] Synchronously loading 'OOO.store.News'; consider adding
Ext.require('OOO.store.News') above Ext.onReady warning message was invoked if I place
stores: [
'News',
],
in my app/Application.js file instead of app/controller/OOO.js file.
So put stores:[], in controller file.