I've been unable to add an itemclick listener to what I thought was a very simple example. The view is shown correctly with the repeated HTML. Can anyone help with where I've gone wrong?
Ext.define('App.view.Stuff', {
extend: 'Ext.DataView',
alias: 'view.stuff',
store: [{
"title": "Dataset 1",
"desc": "Lorem ipsum dolor sit amet."
}, {
"title": "Dataset 2",
"desc": "Lorem ipsum dolor sit amet."
}],
listeners: {
itemclick: function () {
console.log('itemclick');
},
},
itemTpl:
'<div><strong>{title}</strong></div>' +
'<div>{desc}</div>'
});
Since v6.5.0 the event is called childsingletap.
childsingletap ( this, location, eOpts )
Fires when a child is single tapped.
Available since: 6.5.0
Parameters
this : Ext.dataview.DataView
This dataview.
location : Ext.dataview.Location
The location for the event.
eOpts : Object
The options object passed to Ext.util.Observable.addListener.
Here's the working code:
Ext.define('App.view.Stuff', {
extend: 'Ext.DataView',
alias: 'view.stuff',
store: [{
"title": "Dataset 1",
"desc": "Lorem ipsum dolor sit amet."
}, {
"title": "Dataset 2",
"desc": "Lorem ipsum dolor sit amet."
}],
listeners: {
childsingletap: function () {
console.log('childsingletap');
},
},
itemTpl:
'<div><strong>{title}</strong></div>' +
'<div>{desc}</div>'
});
Related
I'm trying to build dynamic forms using rjsf and having some issues with the validator.
The error message is applicable to any validation type attempt i.e. if a field is required or minLenght check.
If I disable noHtml5Validate={false} then I get a pop up telling me to populate required field. My goal is to display all errors and highlight relevant inputs in red.
This corresponds to this line in the code:
var property = instancePath.replace(/\//g, ".");
My schema is:
const testSchema = {
"type": "object",
"required": [
"account",
],
"properties": {
"reference": {
"type": "string",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
"nullable": true,
},
"account": {
"type": "integer",
"format": "int64",
"pattern":"^(0|[1-9][0-9]*)$",
}
},
"additionalProperties": false
};
import Form from "#rjsf/bootstrap-4";
import validator from "#rjsf/validator-ajv8";
return <>
{ schema && <Form
schema={testSchema}
uiSchema={uiSchema}
validator={validator}
onSubmit={onSubmit}
noHtml5Validate={true}
formData={formData}
onChange={(e)=> onChangeHandler(e.formData)}
/>}</>;
What is more confusing is that when I set up a new test app using npx create app and use the same settings it works just fine so I'm really unsure to resolve this issue. I've already spent 3 days searching for a solution
I'm starting on Angular and Typescript and I'm currently stumbling on a problem, so I'm looking for some guidance. Indeed, I would like to create something like this:
Structure Mockup
But I'm getting the follow error in my IDE saying:
Property 'files' does not exist on type 'string | { id: string; name: string; img: string; videos: number[]; files: number[]; }'
However, my console.log are well displaying so I don’t understand
Here is a summary of my code:
public meal = [
{
id : "0",
title:"Ingredients",
ingredients: [
{id:"0", name:"Lorem ipsum", img:"assets/loremipsum.png", videos:["0"], files:["0","1"]},
{id:"1", name:"Lorem ipsum", img:"assets/loremipsum.png", videos:["1"], files:["0"]},
{id:"2", name:"Lorem ipsum", img:"assets/loremipsum.png", videos:["0", "2"], files:["1"]},
{id:"3", name:"Lorem ipsum", img:"assets/loremipsum.png", videos:["1", "2"], files:["0"]}
],
videos:[
{id:"0", url:"loremipsum"},
{id:"1", url:"loremipsum"},
{id:"2", url:"loremipsum"}
],
files:[
{id:"0", title:"Lorem ipsum", link:"assets/loremipsum.pdf"},
{id:"1", title:"Lorem ipsum", link:"assets/loremipsum.pdf"}
],
questions:[
{id:"0", question:"Lorem ipsum ?", answer:"Lorem ipsum dolor sit amet, consectetur adipiscing elit"},
{id:"1", question:"Lorem ipsum ?", answer:"Lorem ipsum dolor sit amet, consectetur adipiscing elit"},
{id:"2", question:"Lorem ipsum ?", answer:"Lorem ipsum dolor sit amet, consectetur adipiscing elit"}
]
},
{
id : "1",
title:"Restaurants",
ingredients:[],
videos:[
{id:"0", url:"loremipsum"}
],
files:[
{id:"0", title:"Lorem ipsum", link:"assets/loremipsum.pdf"},
{id:"1", title:"Lorem ipsum", link:"assets/loremipsum.pdf"}
],
questions:[
{id:"0", question:"Lorem ipsum ?", answer:"Lorem ipsum dolor sit amet, consectetur adipiscing elit"},
{id:"1", question:"Lorem ipsum ?", answer:"Lorem ipsum dolor sit amet, consectetur adipiscing elit"}
]
},
{
id : "2",
title:"Equipment",
ingredients:[],
videos:[],
files:[
{id:"0", title:"Lorem ipsum", link:"assets/loremipsum.pdf"},
{id:"1", title:"Lorem ipsum", link:"assets/loremipsum.pdf"}
],
questions:[
{id:"0", question:"Lorem ipsum ?", answer:"Lorem ipsum dolor sit amet, consectetur adipiscing elit"},
{id:"1", question:"Lorem ipsum ?", answer:"Lorem ipsum dolor sit amet, consectetur adipiscing elit"}
]
}
]
ngOnInit(): void {
this.getRouteParams();
}
getRouteParams() {
this.routeSub = this.activatedRoute.queryParams.subscribe(params => {
if(params['id']){
this.mealId = params['id'];
}
else{
this.mealId = "0";
}
this.IngredientFiles();
});
this.routeSubFragment = this.activatedRoute.fragment.subscribe(fragments => {
if(fragments){
this.ingredientId = fragments;
}
else{
this.ingredientId = "0";
}
this.IngredientFiles();
});
}
IngredientFiles() {
let filesDisplayed = [];
if(this.meal[this.mealId].ingredients.length > 0){
for(let mealFile of this.meal[this.mealId].files){
console.log("mealFile: "+mealFile.id) // WORKS
if(this.meal[this.mealId].ingredients[this.ingredientId].files.length > 0){
for(let ingredientFile of this.meal[this.mealId].ingredients[this.ingredientId].files){
if (ingredientFile == mealFile.id){
console.log("ingredientFile: "+ingredientFile) // WORKS
filesDisplayed.push(ingredientFile)
}
}
}
}
}
}
Thank you in advance for helping
The line "Property 'files' does not exist on type 'string | { id: string; name: string; img: string; videos: number[]; files: number[]; }'" means that TypeScript is trying to guess the typing of meal based on its value. The error comes from it not guessing quite right. And console.log shows a value, because the value is actually there.
Not declaring type for complex structures like this is generally a bad idea (think about yourself a few weeks for now, trying to recall "what is supposed to go into a meal?"). You can use sth like
type Ingredient = {
id: string;
name: string;
img: string;
videos: string[];
files: string;
}
type Video = // definition here
// the rest of the definition
type Meal = {
id: string;
name: string;
ingredients: Ingredient[];
videos: Video[];
files: FileEntry[]; // `File` is reserved
questions: Question[];
}
//...
meal: Meal[] = { // actual value here
I have query about Angular 1x. I want to filter the below records if anything matches with title and content only. I tried giving ng-model to my input and applied the same like ng-repeat= t in t.items | filter:keyword but it is filtering the data with link and all other columns as well.
var myApp = angular.module('myApp',[]);
myApp.controller('SearchController', ['$scope', function($scope) {
$scope.results = [
{ title : "Cars", link: "http://tutorialedge.net", content: "lorem ipsum doler fox pixel"},
{ title : "Boats", link: "http://tutorialedge.net", content: "lorem ipsum doler cat pixel"},
{ title : "Vans", link: "http://tutorialedge.net", content: "lorem ipsum doler pig pixel"},
{ title : "Limos", link: "http://tutorialedge.net", content: "lorem ipsum doler pixel"}
];
}]);
Is it possible to filter data from 2 just columns?
Edit
I have a <input type="search" /> and I want to filter data as soon as user starts typing but it should search the keywords in just two columns.
Have a look at https://docs.angularjs.org/api/ng/filter/filter it explains everything pretty good. For your question you can do it like:
Component's controller:
$scope.results = [
{ title : "Cars", link: "http://tutorialedge.net", content: "lorem ipsum doler fox pixel"},
{ title : "Boats", link: "http://tutorialedge.net", content: "lorem ipsum doler cat pixel"},
{ title : "Vans", link: "http://tutorialedge.net", content: "lorem ipsum doler pig pixel"},
{ title : "Limos", link: "http://tutorialedge.net", content: "lorem ipsum doler pixel"}
];
$scope.mySubstringExpression = "Vans";
$scope.myFancyFilter = function(element) {
return element.title.indexOf(mySubstringExpression) > -1 || element.contant.indexOf(mySubstringExpression) > -1;
};
Then in component's template:
<div ng-repeat="item in results | filter:myFancyFilter">
Another approach:
$scope.filterResult = []
$scope.filterParams = {
title = "all",
content = "all"
}
$scope.filter = function (){
if($scope.filterParams.title == "all" && $scope.filterParams.content == "all") {
$scope.filterResult = $scope.results
} else {
$scope.filterResult = $scope.results.filter(x =>
x.title == $scope.filterParams.title &&
x.content == $scope.filterParams.content)
}
}
Then you just have to use the ng-repeat over $scope.filterResult
<div ng-repeat="item in filterResult">
and you just have to use ng-model with $scope.filterParams, and every time you change the filter just call $scope.filter() and the $scope.filterResult will be updated.
you can achieve this by using this approach
ng-repeat=" t in t.items | filter: {'title': 'Cars'}: true"
I got a $stateProvider in my app with which i'm requiring a controller like below,
$stateProvider
.state('randomState', {
url: "/randomState",
templateUrl: "template.html",
controller: require('randomData')
});
the template.html is very simple that it has the below markup,
<simple-table data="tableData.data"></simple-table>
All i do in the controller is using the $http service, i hit an end point which provides me a JSON object and once the data is received, in the success callback i attach the $scope as $scope.tableData = data, but in the page i could see the <tr>'s getting populated but not the cells <td>, could not see any errors in the console, also when i log $scope.tableData i could see the proper object getting binded, any idea on why it is not binding the data's inside cell element.
I even tried encapsulating the $http service inside $timeout, but no luck. JSON response would look something like below,
{
"data": {
"columns": [
{"header": "Column header"},
{"header": "Column header"}
],
"data": [
[
"Row Header <br>(optional)",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"$7.50B",
"427,576,608",
"$7.50B"
],[
"Row Header",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"45.06",
"+24.54%",
"45.06"
]
]
}
}
I am working with the new Alloy Framework on Appcelerators Titanium and I am totaly lost with its backbone handeling.
Anyway, my Problem is that I got a deep multi level json object which looks something like this:
[{
title: "Bla",
id: 0,
content: "lorem ipsum dolor sit amet..",
articles: [
{
title: "bla2",
content: "bla bla bla",
nr: "article 1"
},
{
title: "bla3",
content: "bla baasdadla bla",
nr: "article 2"
}
]
},
{
title: "Bla 2",
id: 1,
content: "lorem ipsum dolor sit amet..",
articles: [
{
title: "bla3",
content: "bla bla bla",
nr: "article 10"
},
{
title: "bla4",
content: "bla baasdadla bla",
nr: "article 11"
}
]
}];
And I successfully implemented it so that I got a nice TableView with the titles of the first level, but now I need access to the 2nd level, and this is where I fail at.
I got everything in a single Collection
var myCollection = Alloy.createCollection('bla');
myCollection.add(MyBigBigBigJson); // see above
myCollection.fetch();
my View.xml:
<Alloy>
<Collection src="bla">
<TableView dataCollection="bla">
<TableViewRow>
<Label text="{title}" />
</TableViewRow>
</TableView>
</Alloy>
Now, how do I get access to, lets say the content of the 2nd level?
I tried it with:
myCollection.at(0) // first object in my collection ( where title = "Bla" )
myCollection.at(0).articles[0].content // gives me an error and my app crashes...
myCollection.at(0).articles // undefined
Well, I have no idea how I get to the articles and then to the content or title.
Anyone can help me? I hope I've made everything clear.
Thanks!
You need to use model.get:
myCollection.at(0).get("articles")[0].content
Another approach that you can take is to use toJSON() on your model to get to the properties.
myCollection.at(0).toJSON().content
at(0) specifies the index of the model and you're using to JSON() to just send back the attributes. Then you can just specify the property from there.