I am extracting data from the server and from that data I need to create the number of tabs and populate the data in the form of each tab.
For e.g.:
If my data has two fields named 'x' and 'y' then I need to create two tabs (where the form panel, meaning the fields inside the tab, are same) and then I need to populate these fields with the appropriate data.
Populating the data is fine but I need to know how to add tabs dynamically according to the JSON object I get. The name of the tab I'll be getting from the JSON object.
EDIT:
The JSON looks like this:
{
..
events : {
'X JOINED' : {
..
}
'Y JOINED' : {
..
}
}
}
Now I need two tabs named 'X JOINED' and 'Y JOINED' with the '..' giving the data to populate inside the tabs.
If you have a tabpanel you can use the method add to add a new tab.
To know the names of your object, just use the js keys method on your object obtained from JSON.
It will look something like that :
for(var prop in myObject)
myTabPanel.add(Ext.define("tab", {title: prop}));
do you have an sample of your JSON object?
Related
function updateFirebase(){
const fb=firebase.database().ref()
//get field values
author = document.getElementById('uname').value
user_email = document.getElementById('umail').value
data = {author, user_email}
//update database
fb.child('Article/').update(data);
}
</script>
I have problem with my code. I want to update the data inside a table named "Article". Article has generated items with a unique key/id and each key has its own content. Lets say I want to be able to edit the "author" or change the "title", the problem is they each have a randomly generated key/id that I cant access. for example that "-LS39kReBHrKGqNj7h_". I can only save the data inside the "Article" tree but I cant change the "author" or the "title". How do i get a workaround this so I can change those properties?
Here is how my firebase looks like
It depends whether you have the record reference on the frontend before update or not (whether you have fetched it before you are trying to update it).
But generally, you have two options
You can store the key reference as an "id" field on the object.
To achieve that, you need two step process when creating the record at the first place
// Creates a new record in DB and returns it to you. Now you can get the "key"
const newRecord = firebase.database().ref('TABLE_NAME_REF').push();
newRecord.set({
id: newRecord.key
...
});
This is great if you fetch the list of records on the frontend and then you want to update one of them. Then you can just build the ref path like this
fb.child('Article/' + record.id ).update(data); // where record is the prefetched thing
You need to find the element based on its fields first. And once you have it, you can update it right away.
To achieve this, you can simply do something like:
firebase.database()
.ref('TABLE_NAME_REF') // let's say 'Article'
.orderByChild('RECORD_KEY') // Let's say 'author'
.equalTo('KEY_VALUE') // let's say 'zoranm'
.limitToFirst(1)
.once("value")
.then(res => {
// You need to loop, it always returns an array
res.forEach(record => {
console.log(record.key); // Here you get access to the "key"
fb.child('Article/' + record.key ).update(data); // This is your code pasted here
})
})
I have an object structure with 3 objects. location > lochierarchy > customtable.
On the original source xml -erdata, I get only details for location object. I have derived the information for lochierarchy and the customtable.
If I have at least one column value for lochierarchy and customtable, I am able to use the following code and fill up the derived values.
xml
<LOCATIONS>
<location>1000</location>
<siteid>xyg</siteid>
<LOCHIERARCHY>
<SYSTEMID>abdc</SYSTEMID>
<PARENT></PARENT>
<CUSTOMTABLE>
<DEPT>MECHANICAL</DEPT>
<OWNER></OWNER>
</CUSTOMTABLE>
</LOCHIERARCHY>
List locHierarchyList =irData.getChildrenData("LOCHIERARCHY");
int locHrSize=locHierarchyList.size();
for (int i=0;i<locHrSize;i++)
{
irData.setAsCurrent(locHierarchyList,i);
irData.setCurrentData("PARENT","xyyyyg");
List customTablerList =irData.getChildrenData("CUSTOMTABLE");
int custSize=customTablerList .size();
for (int i=0;i<custSize;i++)
{
//set values
}
But I am getting the source xml with only the location data below and I'm trying to build the children data. I am missing something here.
Incoming XML
<LOCATIONS>
<location>1000</location>
<siteid>xyg</siteid>
</LOCATIONS>
My Code
irData.createChildrenData("LOCHIERARCHY");
irData.setAsCurrent();
irData.setCurrentData("SYSTEMID", SYSTEM);
irData.setCurrentData("PARENT", parentLoc);
irData.createChildrenData("CUSTOMTABLE");
irData.setAsCurrent();
but this is not working. Can anyone help me out?
got it, just had to use another method of createChildrenData.
irData.createChildrenData("LOCHIERARCHY",true);
This one did the trick. It creates the child set and make it as current.
I am using Laravel 5.1 and I am using Illuminate\Http\Request instance for accessing sent file requests, but I can't seem to find the correct way to access the media element. I can access all other values in the object.
Here is the JSON data format I am using:
{"_method":"PUT",
"topic":"1 test",
"description":"1 test",
"media_description":"1 test",
"old_parts":
{"part-1":
{"sub_header":"test 2",
"text_field":"test 2 ",
"article_id":"18",
"media":{}},
"part-2":
{"sub_header":"test 3 ",
"text_field":"test 3",
"article_id":"18",
"media":{}}
},
"published":"1",
"media":{}
}
I access media in controller using two foreach loops, one loop is for database collection and other is for form content. I can use following method for accessing media elements.
if ($file = $request->file('media-' . $running_number)) {...}
But it decreases readability by huge amount as I should name the fields f.e. as media-1, media-2, ... and not access them using foreach loop like I do with everything else.
So is there a way to access file with foreach loop variable?
f.e. something like this
foreach($input['old_parts'] as $old_part) {
if ($old_part->hasFile('media')) { ... }
}
If I use the lines I typed the function returns a FatalThrowableError : Call to a member function hasFile() on array.
Or should I just use something like
$request->file('old_parts[part-'.$x.'][media]');
To access the file input and use custom variable to count the index? The problem is just that I can't figure out how to go inside multiple levels in JSON using file, as either old_parts['..']['..'] and old_parts['part-1']->media don't seem to return anything (return null).
I'm trying to populate a table with the output of several API sources having extracted several identical variables from each source. So far I have most of the pieces I need worked out, such as how to retrieve the data, create the table and import the data in order to create the table using an existing framework. What I don't have is a means of formatting the API data to meet the framework's requirement such as..
Required format:
[
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
{id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
]
Create a table from the formatted data...
<div id="example-table"></div>
$("#example-table").tablear({
columns:[
{title:"Name", field:"name"},
{title:"Age", field:"age"},
{title:"Gender", field:"gender"},
{title:"Height", field:"height"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob"},
{title:"Cheese Preference", field:"cheese"},
],
});
Whenever you get json as response you need to parse the json and then play with that.
Example:
if(response)
{
var myObj = parse.JSON(response) // this will give you the javascript
//object
}
There is also another option of using jquery datatable using server side processing. This automatically creates a table for you.
Jquery Datatable
I would like to create a Form in ExtJS 5.0 completely based on a Store. Every store item represents a "line in the form". A "line" consists three or more form widgets.
Basically this is a search panel, where you define search conditions. Every condition consits of: FieldName selector, an operator selector, and a widget to write/select a condition operand. For example search for people with:
name starting with Joe (FieldName:name, operator:starting with, widget:textfield)
birtday before 1980.01.01. (FieldName:birthday, operator:before, widget:datepicker)
I get the conditions in JSON, and load them in a Store. I would like to dynamically generate the form based on this store, make modifications in the form, and ask the Store for a new JSON with the modifications (new conditions, etc).
I have problems with the first step: simply generate form widgets based on store content.
How can this be done?
I'm going to assume here that the JSON data represents a variety of dynamic data, and you can't simply use a pre-canned control like a grid, or a fixed form.
What you need to do is to make your own container class, which dynamically creates widgets based on the JSON content. You'll have to write this yourself, of course.
One extreme is to make your JSON content in the store be valid arguments to, say, Ext.widget - but that's probably not feasible, or even desirable.
For a more middling position, use the JSON data to determine, based on conditions, what widgets to add.
As a rough outline, you want something like this:
Ext.define('MyFormContainer', {
extend: 'Ext.form.FormPanel',
config: {
// A store or MixedCollection of JSON data objects, keyable by id.
formData: null
},
layout: 'vbox',
initComponent: function() {
this.callParent(arguments);
this.getFormData().each(this.addField, this)
},
addField: function(fieldData) {
var widgetConfig = this.buildWidgetConfig(fieldData);
this.add(widgetConfig);
},
buildWidgetConfig: function(fieldData) {
// The heart of the factory. You need a way to determine what sort of widget to make for
// the field. For the example config, a fieldset with three fields would probably be
// appropriate:
var fieldSet = { xtype: 'fieldset', layout: 'hbox' };
var items = [];
items[0] = { xtype: 'textfield', name: fieldData['FieldName'] };
// this would be a link to a custom widget to handle the operator. Or maybe you could
// just spit out text, if it's not meant to be alterable.
items[1] = { xtype: 'myoperator_' + fieldData['operator'], name: 'operator' };
items[2] = { xtype: fieldData['widget'], name: 'value' }
fieldSet.items = items;
return fieldSet;
}
})
This is a simple and contrived example, but it should (after you fill in the blanks, such as missing requires and the custom operator widgets) render a form based on the JSON data.
(I personally use this approach - with a great deal more sophistication that I can show in a simple example - to generate dynamic forms based on server-supplied form descriptions)