I use ExtJS 5. I use Sencha Architect.
I have 2 views: View1 (alias: widget.view1) and View2 (alias widget.view2). Those views are declared in views folder but are not linked in application. One of them is created at runtime and added to container in beforerender:
component.add({xtype: 'view' + type});
where type variable is calculated earlier.
I build app with
sencha app build testing
and in created JS file there is no View1 neither View2 included. Also there is no appropriate ViewController neither ViewModel.
Then I've added subsections in app.json file in section js:
{
"path": "app/view/View1.js",
"x-compile": true,
"includeInBundle": true
},
{
"path": "app/view/View1ViewController.js",
"x-compile": true,
"includeInBundle": true
},
{
"path": "app/view/View1ViewModel.js",
"x-compile": true,
"includeInBundle": true
},
and rebuild app. Now the View1 class is available in compiled JS and also during runtime.
Question: how can I make SA to modify app.json file? There is a file app.json.meta created by SA (I guess). The content of both files is similar.
I've found solution.
I need to add AppName.view.View1 and AppName.view.View2 to requires table of container where I need to add views.
Related
I am trying to get my site setup with Gatsby + MDX. I am looking at the documentation here and want to make use of the autolink-header-option. I have tried using the rehype and remark plugins for this, but I can only get the Rehype plugin to work and only with the wrap option. I would much prefer the GitHub (default) style with the link coming before the title.
I am using the below config in gatsby-config.js and cleared .cache and public after updating the file to be sure nothing was cached. Also I am not getting any errors, everything builds and runs successfully, there just is not any link to the headers.
{
resolve: `gatsby-plugin-mdx`,
options: {
rehypePlugins: [
// To pass options, use a 2-element array with the
// configuration in an object in the second element
require("rehype-autolink-headings"),
],
},
},
UPDATE
After trying multiple configurations, the way I was able to get it working as expected was with a different plugin config.
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [ `gatsby-remark-autolink-headers` ],
plugins: [ `gatsby-remark-autolink-headers` ],
},
}
Both gatsbyRemarkPlugins and plugins are required as per: https://github.com/gatsbyjs/gatsby/issues/15486
The README for rehype-autolink-headings mentions that:
This package works with headings that have IDs. One way to add IDs to headings is by using remark-slug before this plugin.
Changing your config to the following should fix it:
{
resolve: `gatsby-plugin-mdx`,
options: {
rehypePlugins: [
require("rehype-slug"),
// To pass options, use a 2-element array with the
// configuration in an object in the second element
require("rehype-autolink-headings"),
],
},
},
In fact, the documentation you linked to has this additional require line as well, but it doesn't clarify what it is used for.
Naturally in React you can alias importing ./component/<name>/index.js as ./component/<name>.
Is there a way in Webpack to change the name of the file that is used as the default? In this case, changing the index.js to a different file name?
JavaScript and by extension Webpack only allows index.js files as default when a directory is used. However, when using Webpack it is possible to write a plugin tapping into a hook for before-existing-directory and return the file you require as index at build time.
Luckily, this plugin is already written directory-named-webpack-plugin.
var DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");
resolve: {
plugins: [
new DirectoryNamedWebpackPlugin()
]
}
If there is a folder named foo, this makes webpack look for foo/foo.js instead of the default index file. It also supports a custom transform function, so you can choose the file that gets selected, but I would strongly advise against that as it can get confusing real fast.
Looks like I was just missing an object layer. I had:
plugins: [
new DirectoryNamedWebpackPlugin()
]
instead of:
resolve: {
plugins: [
new DirectoryNamedWebpackPlugin()
]
}
I am creating a ExtJS 6 package to reuse a library across my extjs app. I need to extend Ext.field.TextArea functionality. could someone have a simple example to start with?
Like this:
Ext.define('MyPackage.form.field.MyTextArea', {
extend: 'Ext.form.field.TextArea',
xtype: 'my-textarea'
});
And in your package.json verify you've got the following values:
"type": "code",
"toolkit": "classic",
Is it possible to load store/model/view with custom parameters?
I have structure like this:
- app/
- app/store/mystore.js
- app/model/mymodel.js
- app/view/myview.js
- app.js
- index.html
app.js content
Ext.application({
models: [
'mymodel'
],
stores: [
'mystore'
],
views: [
'mystore'
],
...
Browser loads those 3 files like this:
http://localhost/myapp/app/store/mystore.js
Is it possible to load them somehow with extra params like this: http://localhost/myapp/app/store/mystore.js?myparam=foo
First: You cannot do it separate per file!
But there are at least two ways to archive it:
You could either override the loadScript and loadScriptFile to modify the url or always use disableCaching: true and modify the disableCachingParam like so myparam=foo&_dc
Now each file would be loaded like
http://localhost/myapp/app/store/mystore.js?myparam=foo&_dc=3242423423
http://localhost/myapp/app/model/mymodel.js?myparam=foo&_dc=3242423434
http://localhost/myapp/app/view/myview.js?myparam=foo&_dc=3242423489
Have you tried routes? There is a module which you can download from :
Ext.ux.Router
I have an ExtJs TreePanel in which i've set the enableDrop as true and set the property ddGroup to one of the groups. I have this another ExtJs view from where i need to drag and drop the images. And i know that ddGroup defined for this is media
However the drag and drop never happens. This is my code snippet:
var treePanel = new Ext.tree.TreePanel({
"id": "myTree",
"lines": true,
"animate": true,
"enableDrop": true,
"enableDrag": false,
"ddGroup": "media",
"containerScroll": true,
"autoScroll": true,
"split": true,
"stateful": true,
"renderTo": "treeStruc",
"loader": //my loader,
"root": new Ext.tree.AsyncTreeNode(treeRootConfig),
"dropConfig": {
"ddGroup": 'media'
},
"listeners": {
"nodedrop": function(e) {
//do the check
}
}
});
Is there anything else that needs to be done?
Thanks.
Although the documentation states that nodedrop is fired when a "DD object" is dropped on a tree node, the source seems to indicate that it's still expecting a valid node.
In order to implement the drag-drop from view to tree, I believe you would have to initialize your own TreeDropZone to handle dropped DD items that are not tree-compatible nodes.
This example: http://dev.sencha.com/deploy/dev/examples/dd/dragdropzones.html shows something similar (although it is a view to grid drag-drop), but you'll likely have to use a TreeDropZone instantiation where they've used a straight out Ext.dd.DropZone object.
Also, make sure that your source view and the target tree share the same ddGroup - although I think you mentioned that they do.
I hope this is in any way helpful!