Sencha Q&A Summary – March 2019 Edition

You had questions and we’ve got answers! Please find a summary of questions and answers collected from our community of Sencha users at recent Sencha events, including DeveloperWeek Bay Area and a variety of webinars that you can now watch on-demand:

• Learn What’s New in Sencha Ext JS 6.7 & Tooling
• Sencha Angular Developer Tool Training – ExtAngular
• Sencha React Developer Tool Training – ExtReact
• Ask Me Anything – March 2019
• Introducing ExtAngular: Adding Powerful Sencha Components to Angular Apps

Ext JS & Tooling Questions:

Question: Grid filters are retained after grid/page refresh. This is great. Question: Do filters retain per user, or per application, or per configuration, or in browser cache?

Answer: State Provider can be leveraged to persist the saved state of components and objects, such as grid column widths, choices of grid columns, etc. Ext JS includes Local Storage and Cookie State Providers out of the box, meaning the persisted state can be easily saved locally against the user’s browser. When a user accesses the app from the same browser again, the component’s state can be automatically restored. An example of setting up stateful components can be viewed here.

The grid filters plugin in the Modern toolkit leverages a Stateful mixin in order to allow the filters to be saved to the state provider. By default, this uses Local Storage of the browser to store the filters as an encoded JSON string.

The framework also includes a base class, Ext.state.Provider, that can be extended if you wish to create a different kind of state provider. This can be useful if you are looking to save state to a remote web service for state persistence across multiple machines when a user logs in (for example).

Question: Is there a way to add additional themes to a universal app generated by ext-gen. For example I would like to build the app using either the material or ios theme.

Answer: With our 6.7.1 release (coming soon), additional pre-packaged themes can be used by updating the application’s package.json, and defining the theme package under dependencies:“dependencies”: {
“@sencha/ext-modern”: “~6.7.0”,
“@sencha/ext-modern-theme-material”: “~6.7.0”,
“@sencha/ext-modern-theme-ios”: “~6.7.0”,
“@sencha/ext”: “~6.7.0”
}

Perform an npm install, then in app.json, define the theme:“builds”: {
“desktop”: {
“toolkit”: “modern”,
“theme”: “theme-material”,
“sass”: {
“generated”: {
“var”: “${build.id}/sass/save.scss”,
“src”: “${build.id}/sass/save”
}
}
},
“phone”: {
“toolkit”: “modern”,
“theme”: “theme-ios”,
“sass”: {
“generated”: {
“var”: “${build.id}/sass/save.scss”,
“src”: “${build.id}/sass/save”
}
}
}
}

You should then be able to leverage the iOS theme as part of the phone build.
Sencha Themer can also be used to easily create new themes in a project.

Question: What is the preferred upgrade path from version 6.5.1?

Answer: You should upgrade straight to Ext JS 6.7.0. By reviewing the upgrade guides for Ext JS 6.6.0 and 6.7.0, along with the “What’s New” guides for 6.6.0 and 6.7.0, you can get a sense of the changes and new features between the versions.

Question: Is grid filtering going to be added to the Classic Toolkit?

Answer: The Classic toolkit already supports grid filtering. Please take a look at this example.

Question: Is there a timeline when most of the features in modern and classic packages will be unified (e.g. ext 7)? Does a matrix or comparison chart exist for Modern vs Classic Toolkit? Which does Sencha recommend?

Answer: In Ext JS 7 most of the gaps will be closed. Please let us know what features/components are important for you so we can prioritize our efforts.

We do not have a detailed comparison matrix, but in terms of what we recommend: Modern toolkit is recommended for new projects that require better cross-platform device support and Classic toolkit is recommended for projects that require support for classic browsers like IE8/9/10, ARIA support, or support for RTL (Right-to-left) languages.

Question: Can custom theme packages be leveraged by NPM?

Answer: Yes, Sencha custom theme packages can be utilized – just include the custom theme folder under the ext-angular/packages folder in your ExtAngular project, and modify the ExtWebpackPlugin ‘theme’ parameter (in webpack.config.js) to the name of your theme.

Question: What are the plans for Sencha Cmd?

Answer: We will continue to support Sencha Cmd as the Ext JS framework continues to evolve. Additionally, Sencha Cmd is being maintained to support our Open Tooling efforts as well. Eventually, Sencha Cmd will be replaced with ExtBuild, but will be LTS for a significant duration looking forward.

ExtAngular Questions:

Question: If I’m an Ext JS customer, why would I choose ExtAngular?

Answer: You shouldn’t. If you have an existing Angular project you can quickly and easily leverage our pre-built components by integrating them into your Angular app using ExtAngular.

Question: Can I inject custom CSS classes to components to style them as required?

Answer: Yes, sure! You can use cls and other related config parameters – see our documentation here: https://docs.sencha.com/extangular/6.7.0/modern/Ext.Component.html#cfg-cls

Question: How do Ext JS components sync up with Angular version updates?

Answer: We are keeping up with all Angular updates with minor versions of ExtAngular, for example ExtAngular 6.7.1 is about to release with support for Angular 7.2.10 (as of 3/26/2019).

Question: Does the grid support the following features: column grouping, frozen rows/columns, multi-level grouping?

Answer: Any Grid features that you find on the Ext JS modern toolkit are available to ExtAngular, and the version of ExtAngular is in sync with the Ext JS versions (ie, the current version 6.7).

Question: How can I show a custom angular component in for example a ?

Answer: Here’s how you can accomplish that: