Sencha package for both classic and modern - extjs

Is it possible to create a package more likely a framework package for a modern(phone) and classic(desktop) theme? My question is similar to this one.
I tried creating a package with a classic folder (following this post package.json) then I tried to use Ext.require to call and render views on-demand.
Code:
let command = Ext.String.format(
'{0}.classic.src.view.{1}.{2}View',
namespace,
screen.toLowerCase(),
screen
);
Ext.require(command, function () {
console.log('hello');
xtype = screen.toLowerCase() + 'view';
if (!menuview.getStore()) {
console.log(
'Store not yet available from viewModel binding for ' + screen
);
return;
}
if (!centerview.getComponent(xtype)) {
centerview.add({
xtype: xtype,
itemId: xtype,
heading: node.get('text'),
});
}
centerview.setActiveItem(xtype);
menuview.setSelection(node);
vm = me.getViewModel();
vm.set('heading', node.get('text'));
});
Let's say I have a DashboardView.js on my package, and when I tried to call that on Ext.require, it fails to load the file. I am wondering what am I missing to render my views on-demand.
Hoping to find an answer here. Thanks!

This is called a universal application. There is a really detailed guide showing how you structure and build your application. You end up with two apps... one is classic and one is modern... but you can have shared files like controllers and viewmodels. You can also do this just with modern and use profiles to change xtypes based on phone, tablet or PC. Universal App Guide
You can generate a default starter application that build the directory structure and also the build scripts. It is really very nice. This is the crux behind the model view controller. YOu put the data is the viewModel, the rules/events are in the viewController and all your view classes can be based on the device.
This will build a universal app sample.
sencha -sdk /home/XXX/sencha-sdks/ext-7.3.0 generate app --ext MyApp ./MyApp
if this is in /home/XXX/work/MyApp enter this into your browser:
To run the classic app:
/home/XXX/work/MyApp/index.html?profile=classic
To run the modern app:
/home/XXX/work/MyApp/index.html?profile=modern
Not sure if this answers your question.... I hope it does.

Related

How to implement a core protractor framework for multiple projects

there is an idea to implement 'protractor core' which will be used by multiple projects for UI testing. At this moment I have an angular project 'project1' with e2e tests (cucumber-protractor-typescript) which are covering 'project1'. In future I expect 'project 2', 'project 3' ... which is also required UI testing. So I would like to have a separate project let's say 'protractor core' which could be used by any project for develop UI tests. The stucture should be smth like this:
project 1 >>> (has dependency to 'protractor core')
features
step_definitions > (access to api, smth common)
project 2 >>> (has dependency to 'protractor core')
features
step_definitions > (access to api, smth common)
project 3 >>> (has dependency to 'protractor core')
features
step_definitions > (access to api, smth common)
Really appreciate any examples, ideas, suggestions !
For a start, understand Protractor is not project related.
The config file you use to execute your tests will run every file you gave him. In your case, it could be from multiple project folder.
If you already have a config file for each project, create a new one at the top of every project, and give him all project.
One of the possibility is to use the option "suite"
Here a partial example of your config file (eg protractor.conf.js) could look like with this option
exports.config = {
suites: {
project1: ['Project1/tests/e2e/**/*.js'],
project2: ['Project2/tests/e2e/**/*.js'],
project3: ['Project3/tests/e2e/**/*.js']
},
// more option
Your config file needed to be on top the folder. If not, change path according to your structured folder you want. (again protractor is not project related, it's file related)
And you run your test like this:
protractor protractor.conf.js --suite project1
# depending on other option you have put in your config file
It's another subject. I don't talk about version control, but you will have to think about that for maintainability.
I'm actually working on something very similar right now. I think my situation is very similar to yours.
What I started noticing is that we have duplicate page objects and helper classes/functions across multiple projects. What we're doing is building an npm package for our protractor framework(page objects, helper classes, etc.) and placing it on our ProGet server. That way every team has access to the same framework and they can just pull it down into their projects just like you would any other npm package. Each project will have it's own config and tests but the framework can be shared across multiple projects and helps prevent duplicate resources across multiple repos.

How can I fix compilation for relative paths using StackExchange.Precompilation?

For https://github.com/StackExchange/StackExchange.Precompilation:
We have some shared views in separate library where we have installed StackExchange.Precompilation. We have to load those views along with the normal web project's views. We have the latest version of StackExchange.Precompilation installed from NuGet in both projects. I am doing the assembly loading like this:
// Register precompiled view engine
ViewEngines.Engines.Clear();
List<Assembly> viewAssemblies = new List<Assembly> { typeof(HomeController).Assembly };
viewAssemblies.AddRange(AppDomain.CurrentDomain.GetAssemblies().Where(a => a.FullName.ToLower().Contains(".web")));
Log.Debug().Message("Looking for views in: {0}", string.Join(", ", viewAssemblies.Select(a => a.FullName))).Write();
ViewEngines.Engines.Add(new PrecompiledViewEngine(viewAssemblies.ToArray()));
In the web project, we return views the normal way: return View("Index");
When using PrecompiledViewEngine we get an error when trying to render relative names like that:
The view 'Index' or its master was not found or no view engine supports the searched locations.
The following locations were searched:
~/util/Views/Example/Index.cshtml
~/util/Views/Shared/Index.cshtml
util is the alias of the application in IIS. We don't have any areas registered.
When I copied the PrecompiledViewEngine class from GitHub - it worked! Am I missing something that will make the version distributed through NuGet work?
Copying the code over turned out not to work. I must have been trying something else at the time that made it work for that specific case.
The problem is actually a bug in StackExchange.Precompilation. I've created an issue there: https://github.com/StackExchange/StackExchange.Precompilation/issues/12

Integrating Ext.ux.touch.Grid with Sencha 2.0

I want to display data in some grid view format in Sencha 2.0.When i hunted for this I found
http://www.mindstick.com/Forum/989/Grid%20view%20data%20format%20in%20Sencha%20touch
Sencha Touch does not provide any grid control or any other control to display data in grid format so you have to use the User Extension.
I want to know the steps for integration of Ext.ux.touch.Grid like where to put these file etc.
Thanks in advance
Ext.grid.Grid is available since Sencha Touch 2.3.0: Here you can find how to integrate it in your App.
Create a folder packages in your main project folder:
Add the path to Ext.Loader:
//<debug>
Ext.Loader.setPath({
'Ext': 'touch/src',
'YourAppNamespace': 'app',
'Ext.ux': './ux',
'Ext.grid': 'packages/sencha-touch-grid/src/grid'
});
//</debug>
And then you can extend it in your application:
Ext.define('YourAppNamespace.view.AdvancedGrid', {
extend: 'Ext.grid.Grid',
config: {
// ...
});
From what I can tell, Ext.grid.Grid is only available if you pay Sencha $4k plus for Sencha Complete or the bundle. It does not come with the 2.x vanilla download...If someone knows otherwise, please post where you find this package, because it is no showing up in my touch src folder. I shart when I saw the $4k price tag...greed will never leave.

sencha cmd extjs build does not include MVC controllers

When I 'compile' my extjs MVC app (version 4.1.1a, CMD ver 3.0.2.288), an all-classes.js file gets created however none of my custom code (controllers, views etc) gets included. They get dynamically loaded when I load the html page. I have another app that works fine. I can't post my hundreds of lines of code. What can I look for?
I tried the CMD build in debug mode and it seems to process and find all my app files, it just doesn't include in all-classes.js.
I tried
sencha -d app build
and
sencha compile -classpath=app/app.js,app,ext/src page -in=index.html -out=build/index.html
I used 'sencha generate app' to create the original directory structure etc.
I have exactly the same issue.
Maybe as a hint, I've got another project where I generated the whole application, and the build. And here, with the build-impl.xml, I've got everything I need in all-classes : my controllers, models, etc
Not sure why but it seems if I explicitly do a 'requires' on my controllers in my app.js file then the compile works
Ext.Loader.setConfig({ enabled: true });
Ext.require([
'AM.controller.myController1'
, 'AM.controller.myController2'
.
.

How to separate extjs4 files to related bundles

There is a symfony 2 project with extjs4 frontend. I started with an extjs bundle which contains now the entire extjs app. The problem is it will be difficult to manage as the project grows.
I think , the best solution would be to relocate all extjs file to the related bundle
(e.g.: to the UserBundle all forms, panel, grid etc. ) and use a central Extjs bundle to load them.
What is the best practice to organize a project in this manner?
And how to include the js files from another bundle?
Or should I create extjs app to every bundle (I'm not sure it would be wise) ?
I'm not sure this is best practice, but I know this works on ExtJs 4.0.7.
So for example I have the following folder structure:
proj
index.htm
proj
app.js
app
view
SimpleIFrame.js
So in app.js I have the following code:
Ext.Loader.setConfig(
{
enabled: true
});
Ext.Loader.setPath('proj.view', './proj/app/view');
Ext.Loader.require([
'proj.view.SimpleIFrame'
])
In SimpleIFrame I have the following code:
Ext.define('proj.view.SimpleIFrame', {
extend: 'Ext.Panel',
alias: 'widget.simpleiframe',
...
});
So then later in app.js I can do the following:
var panel = Ext.create('adminClaiming.view.SimpleIFrame', {
title: 'Hello',
...
});
That allows me to separate the whole app.js into separate files. Up until I figured this out I kept getting the dreaded:
Uncaught TypeError: object is not a function
Which just meant that I'd forgotten to call Ext.Loader.setPath.
Now don't quote me on this next bit, but it seems that if you remove the Ext.require then SimpleIFrame.js is loaded in the global namespace, which is not really what you want, but it's still loaded, and it does work, which is more important.
Hope that helps. And mind you I will be most likely all be wrong ;), and had just gotten lucky in my case; what can I do, I'm still a n00b.
You could make separates bundles with your JS files inside Resources/public/js of each of them.
Then, on your main html template you could include all your JS Files using assetic.

Resources