I have problem with aligning of elements
I have sap.m.Table and inside of table I have sap.m.InputListItem
var tbl= new sap.m.Table({
width: "100%",
headerToolbar: new sap.m.Toolbar({
content: [
new sap.ui.core.Icon({
src : "nav-back",
press: this.onNavBack.bind(this)
})
, new sap.m.Title({
text: this.roleDetail
})]
}),
columns: [new sap.m.Column({
header: new sap.m.Text({
text: " Menu"
})
}),
new sap.m.Column({
header: new sap.m.Text({
text: " App"
})
})
],
items: [
fieldOfColumnItems
]
});
in the cycle I fill this variable fieldOfColumnItems
fieldOfColumnItems.push(new sap.m.ColumnListItem({
cells: [menu[i], menuItems[i]]
}))
How can I make those dropdowns to be on the right side? I want it to look nice.
Any ideas?
use sap.m.FlexBox:
...
var oTable = new sap.m.Table({
columns: [
new sap.m.Column({
header: new sap.m.Text({
text: "Menu"
})
}),
new sap.m.Column({
header: new sap.m.Text({
text: "App"
})
})
],
items: [
new sap.m.ColumnListItem({
cells: [
new sap.m.FlexBox({
justifyContent: "SpaceBetween",
alignItems: "Center",
items: [
new sap.m.Label({
text: "foo"
}),
new sap.m.Select({
items: [
new sap.ui.core.Item({
text: "bar"
})
]
}),
]
})
]
}),
new sap.m.ColumnListItem({
cells: [
new sap.m.FlexBox({
justifyContent: "SpaceBetween",
alignItems: "Center",
items: [
new sap.m.Label({
text: "longerfoo"
}),
new sap.m.Select({
items: [
new sap.ui.core.Item({
text: "barfits"
})
]
}),
]
})
]
})
]
});
...
executable example
add on:
due to your comment:
fieldOfColumnItems.push(
new sap.m.ColumnListItem({
cells: [
new.sap.m.FlexBox({
justifyContent: "SpaceBetween",
alignItems: "Center",
items: [
menu[i],
menuItems[i]
]
})
]
})
)
Related
Having difficulty figuring how to render groups as their example (https://github.com/joanpablo/reactive_forms#groups-of-groups-grin):
final form = FormGroup({
'personal': FormGroup({
'name': FormControl<String>(validators: [Validators.required]),
'email': FormControl<String>(validators: [Validators.required]),
}),
'phone': FormGroup({
'phoneNumber': FormControl<String>(validators: [Validators.required]),
'countryIso': FormControl<String>(validators: [Validators.required]),
}),
'address': FormGroup({
'street': FormControl<String>(validators: [Validators.required]),
'city': FormControl<String>(validators: [Validators.required]),
'zip': FormControl<String>(validators: [Validators.required]),
}),
});
Im using
ReactiveTextField(formControlName: 'personal', ),
but throws error:
Expected a value of type 'FormControl<dynamic>', but got one of type 'FormGroup'
My aim is to get output like below:
{
"personal": {
"name": "...",
"email": "..."
},
"phone": {
"phoneNumber": "...",
"countryIso": "..."
},
"address": {
"street": "...",
"city": "...",
"zip": "..."
}
}
Any guidance and advice is much appreciated!
Got advice from joanpablo (https://github.com/joanpablo)
Below syntax can be used:
ReactiveTextField(formControlName: 'personal.name', ),
The above code is in case you have for example a ReactiveForm (or a ReactiveFormBuilder) and as a child you have this ReactiveTextField:
ReactiveForm(
formGroup: form,
child: Column(children: [
ReactiveTextField(
formControlName: 'personal.name',
),
]),
),
But you can also have nested ReactiveForm widgets:
ReactiveForm(
formGroup: form,
child: Column(children: [
ReactiveForm(
formGroup: form.control('personal') as FormGroup,
child: Column(children: [
ReactiveTextField(
formControlName: 'name',
),
]),
),
]),
),
Good Morning!
I an start working with SAPUI5
How can I set a Search field(sap.m.SearchField) on a Dialog?
Thank You
I suggest:
new Dialog({
title: 'Available Products',
content: new List({
items: {
path: '/ProductCollection',
template: new StandardListItem({
title: "{Name}",
counter: "{Quantity}"
})
}
}),
beginButton: new Button({
text: 'Close',
press: function() {
that.pressDialog.close();
}
}),
subHeader: [
new sap.m.Bar({
contentMiddle: [
new sap.m.SearchField({
width: "100%",
value: "Search Term"
})
]
})
]
});
I am trying to lead data from my controller. The queries work right but i cant seem to load the data in the view. If anyone can see my mistake, i will appreciate it.
controller
public ActionResult GetItemList(int RRGroupID)
{
var item = ReportEngineHelper.GetReportingEngine(Session).Generate<ItemListQuery>(new Filter()
{
Item=new Item()
{
RRGroupID = RRGroupID,
}
}).ToQueryModel<ItemName>();
var listItemName = new List<ItemName>();
return Json(item, JsonRequestBehavior.AllowGet);
}
view
var detailsSource =
{
url: $.ajax({url: url,
type: "json",
data: {RRGroupID:RRGroupID},
}),
datatype: "json",
datafields: [{ name: "ItemID", type: "int" }, { name: "FullItemName" }],
};
var detailsAdapter = new $.jqx.dataAdapter(detailsSource);
$("#jqxgrid").jqxGrid({
source: detailsAdapter,
autoheight:true,
autowidth: true,
columns: [
{ text: 'Item Name', datafield: 'FullItemName', width: 200, editable: false },
{ text: 'Unit', width: 100, editable: true },
{ text: 'Beginning Balance', width: 180, editable: true },
{ text: 'Loss', width: 80, editable: true, cellsalign: 'right' },
{ text: 'Quantity Recieved', width: 90, editable: true, cellsalign: 'right'},
{ text: 'DOS', width: 100, editable: true, cellsalign: 'right' },
{ text: 'Requested Quantity', width: 100, editable: true, cellsalign: 'right'}
],
});
//this is your function build grid
function buildDetail(data){
var detailsSource:{
localdata:data,
datafields: [{ name: "ItemID", type: "int" }, { name: "FullItemName" }],
type:'json',
};
var detailsAdapter = new $.jqx.dataAdapter(detailsSource);
$("#jqxgrid").jqxGrid({
source: detailsAdapter,
autoheight:true,
autowidth: true,
columns: [
{ text: 'Item Name', datafield: 'FullItemName', width: 200, editable: false },
{ text: 'Unit', width: 100, editable: true },
{ text: 'Beginning Balance', width: 180, editable: true },
{ text: 'Loss', width: 80, editable: true, cellsalign: 'right' },
{ text: 'Quantity Recieved', width: 90, editable: true, cellsalign: 'right'},
{ text: 'DOS', width: 100, editable: true, cellsalign: 'right' },
{ text: 'Requested Quantity', width: 100, editable: true, cellsalign: 'right'}
],
});
}
// now get your data with ajax then build grid.
$(document).ready(function(){
$.ajax({url: url,
type: "json",
data: {RRGroupID:RRGroupID},
success:function(data){
//now call your build function
buildDetail(data);
}
});
})
By this way, you load your data without using jqx.ajax
I've got problem with reopen form in window
In tool bar I've got button after click window with form show ups everything is ok
but when i click cancle and try to reopen then only window shows without form
Form
addProductForm = new Ext.FormPanel({
id: 'addFormID',
width: 400,
autoDestroy: false,
autoHeight: true,
frame: true,
layout: 'form',
monitorValid: true,
items: [{..}]
buttons: [
{
text: 'Cancle',
handler: function () {
addProductForm.getForm().reset();
addFormWindow.hide();
}
}]
});
toolbar with window
tbar: new Ext.Toolbar({
height: 30,
width: 100,
items: [{
xtype: 'button',
text: 'Add Product',
handler: function () {
addFormWindow = new Ext.Window({
id: 'addProductWindow',
title: 'Add Product',
closeAction: 'hide',
closable: true,
autoDestroy: false,
width: 400,
plain: true,
autoHeight: true,
modal: true,
resizable: true,
layout: 'fit',
items: [addProductForm]
});
addFormWindow.show();
}
}]
}),
Try removing ids from the components.
Good Morning,
I have some problem when I attempted to fill my Grid panel from my web service, the result was an empty grid, thank you for advance.
// Create store
var myStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: 'Service.asmx/GetPeople',
headers: {
'Content-type': 'application/json'
}
}),
root: 'd',
id: 'Id',
fields: ['Id', 'FistName', 'LastName', 'BirthDate'],
autoLoad: true
});
//Create grid to display data from store
var gridTest = new Ext.grid.Panel({
store: myStore, // Our store
renderTo: Ext.getBody(),
forceFit: true,
columns: [ // Grid columns
{ xtype: 'gridcolumn', width: 100, text: 'Id', dataIndex: 'Id', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Nom', dataIndex: 'FirstName', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Mail', dataIndex: 'LastName', flex: 1 },
{ xtype: 'gridcolumn', width: 100, text: 'Phone', dataIndex: 'BirthDate', flex: 1 }
]
});
and this is my viewport:
Ext.create('Ext.container.Viewport', {
layout: "border",
items: [{
region: "north",
height: 50,
title: "Nord"
}, {
region: "south",
height: 200,
title: "sud",
bodyStyle: 'background: #fffff;',
border: false
}, {
region: "center",
title: "centre",
bodyStyle: 'background: #00000;',
border: false,
items: gridTest
}, {
region: "west",
width: 100,
title: "ouest"
}, {
region: "east",
width: 100,
title: "est"
}]
});
and this is RESPONSE FROM FIREBUG MOZILLA FIREFOX:
{"d": [{
"__type":"WebService4ExtJS.Model.Person",
"Id":0,
"FirstName":"sami",
"LastName":"samibizani#gmail.com",
"BirthDate":"23188219"
}, {
"__type":"WebService4ExtJS.Model.Person",
"Id":1,"FirstName":"admin",
"LastName":"admin#gmail.com",
"BirthDate":"1111111"
}, {
"__type":"WebService4ExtJS.Model.Person",
"Id":2,
"FirstName":"user",
"LastName":"user#gmail.com",
"BirthDate":"2222222"
}]
}
Your Store reader is not defined:
reader: {
type: 'json',
root: 'd',
idProperty: 'Id'
}
You can find the working code here.
And one little mistake: in the fields array, you wrote FistName instead of FirstName.