I have a lot of tags, and I need to select a lot for each document. It is uncomfortable to click one by one every time. Also I see selected elements. How can I remake it into somefield like a multiselect? It could be even native. Or how to select all tags at once?
I am using array:
{
title: 'Language',
name: 'language',
type: 'array',
options: {
layout: 'grid'
},
of: [{
type: 'reference',
title: 'Lang',
to: {
type: 'settingLanguages'
}
}],
},
Dropdown example (Add field to schema):
{
title: 'Genre',
name: 'genre',
type: 'string',
options: {
list: [
{ title: 'Sci-Fi', value: 'sci-fi' },
{ title: 'Western', value: 'western' },
],
},
},
This is currently not possible out of the box with the default array component, but you should be able to create an input like this by building a custom input for it with the behaviour you want.
More on how to build custom inputs: https://www.sanity.io/docs/extending/custom-input-widgets
Related
Consider there is documents like this in DB:
{
name: 'my list',
items: [
{ type: 'book', id: 5364 },
{ type: 'car', id: 354 },
{ type: 'laptop', id: 228 }
]
}
I need to grab data of each item from its own collection, based on type value.
I searched about it but couldn't figure out the correct approach.
Expected output:
{
name: 'my list',
items: [
{ type: 'book', id: 5364, data: [{...}] },
{ type: 'car', id: 354, data: [{...}] },
{ type: 'laptop', id: 228, data: [{...}] }
]
}
Mongoose schema of first collection (above):
{
name: String,
items: {
type: Array,
default: []
}
}
And other collections that must be looked up has corresponding _id field.
There are a few different ways to do this. To be most similar to what you have currently, you just need to make one small change. type is a keyword in Mongoose, so if you want to have a field in your schema which is actually called "type", you need to use the word twice. Once for the Mongoose keyword and again to define your schema.
{
name: String,
items: [{
type: { type: String},
id: Number,
data: []
}]
}
If the data field is coming from another collection, you could use a reference and then call populate() on your find method.
// ItemSchema
{
name: String,
items: [{
type: { type: String },
id: Number,
data: [{
type: Schema.Types.ObjectId,
ref: 'OtherSchemaName'
}]
}]
}
// Find Method with populate
const myList = await ItemSchema.find({type: "book"}).populate('data')
// Result
{
name: 'my list',
items: [
{ type: 'book', id: 5364, data: [{...}] },
]
}
I added two classes by table_class_list, but every time I create a table I have to open the advanced settings, choose the class, and save. Without that it doesn't use any class and is unformatted.
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'table',
toolbar: 'table',
table_class_list: [
{ title: 'None', value: '' },
{ title: 'No Borders', value: 'table_no_borders' },
{ title: 'Red borders', value: 'table_red_borders' },
{ title: 'Blue borders', value: 'table_blue_borders' },
{ title: 'Green borders', value: 'table_green_borders' }
]
});
I want the first class to always be selected by default, without me having to open the settings and hit save.
I have a form with two chained comboboxes. The first chained combobox dictates the values that appear in the second. I have forceSelection:true on the second combobox so that when a user changes the first combo, the second will be set blank because it no longer will be a valid option. The chained combos function as expected but when I load a record into this form using getForm().loadRecord(record) the value for the first combo is set properly but the second is not unless I set forceSelection:false.
The following fiddle should make things pretty clear: sencha fiddle
Clicking "Load Record" should load in Fruits/Apple, but only Fruits is shown. Clicking "Load Record" a second time achieves the desired result. If you comment out forceSelection: true it works as expected but then the chained combos don't function as desired. Is there anything I'm doing wrong here?
It is not so easy. What is happening when you are running form.loadRecord(rec).
you set the FoodGroup combobox
you set the FoodName combobox. BUT the value is not there, because your filter did not switch to appropriate food groups. That is why commenting force selection helps. (That is why commenting filter also help).
turned on the filter of food names. Store now have new values.
You are clicking the button second time. The first combobox value is the same, filters are not trigged (triggered?), you already have appropriate values in the second store and the value is selected.
How to fix:
The fix is ugly. You can listen on store 'refresh' (it means the filters are triggered) and then set the second value (or set the values again).
Ext.define('Fiddle.view.FormModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.fiddle-form-model',
stores: {
foodgroups: {
fields: ['name'],
data: [{
foodgroupname: 'Fruits'
}, {
foodgroupname: 'Vegetables'
}]
},
foods: {
fields: ['foodgroupname', 'foodname'],
filters: {
property: 'foodgroupname',
value: '{selectedFoodgroup.foodgroupname}'
},
data: [{
foodname: 'Apple',
foodgroupname: 'Fruits'
}, {
foodname: 'Banana',
foodgroupname: 'Fruits'
}, {
foodname: 'Lettuce',
foodgroupname: 'Vegetables'
}, {
foodname: 'Carrot',
foodgroupname: 'Vegetables'
}]
}
}
});
Ext.define('Fiddle.view.Form', {
extend: 'Ext.form.Panel',
xtype: 'fiddle-form',
viewModel: {
type: 'fiddle-form-model'
},
title: 'Combos',
items: [{
xtype: 'combo',
itemId: 'FoodGroup', // To access FoodGroup
displayField: 'foodgroupname',
bind: {
store: '{foodgroups}',
selection: '{selectedFoodgroup}'
},
valueField: 'foodgroupname',
forceSelection: true,
name: 'foodgroup',
fieldLabel: 'Food Group',
value: 'Vegetables'
}, {
xtype: 'combo',
itemId: 'FoodName', // To access FoodName
bind: {
store: '{foods}'
},
queryMode: 'local',
forceSelection: true, //COMMENTING THIS OUT ACHIEVES DESIRED LOAD RECORD BEHAVIOR
displayField: 'foodname',
valueField: 'foodname',
name: 'food',
fieldLabel: 'Food',
value: 'Carrot'
}],
buttons: [{
text: 'Load Record',
handler: function (btn) {
// OUR UGLY FIX
var form = btn.up('form'),
foodGroupComboBox = form.down('combobox#FoodGroup'),
foodNameComboBox = form.down('combobox#FoodName'),
record = Ext.create('Ext.data.Model', {
foodgroup: 'Fruits',
food: 'Apple'
});
foodNameComboBox.getStore().on('refresh', function (store) {
form.loadRecord(record);
}, this, {
single: true
})
form.loadRecord(record);
}
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
var form = new Fiddle.view.Form({
renderTo: document.body,
width: 600,
height: 400
});
}
});
I've got a collection that I'd like users to be able to search through and display the results accordingly. A while ago I was achieving this with the easy-search package, which uses blaze.
What are the most common approaches to this kind of problem with React? How do people search through their collections and display data accordingly?
I have a component for a book, which has images, author, title, etc. Each entry in the Books collection can be represented with this Book component, so what I'd like to do with this search is allow users to type in a title, or author name, or ISBN, etc, and display the matched results as one of these Book components.
Here's the collection:
Books = new Mongo.Collection('books');
BooksSchema = new SimpleSchema({
isbn: {
type: String,
label: 'ISBN'
},
title: {
type: String,
label: 'Title'
},
author: {
type: String,
label: 'Author'
},
condition: {
type: Number,
label: 'Condition'
},
conditionNotes: {
type: String,
label: 'Condition notes'
},
price: {
type: Number,
label: 'Price'
},
images: {
type: String,
label: 'Images',
autoform: {
afFieldInput: {
type: 'cloudinary'
}
}
},
postedOn: {
type: Date,
label: 'Posted on',
autoValue: function() {
return new Date();
},
autoform: {
type: 'hidden'
}
}
});
The Book component just renders the title, isbn, author, price etc in a presentable way. What I'm looking to do, again, is have a component that contains a search bar that can connect to this Mongo collection and query it, presenting results that match whatever the user typed in.
I'm new to Sencha, trying to implement a Sencha formpanel with a field to pick from a list of objects in a store. This seems like a sufficiently basic pattern that there must be a simple solution. I have a model which defines an ajax endpoint returning a json array (places) of name/id pairs:
Ext.define('MyApp.model.Place', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'},
{name: 'id', type: 'int'},
],
proxy: {
type: 'ajax',
url: '/m/places/',
reader: {
type: 'json',
rootProperty: 'places',
},
},
},
});
And a store:
Ext.define('MyApp.store.Place', {
extend: 'Ext.data.Store',
requires: ['MyApp.model.Place'],
config: {
model: 'MyApp.model.Place',
autoLoad: true,
sorters: [
{
property : 'name',
direction: 'ASC',
},
],
},
});
I want a read-only text field for the place name and a hidden field to submit the place id:
{
xtype: 'textfield',
name: 'place_name',
label: 'Place',
readOnly: true,
listeners: {
focus: function () {
var place_picker = Ext.create('Ext.Picker', {
slots: [
{
name: 'place_name',
title: 'Choose a Place',
store: Ext.create('MyApp.store.Place'),
itemTpl: '{name}',
listeners: {
itemtap: function (obj, index, target, record, e, eOpts) {
var form = Ext.getCmp('entityform');
form.setValues({
place_name: record.get('name'),
place_id: record.get('id'),
});
// how to dismiss the picker?
obj.parent.hide();
},
},
},
]
});
Ext.Viewport.add(place_picker);
place_picker.show();
},
},
},
{
xtype: 'hiddenfield',
name: 'place_id',
},
At this point, tapping the field causes the picker to slide up from the bottom and display the loading animation, but it is not being populated with the list of place names, although I can see that the ajax request has been made and that it has returned the expected json document.
I'll stop here and ask if I'm on the right track or is there some better approach out there?
Why isn't the picker being populated with the results of the ajax request? Is my use of itemTpl incorrect?
Am I setting the form fields in a sencha-appropriate way?
How should I dismiss the picker on itemtap? I somehow doubt that my use of hide() is the proper way.
Picker slots has an data config which is an array of objects. It should have a specific format with text and value.
slots :[
data : [{
text : someValue,
value : someValue1,}] ]
You need to add objects which has the fields text and value to slots.