What is the syntax for the plugin property in Ext.grid.Panel? If I comment out the plugins property in the code below, it works fine, but it produces an error if left in.
this.grid = new Ext.grid.Panel( {
id: "t-"+this.gridName+"-grid",
header: true,
title: gridTitle,
selType : 'rowmodel',
border: false,
store: store,
columns: cm,
selModel: sm,
loadMask: true,
provider: this.page.provider,
viewConfig: {
stripeRows: true
},
plugins: [Ext.create('Ext.ux.grid.GridHeaderFilters')]
});
Above syntax is perfectly right. Make sure that class you have created using Ext.create must have same name from define.
"Ext.define('Ext.ux.grid.RowExpander',{"
Also check init function. Whatever method you assign in grid.on i.e 'this.onRender', must exist in your plugin file. Sometimes for testing purpose we remove that and do not realise that.
init : function(grid){
grid.on( 'render', this.onRender, this);
},
Related
I want to integrate responsive-loader into my Nuxt.js project which runs in SPA mode. (Optional I want to add Vuetify Progressive Image support also).
It will be a static hosting with Netlify.
Versions:
"nuxt": "^2.3.4"
"responsive-loader": "^1.2.0"
"sharp": "^0.21.1"
I found some solutions how to do it (https://stackoverflow.com/a/51982357/8804871) but this is not working for me.
When I run npm run build
I get an error message: "TypeError: Cannot set property 'exclude' of undefined"
My build section looks the following:
build: {
transpile: [/^vuetify/],
plugins: [
new VuetifyLoaderPlugin()
],
extractCSS: true,
/*
** Run ESLint on save
*/
extend(config, { isDev, isClient, isServer }) {
// Default block
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
if (isServer) {
config.externals = [
nodeExternals({
whitelist: [/^vuetify/]
})
]
}
// Default block end
// here I tell webpack not to include jpgs and pngs
// as base64 as an inline image
config.module.rules.find(
rule => rule.loader === "url-loader"
).exclude = /\.(jpe?g|png)$/;
/*
** Configure responsive-loader
*/
config.module.rules.push({
test: /\.(jpe?g|png)$/i,
loader: "responsive-loader",
options: {
min: 350,
max: 2800,
steps: 7,
placeholder: false,
quality: 60,
adapter: require("responsive-loader/sharp")
}
});
}
}
The error is probably found in this section:
config.module.rules.find(
rule => rule.loader === "url-loader"
).exclude = /\.(jpe?g|png)$/;
Like said I get this error message: "TypeError: Cannot set property 'exclude' of undefined".
I run this project along with vuetify. I also would like to enable the Progressive image support together with responsive loader. Does anybody know how to setup both rules together?
https://github.com/vuetifyjs/vuetify-loader#progressive-images
The easiest way to integrate responsive-loader into a Nuxt.js project is to use this module: https://www.npmjs.com/package/nuxt-responsive-loader
Disclaimer: I created the module
The problem with your config that it relies on rule.loader property but rule can be defined in use or oneOf config sections as well.
Another one problem is that nuxt internal config has several rules with url-loader(for images, videos, fonts ...).
In your case the rule, you tried to find, has use section and url-loader is defined there, that's why your find function found nothing and threw this error:
{
"test": /\.(png|jpe?g|gif|svg|webp)$/,
"use": [{
"loader": "url-loader",
"options": {
"limit": 1000,
"name": "img/[hash:7].[ext]"
}
}]
}
About responsive-loader, you should remove extensions you want to process with responsive-loader from url-loader rule to avoid unexpected behavior and conflicts, here is extend function working example:
extend(config, ctx) {
let imgTest = '/\\.(png|jpe?g|gif|svg|webp)$/';
// find by reg ex string to not rely on rule structure
let urlRule = config.module.rules.find(r => r.test.toString() === imgTest);
// you can use also "oneOf" section and define both loaders there.
// removed images from url-loader test
urlRule.test = /\.(svg|webp)$/;
config.module.rules.push({
test: /\.(png|jpe?g|gif)$/,
loader: "responsive-loader",
options: {
// place generated images to the same place as url-loader
name: "img/[hash:7]-[width].[ext]",
min: 350,
max: 2800,
steps: 7,
placeholder: false,
quality: 60,
adapter: require("responsive-loader/sharp")
}
})
}
Yes, it looks dirty, but I think it's only way for now to change some loader.
What about vuetify - I think both loaders will conflict with each other and probably the solution is to use single loader that will work with your images.
Hope it helps.
Update for Nuxt >= 2.4.0:
They modified the rules array please update the following line:
let imgTest = '/\\.(png|jpe?g|gif|svg|webp)$/i';
Then the code should work normally again.
I have attached 2 screenshots, one of my vue.config.js and another of a section of the unminified output my build is producing.
Whats happening is this: I want to change the icon paths and the path to the manifest. For whatever reason the official way of changing this is not working. Right now they are blank spaces, however it was not working when it was anything else either ( just tried with 'foo/bar' as the path as I was typing this to triple check ).
I am confused because I seem to be doing everything exactly as I should according to the official docs. Is there anything another set of eyes can spot that I am missing?
Greetings Erik White
At some point I had the same difficulty and solved it as follows:
Copy the images into the "public" folder
example:
We add the folder "favicon" to "public", "favicon" contains 5 images
[project]/public/favicon/favicon-32x32.png
[project]/public/favicon/favicon-16x16.png
[project]/public/favicon/apple-touch-icon-152x152.png
[project]/public/favicon/safari-pinned-tab.svg
[project]/public/favicon/msapplication-icon-144x144.png
To add images in your html: modify the "vue.config.js" and add.
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
iconPaths: {
favicon32: 'favicon/favicon-32x32.png',
favicon16: 'favicon/favicon-16x16.png',
appleTouchIcon: 'favicon/apple-touch-icon-152x152.png',
maskIcon: 'favicon/safari-pinned-tab.svg',
msTileImage: 'favicon/msapplication-icon-144x144.png'
}
// ...
}
}
To change the path and name of "manifest.json" modify the "vue.config.js" and add:
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
manifestPath: 'my_new_manifest.json',
// ...
}
}
To change the properties of the "manifest.json", (name, images, color, etc) modify the "vue.config.js" and add:
// Inside vue.config.js
module.exports = {
// ... other vue-cli plugin options ...
pwa: {
// ...
manifestOptions: {
name: 'etc ..',
short_name: 'etc ..',
theme_color: '# f44647',
background_color: '# f44647',
start_url: 'index.html',
display: 'standalone',
orientation: 'portrait',
icons: [
{
src: './favicon/favicon-32x32.png',
sizes: '32x32',
type: 'image/png'
},
{
src: './favicon/favicon-16x16.png',
sizes: '16x16',
type: 'image/png'
},
{
src: './favicon/apple-touch-icon-152x152.png',
sizes: '152x152',
type: 'image/png'
},
{
src: './favicon/safari-pinned-tab.svg',
sizes: '942x942',
type: 'image/svg+xml'
},
{
src: './favicon/msapplication-icon-144x144.png',
sizes: '144x144',
type: 'image/png'
},
]
},
// ...
}
}
NOTE
chucks is not a supported parameter.
excludeChucks is not a supported parameter.
If you need to test a service worker locally, build the application and run a simple HTTP-server from your build directory. It's recommended to use a browser incognito window to avoid complications with your browser cache.
Remember to see the VUE documentation, it is very detailed, I leave you a link below #vue/cli-plugin-pwa
Nevermind, solved by updating my dependencies.
guessing this was fixed in a patch i didnt catch
I've been able to create a grid and basic filtering to narrow down iterations etc. Ideally I would like to run this via html/confluence so ideally I need to have the filtering set so that I can filter on parent as well as project. Testing this in the Rally dashboard, the way I have it still only working within project I'm sitting in. How do I make my filtering work so that where I'm at project wise in Rally doesn't matter or if I use my api key.
Thanks!
Mark
Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
models: ['userstory'],
autoLoad: true,
enableHierarchy: true,
filters: [{property: 'Iteration.Name',
operator : '=',
value : 'March'},
{property: 'Project.Parent.Name',
operator : '=',
value : 'Synergy'},
{property: 'Project.Name',
operator : '=',
value : 'Condor'}
]
}).then({
success: function(store) {
Ext.create('Ext.Container', {
items: [{
xtype: 'rallytreegrid',
columnCfgs: [
'DisplayColor',
'Name',
'ScheduleState',
'Blocked',
'TaskEstimateTotal',
'TaskRemainingTotal',
'Owner',
'Notes'
],
store: store
}],
renderTo: Ext.getBody()
});
}
});
You just need to pass a context to your store:
https://help.rallydev.com/apps/2.0/doc/#!/guide/data_stores-section-scoping
All projects:
{ project: null, workspace: '/workspace/12345'}
Specific project:
{ project: '/project/12345', projectScopeDown: false, projectScopeUp: false }
Project hierarchy:
{ project: '/project/12345', projectScopeDown: true, projectScopeUp: false }
Or if you are trying to get data from multiple projects not in a tree you can always create a filter in the store on Project like you're doing above. Note that you'll need to make sure all those projects are actually in scope based on your context to get any results.
I just stated a new project in Sencha Touch 2.2.1 from the SenchaCmd. Since this is my first Sencha project I am having problems with some pretty basic stuff. I'm trying to access Ext.data.StoreManager to load a predefined store but Ext.data.StoreManager is undefined, as in it seams like the loader have not loaded this file. I have tried to fix it by adding Ext.require('Ext.data.StoreManager'); but no luck.
The project is mostly what SenchaCmd initialized with the addition of a model, a store and some changes to app/views/Main.js.
Any ideas?
Below is my Main.js:
Ext.define('DRL.view.Main', {
extend: 'Ext.dataview.List',
xtype: 'main',
requires: [
'Ext.data.Store'
],
config: {
items: [{
xtype: 'list',
itemTpl: '{teamName}',
store: Ext.data.StoreManager.lookup('teams')
}],
listeners: {
itemtap: function(self, index, target, record, e, eOpts) {
}
}
}
});
Ext.require loads files asynchronously, as well as the requires block. If you want StoreManager to be loaded before Ext.define, you should use Ext.syncRequire before the class definition.
However, there is are better and cleaner ways to achieve the same end result. For example:
app/store/TeamStore.js:
Ext.define('DRL.store.TeamStore', {
extend: 'Ext.data.Store',
model: 'DRL.model.Team' // change your model
...
});
app/store/Main.js
Ext.define('DRL.view.Main', {
...
store: 'DRL.store.TeamStore'
...
});
Then, add the DRL.store.TeamStore and DRL.view.Main to your Ext.application which should be in app.js.
hey i was wondering about the following problem a long time:
In my previous app i specified an xtype to my classes like so:
Ext.define('Sencha.view.Home', {
extend: 'Ext.Panel',
xtype: 'homepanel',
then in my Viewport i added in the items the xtype of 'homepanel' and of course this worked fine and the homepanel and others were displayed in my view. But after upgrading to 2.0 final i can't do this anymore? No i have to use it like this to include my homepanel in the view:
xclass: 'Sencha.view.Home'
Was this a change in the version? Do i now always must call the xclass, or am i doing something wrong with my xtype? Thanks for help!
The Sencha Framework has an alias keyword instead of xtype for the declaration
http://docs.sencha.com/touch/2-0/#!/api/Ext.Class-cfg-alias
Ext.define('MyApp.CoolPanel', {
extend: 'Ext.panel.Panel',
alias: ['widget.coolpanel'],
title: 'Yeah!'
});
// Using Ext.create
Ext.widget('widget.coolpanel');
// Using the shorthand for widgets and in xtypes
Ext.widget('panel', {
items: [
{xtype: 'coolpanel', html: 'Foo'},
{xtype: 'coolpanel', html: 'Bar'}
]
});
Which is also how EXTJS does it nowadays:
https://stackoverflow.com/a/5608766/330417
I have a Sencha Touch 2.0 app and my viewport is set up like this:
Ext.define('example.view.Viewport', {
extend: 'Ext.Container',
config: {
fullscreen: true,
id: 'mainContainer',
layout: {
type: 'card',
animation: {}//we manually set this throughout the app
},
items: [
/*
* This is a list of all of the "cards" in our app that are preloaded
*/
{ xtype: 'dashboardpanel' },
{ xtype: 'customerlist' },
{ xtype: 'loginpanel' }
]
}
});
So if yours isn't working I'm guessing something else is going on. But its hard to tell without seeing more code.
So i figured out what was wrong with my xtypes: I declared my Views in my Controller not in my App.js, as i had put them into my app.js all worked fine for me!
Thanks for your help!
Ext.define('Sencha.view.Home', {
extend: 'Ext.Panel',
alias: 'widget.homepanel'
when you want to use the alias widget 'homepanel' you just say xtype:'homepanel wherever you want to implement it
just change your container to list from panel and set the list-config as
scrollable: false,
pinHeaders: false,