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.
Related
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.
I have rectally started using sencha architect for sencha touch devlopment.
Earlier I would use the profiling of the application to differentiate in the css being loaded for the application based on the device. As for devices like mac mini the tool bar height is less that can be increased from default as compared to other device.
In Sencha Architect theme is being used which has its scss file being loaded, but did not find a option to change theme.
Please correct me if I wrong or missed any step I need to do to achieve the required output.
create 2 themes on architect --> resources
on app.json add
"builds": {
"NameProfile1": {
"theme": "theme-crisp-d8aec586-e27f-458a-a90a-541fc781ad15"
},
"NameProfile2": {
"theme": "theme-crisp-touch-e3a4f7f7-77c6-44af-966b-c09d1fab2b0c"
}
},
Build
now use
http://localhost:8080/?profile=NameProfile1
or
http://localhost:8080/?profile=NameProfile2
We have an extjs application where the structure we laid out doesn't exactly match the structure Sencha recommends. In our structure we don't have an app.js but we do have a js where we mention the autoload and launch function, example as below along with the folder structure.
What we are looking is to minify all the JS files in admin folder and create one JS to be used in production, we tried looking at the Sencha CMD but of no luck. Can some one please point us for the exact steps for minifying our application for production use.
Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Ext.ux': '../../script/js/ext4/ux'
}
});
Ext.require('Admin.view.Administration');
Ext.application({
name: 'Admin',
appFolder: '../../script/js/ace/admin',
launch: function()
{
Ext.QuickTips.init();
var me = this;
Ext.create('Admin.view.Administration', {
renderTo: 'contentPanel'
});
}
});
We tried Cmd by generating JSB3 file, I know its deprecated in 4.2.1 but with the structure we have we felt that was the only option.
we tried the below command, but no jsb3 file got generated
sencha build admin.jsb3 <path to the admin js folder>
Thanks in advance, any pointers are really appreciated.
I posted this in Sencha forum, but I am expecting a much simpler option then they have provided.
Edit
we have multiple apps, and in most cases we try to use the js from other app folders.
For example in the below image we have utilities and admin apps, from utilities app we use SourceStore and the autoloader is defined as below to access the required
Ext.Loader.setConfig({
enabled: true,
paths: {
'Admin': '../../script/js/ace/admin',
'Utilities': '../../script/js/ace/utilities',
'Ext.ux': '../../script/js/ext4/ux'
}
});
If you let Sencha CMD to generate a skeleton application for you and then merge your existing code with it, then it will be really easy.
Otherwise you can try the old JSBuilder from Sencha as well.
I'd highly recommend checking out grunt with the grunt_sencha_dependencies plugin. Here's a tutorial.
At a high level, what you do is:
1) Run the sencha_dependencies plugin to generate a list of dependencies.
2) Pass the outputs to the uglify plugin to concat and minify the javascript.
3) Use grunt's copy task to replace to update your index.html with the minified output.
edit: I've dealt with Sencha CMD and it is awful. I would not wish it on my worst enemy. Grunt is just way easier.
I recommend you using JAWR. Basically you define in the jawr.properties file your bundles, and say which file or folder belongs to which bundle. A bundle is actually a bunch of JS files that are minified into another single one and can be requested separately in your servlets/JSP files. Besides, you can define dependencies between bundles (which by default are independent), so that when you include a bundle, other bundles are automatically included in your page. To include a bundle you use the special tag <jwr> in your servlet. Besides, you can enable the debug mode, so that when you develop, you can debug your code.
How it works: you add a servlet to your web.xml file to be loaded on start-up, which is also the stage when these bundles are generated (transparent to you).
Some tips:
Check this tutorial
Because in ExtJS the order in which the files are used is important, you should consider it when you define your bundles.
If you are willing to give Sencha CMD another shot, you could try using the sencha compile command.
sencha compile --classpath=folders-your-using,separated-by-commas concatenate --yui --output-file=output.js
--classpath is the folders you want to include.
--yui is the compressor
--output-file is the name of the javascript output.
I would recommend reading the sencha cmd guides. They can be a little intense, but sencha command packs so many tools in it that it probably deserves to be: http://docs.sencha.com/cmd/5.x/advanced_cmd/cmd_reference.html
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'
.
.
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.