I'm new to sencha-touch. I was wondering how to properly use the file structure in sencha-touch. For example, under the app folder there's your controller, model, profile, store, view folders. If I define a store, for example under the the store folder I create a file named search.js
Ext.define('Volunteer.store.search'{
extend: 'Ext.data.Store',
requires: ['Volunteer.model.person'],
config:{
model: 'Volunteer.model.person'
}
});
How do I use this store in a different file?
Add your store in app.js file stores: ['search'] and different file you call Ext.getStore('search');. If not found, you need add search.js into index.html
Related
I have a Nuxt Content project, which fetches a number of content files like so:
/content/resources/item.yaml
---
item:
title: Hello World
pdf: sample.pdf
Which is pulled into the Vue component:
async asyncData({ $content }) {
const resources = await $content('resources').fetch()
return { resources }
},
Where should the PDF file go in the Nuxt folder structure? and how should it be referred to in the YAML file? I'm trying something like:
/content/resources
-- item.yaml
-- sample.pdf
and then in Vue: <a :href="item.pdf" ..., which always just results in https://url/sample.pdf, which does not load obviously. What is the obvious thing I am missing, as I can't find it anywhere in the Nuxt Content docs?
/content/resources
-- item.yaml
/assets/files
-- sample.pdf
and referencing /assets/files/sample.pdf also doesn't work.
The Nuxt Content docs describe using static assets for this.
Move sample.pdf to static/ in the root of your Nuxt project (e.g., in static/sample.pdf), and then use its static-relative path in your pdf YAML property:
pdf: /sample.pdf
The issue is how to get Vue to render the correct path for an asset, if the path to the asset and the assets name is passed through as a props.
Explanation:
When using a Vue component... if passing in props which contain a path and a file name of an asset to be loaded
export default{
name: 'NewComponent',
props: ["path","file"],
computed:{
calculateCompletePath (){
return this.path+""+this.file;
}
}
}
If using something like the above in a manner such as:
<template>
<div>
<video>
<source :src="calculateCompletePath" type="video/mp4"/>
</video>
</div>
</template>
How can you get the src portion to render correctly - e.g Vue generates its own string referencing the media folder for example
/media/movie.6ac43bcf.mp4
Side note:
I've read somewhere there is the possibility to using require (<<asset>>) but that doesn't seem to work if used on the computed function e.g. return require (this.path+""+this.file);
Any ideas how to get this to work?
Please refer this document for a detailed explanation on how to resolve static assets:
https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports
I think the problem is that your asset(in this case an mp4 file) is not located in your computer's /media folder.
See these 3 points for a better understanding: https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules
If your media folder is located under the root folder(/), then, the computed value /media/movie.6ac43bcf.mp4 will work.
If your media folder is under src folder of the app, your computed property should return #/media/movie.6ac43bcf.mp4
If your media folder is somewhere else, then you should create a proper path using #/ or the ./ symbol to reach the file correctly.
I have a Vue.js + Electron app (electron-vue boilerplate)
What are the best practices of getting and displaying directory's folders and files?
Basically I want it to behave like a File Explorer (Windows) or Finder (Mac). You open a folder you get all the content displayed.
Let's say we have:
the main view called App.vue with a router inside of it.
there's an open folder button in App.vue.
And we also have FileExplorer.vue component that is getting displayed as a route inside that App.vue
How do I make this FileExplorer.vue component to get and display files and folders of, let's say, directory C:\test folder (on Windows) when we hit that open folder button in App.vue?
I know that I should use Node for that, but how exactly? What do I import and how do I use Vue to make it all work together?
All the projects on Github are too complicated for a newbie to understand how they work. For example this one is quite simple looking, but there's so much code in there that you don't even know where to start
Update:
I managed to get the content of a folder doing this:
<v-btn #click="readDirectory"></v-btn>
[...]
const fs = require('fs-extra')
export default {
name: "FileExplorer",
data () {
return {
dir:'C:/test',
files:[],
file:""
}
},
methods: {
readDirectory() {
fs.readdir(this.dir, (err, dir) => {
console.log(dir);
for(let filePath of dir)
console.log(filePath)
this.files = dir
})
},
}
}
And I displayed it like this:
<v-btn v-for="file in files" :key="file.id">
{{file}}
</v-btn>
But it doesn't really behave like a real file explorer...I get the folders and files on button click but I can't do anything with all those folders and files.
How do I make all the folders that it gets on click to behave in a similar way (to get its content) ?
And how do I display folders and files differently?
If you simply want to allow a user to select a folder in Electron I would suggest using the showOpenDialog API.
In the renderer process, you need to use the remote API to access the dialog API.
const { remote } = require('electron')
remote.dialog.showOpenDialog({
properties: ['openDirectory'],
defaultPath: current
}, names => {
console.log('selected directory:' + names[0]);
});
If you want to display the contents of a directory within your app you're going to have to use the node fs module and read the directory contents.
fs.readdir(path[, options], callback)
Will callback with all the file and directory paths which you'll then have to iterate over to get more info or to traverse recursively to get their contents. There are are node modules which make this process a little easier than writing it all yourself.
Once you've got an object tree containing all your files and directories you can use this to create a UI using vue.js.
I have a working app using aurelia-i18n. I would like to split translation.json file into multiple files like nav.json, message.json, etc but I am not sure how to do it.
This is how it looks right now.
locale
|-en
|- translation.json
But I want to change it to this way.
locale
|-en
|- nav.json
|- message.json
Is it possible to do it? If so, how do I configure it and access values in each file?
You can have multiple resource files and these are called namespaces in the i18next library (by default you only have one namespace which is called: translation) which is used by aurelia i18N.
You just need to list your namespaces when configuring the plugin with the namespaces and defaultNs properties inside the ns option:
.plugin('aurelia-i18n', (instance) => {
// adapt options to your needs (see http://i18next.com/pages/doc_init.html)
instance.setup({
resGetPath : 'locale/__lng__/__ns__.json',
lng : 'de',
attributes : ['t','i18n'],
ns: {
namespaces: ['nav', 'message'],
defaultNs: 'message'
},
getAsync : true,
sendMissing : false,
fallbackLng : 'en',
debug : false
});
});
See also the documentation of i18next and this related github issue: Using namespaces
I have created the class in Ext JS 4, and now I want to extend that in another class. I use extend properties, to extend the class. But I am not able to extend the class. Do I want to use require to include the class file. But I keep both the files in the same directory.
Define source paths for ExtJS to locate your source files.
Ext.Loader.setConfig({
enabled: true,
paths: {
'[your namespace prefix here]': '[physical path]'
}
});
Then define Ext.require or requires section in subclass to enable automatic path resolution.
Read this link for more info.
Example
Base class: file located at folder root/view/common/Picker.js
Ext.define('RL.view.common.Picker', {
extend: "Ext.form.field.Picker",
...
}
Sub class: file located at folder root/view/selection/DriverTreeCombo.js
Ext.define('RL.view.selection.DriverTreeCombo', {
extend: "RL.view.common.Picker",
requires: ['Ext.tree.Panel', 'RL.view.common.TreeBase'],
...
}
I have namespace as RL.xxx.xxx and RL is supposed to be the root folder. Now I can define Loader configuration as below
Ext.Loader.setConfig({
enabled: true,
paths: {
'RL': '/root'
}
})
Loader configuration should be set before 'Ext.onReady(...)' function call. Going through examples folder in ExtJS package would help you to see how this is done.
Further reading:
The Class System
Dynamic Loading and new class system