How do I do this :
http://try.sencha.com/touch/2.1.0/guides/nested_list.3/
I'm using sencha architect. I don't want to use JSON or XML or whatever. I want it to be inline.
Sencha touch nested list no data
Answer is there.
I don't know why Sencha team provide a non working exemple with root...
Related
I'm looking for a way to create nested lists with draggable elements in VueJs3 & Ionic
This is the result I'd like to have: https://ej2.syncfusion.com/vue/documentation/treeview/drag-and-drop/
Moreover, I'd like each item of the list to be part of "ion-sliding" tag for them to have some options when they're sliding like this: https://ionicframework.com/docs/v3/api/components/item/ItemSliding/
I tried to use "ion-reorder-group" but it doesn't allow me to create nested lists like I would like to. I also tried a bunch of librairies but I'm not able to make any of them work with my Ionic-Vue3 project.
I'm stuck on this issue and I would be very glad to have any recommendations or help !
Thank you very much
I resolved the question, I'm posting the solution I used in case it could be useful for someone.
I used this library: https://github.com/SortableJS/vue.draggable.next that supports Vuejs 3.0
There's a very useful link to look at live demos and each of them has the code attached to it available. I combined some of them and added my "ion-sliding" tags to obtain the result expected.
It works perfectly !
I'm trying to achieve something like this:
example image here
Is there a way to do this using docusaurus?
As Docusaurus uses Infima (a facebook styling framework), that should be possible using maybe a custom module and the Grid for layouting it accordingly? just an idea, not a complete solution.
Consider Using Draft.js for rich text editing on the web app, then convert the output to a json object with Draft.js convertToRaw function and store it in the database.
if the consumer of the rich text is a react-native mobile application, what is the best approach to represent the rich text?
is there any robust work or library that iterate through the json object and export native Text and Image components?
also there are some libraries that export the json object to html:
https://github.com/sstur/draft-js-export-html
https://github.com/rkpasia/draft-js-exporter
the exported html then can be represented with a webview component. is this a reliable approach?
another way for representation would be putting react in react-native webview and use Draft.js Editor with readOnly prop. but I don't have any idea which way to go!
This seems to be the best approach.
You must fetch the json and write a parser that understands Draft.js model (inlineStyleRanges, entityRanges, entityMap,...) and based on that, exports to native components.
At work we had the same problem, so we've developed a library that does the job, it's called react-native-draftjs-render.
It has a sample project where you can see how it works and understand how to use it. It is also available on npm.
If you already have the html version and want to use it, you will also need a parser to convert the html into native components. react-native-htmlview seems to do it but I've never used.
Render native components is better than using webviews (they are very limited and slow), so I don't recommend this approach.
We use redraft to approach that rich text from draft-js render to HTML5 and Weex(rax). And I am sure you can use it achieve your goal because the redraft is just a convert function with zero dependencies, you can custom the render element like div in HTML or View in React Native.
I upgraded from Sencha Touch 2.0.1 to 2.1 and suddently the framework adds a -webkit-transform to all my list elements which destroys lot of my layout, anyone knows why it does so and how to remove it?
See attachement:
With Sencha Touch 2.1 the list component was completly redesigned.
Quote from Realease notes:
The new List component is included with this release. This implementation replaces the old one for lists and is no longer bound one-to-one between a store and DOM elements. This means that the length of the list will no longer have a bearing on it's scrolling performance. In addition, lists can use components if you specify them with an itemConfig and itemTpl will be converted to an itemConfig dynamically if you specify one. Due to these changes, the DOM structure was altered for lists and you may need to change some css selectors to add appropriate styling for your lists. Typically you need to change the selector from '.x-list-item' to '.x-list-item > .x-dock-vertical > .x-dock-body' for any padding or margins you may have added. We have change the TouchTweets example from using a component based DataView to the new List very easily and should be a good example of using the new List component with dynamic large lists.
http://www.sencha.com/blog/whats-coming-in-sencha-touch-2-1
The redesign is the reason for the new css list elements.
I think you have to change and customize your css again for your list.
I am building my first app with ST2 and began by building the app outlined in Getting Started with Sencha Touch 2 and then taking that and trying to modify it so it met my own needs. The demo app has a DataView List where each element can be tapped to reveal a corresponding detail page.
In that app the content on the detail pages is being pulled in dynamically and does not need to be styled or arranged much. However, for my own detail pages I need to use a Template or XTemplate to style and position my data.
I can't seem to figure out where I should define the template (ie, var myTpl = new Ext.XTemplate(...)) —In the controller, in the model?
Any guidance on this front would be much appreciated.
This depends on where you want to use the XTemplate. If it is only ever going to be used in one view, then just define the xtemplate when you defined the view.
{
xtype : 'view',
tpl : new XTemplate('<div></div>...')
}
If you are going to use it in multiple views, then you can create a class that has a sole purpose of sharing templates.
Ext.define('MyApp.util.SharedTemplates', {
statics : {
sharedTemplate1 : new XTemplate('<div></div>')
}
});
This way the template only gets compiled once and is re-useable.