Ext JS 6.0.0 Button margin property not work - extjs

I have a button in a panel, and I need set a margin value, but the component not apply the value of margin, the EXT just ignore the margin property.
The follow code:
Ext.define('CadastroEnsaioWTD.view.typecalculated.TypeCalculatedItem', {
extend: 'Maestro.panel.Panel',
requires: [
'Maestro.form.Button',
'Maestro.form.TextField',
'Maestro.form.ComboBox'
],
alias: 'widget.typecalculateditemview',
layout: {
type: 'hbox',
align: 'middle'
},
width: '100%',
height: '100%',
initComponent: function () {
var me = this;
var config = {
defaults: {
width: 200,
node: me.node,
margin: '5 5 5 5',
labelSeparator: '',
xtype: 'maestro.form.textfield'
},
items: [
{
xtype: 'label',
html: '<b>' + me.alias + '</b>',
width: 100
},
{
width: 300,
xtype: 'maestro.form.combobox',
name: 'ENS_TIPO_DETERMINADO_CARACT'
},
{
xtype: 'maestro.form.combobox',
name: 'ENS_ENR_REFRIGERACAO_WTD'
},
{
name: 'ENS_PERC_CARGA_WTD'
},
{
name: 'ENS_COS_PHI'
},
{
width: 170,
xtype: 'maestro.form.combobox',
name: 'ENS_TIPO_ENR_APL_WTD'
},
{
width: 170,
xtype: 'maestro.form.combobox',
name: 'ENS_TIPO_ENR_CC_WTD'
},
{
name: 'ENS_ENR_TAP_TENSAO_APL'
},
{
name: 'ENS_ENR_TAP_TENSAO_CC'
},
{
name: 'ENS_POT_REF_WTD'
},
{
name: 'ENS_PERC_TENSAO_WTD'
},
{
width: 100,
name: 'ENS_TIPO_DETERMINADO_VAL'
},
{
width: 100,
xtype: 'maestro.form.combobox',
name: 'ENS_TIPO_DETERMINADO_UNID'
},
{
xtype: 'button',
text: '-',
width: 30,
style: 'border-radius: 7px;',
handler: function (btn) {
me.getObjectContextSynchronizer().executeServerRequest('deleteContextNode', [me.node]);
}
}
]
};
Ext.apply(this, config);
this.callParent();
}
});
And if I set the value by console of chrome after the component rendered, using Ext.getCmp('xxxx').setMargin('15 0 0 0') does not work, but if I use Ext.getCmp('xxxx').getEl().setMargin('15 0 0 0') works.
Did I do something wrong?

you should use style:'margin:5px;' instead of using margin property

You do it properly. I created working fiddle for you with button margins - Button & margin.
Try to play with it and repeat your issue.

Related

Extjs 5 - Link my grid to the Viewmodel

I manage to put the datas I need in a modelView
Controller.js
init: function ()
{
var me = this;
this.mainView = this.getView().add(Ext.create('Tsi.app.tsp_use.details.MainView'));
var customer_id = this.view.customer_id;
var transaction_id = this.view.transaction_id;
this.mainView.on('afterrender', function () {
//Recherche des infos de la transaction
Ext.Ajax.request({
url: '/app/tspuse/detail',
params:
{
customer_id: customer_id,
transaction_id: transaction_id
},
success: function (response)
{
//Passer de l'item "page de chargement" à l'item suivant ici (1)
me.mainView.getLayout().setActiveItem(1);
//response.data tab clef => $valeur
me.mainView.getViewModel().setData(response.data);
console.log('hello : ', response.data);
console.log('hello 2: ', me.mainView.getViewModel());
console.log('hello 3: ', me.mainView.getViewModel().data.vouchers_detail);
}
});
});
},
Here are the datas in the console :
console datas
But I don't know how to bind them to my grind in the third tab of my mainView (see comments) :
Ext.define('Tsi.app.tsp_use.details.MainView', {
extend: 'Tsi.os.view.BaseAppView',
bodyCls: 'DPEW_body_detail',
layout: 'card',
viewModel: {
data: {}
},
items: [{
xtype: 'container',
cls: 'directpayment_detail_help',
layout: 'center',
html: '<p>' + 'directpayment_transaction.wait'._() + '</p>'
}, {
border: false,
xtype: 'tabpanel',
buttonAlign: 'left',
titleAlign: 'left',
plain: true,
tabPosition: 'left',
tabRotation: 0,
defaults: {
border: false,
buttonAlign: 'left',
titleAlign: 'left'
},
listeners: {
tabchange: 'onTabChange'
},
items: [
/**
* FIRST TAB
*/
{
icon: '/img/icons/16/man.png',
bodyStyle: 'background: url(/img/icons/256/Search-Male-User_alpha.png) no-repeat bottom right',
xtype: 'panel',
title: 'directpayment_transaction.tab_user'._(),
tbar: [
'->',
{
xtype: 'container',
text: 'directpayment_transaction.customer.head_text'._()
},
{
icon: '/img/icons/16/text_list_bullets.png',
text: 'directpayment_transaction.customer.show_all_transaction'._(),
handler: 'customerShowAllTransactions'
},
{
icon: '/img/icons/16/Bar-chart.png',
text: 'directpayment_transaction.customer.show_chart_transaction'._(),
handler: 'customerShowStats'
},
],
layout: 'fit',
items: {
border: false,
padding: 10,
xtype: 'fieldcontainer',
labelAlign: 'top',
labelWidth: 100,
defaults: {
margin: 0,
padding: 0,
labelSeparator: '',
hideEmptyLabel: false
},
items: [{
hideLabel: true,
fieldLabel: '',
xtype: 'displayfield',
//pour la date : customer_birth_date:this.toDate -> applique la fonction toDate du Controller
bind: {
value: '{customer_first_name:htmlEncode} {customer_last_name:htmlEncode} - {customer_birth_date:htmlEncode}'
},
cls: 'directpayment_detail_group'
},
{
fieldLabel: 'directpayment_transaction.customer.address'._(),
xtype: 'displayfield',
bind: {
value: '{customer_address:htmlEncode}'
}
},
{
fieldLabel: ' ',
xtype: 'displayfield',
bind: {
value: '{customer_zipcode:htmlEncode} {customer_city:htmlEncode}'
}
},
{
fieldLabel: ' ',
xtype: 'displayfield',
bind: {
value: '{customer_country:htmlEncode}'
}
},
{
fieldLabel: 'directpayment_transaction.customer.phone'._(),
xtype: 'displayfield',
bind: {
value: '{customer_phone:htmlEncode}'
}
},
{
fieldLabel: 'directpayment_transaction.customer.mobile'._(),
xtype: 'displayfield',
bind: {
value: '{customer_mobile:htmlEncode}'
}
},
{
fieldLabel: 'directpayment_transaction.customer.email'._(),
xtype: 'displayfield',
bind: {
value: '{customer_email:this.toMail}'
}
}
]
}
},
/**
* SECOND TAB
*/
{
icon: '/img/icons/16/money_euro.png',
bodyPadding: 10,
title: 'directpayment.panel_detail.tab_transaction'._(),
bodyStyle: 'background: url(/img/icons/256/shopping-basket-full_alpha.png) no-repeat bottom right',
layout: 'fit',
overflowY: 'auto',
items: {
border: false,
padding: 10,
xtype: 'fieldcontainer',
labelAlign: 'top',
labelWidth: 100,
defaults: {
margin: 0,
padding: 0,
labelSeparator: '',
labelWidth: 200,
hideEmptyLabel: false
},
items: [{
hideLabel: true,
fieldLabel: '',
xtype: 'displayfield',
bind: {
value: '{payment_status:this.renderStatus}'
},
cls: 'directpayment_detail_group'
},
{
fieldLabel: 'directpayment_transaction.transaction.date'._(),
xtype: 'displayfield',
//pour la date : transaction_dtime_creation:this.toDate -> applique la fonction toDate du Controller
bind: {
value: '{transaction_dtime:this.toDateStr}'
}
},
{
fieldLabel: 'directpayment_transaction.transaction.tids'._(),
xtype: 'displayfield',
bind: {
value: '{transaction_tid:htmlEncode}'
}
},
{
fieldLabel: 'directpayment_transaction.transaction.amount'._(),
xtype: 'displayfield',
bind: {
value: '{transaction_amount:this.toMoney}'
}
},
{
fieldLabel: 'directpayment_transaction.transaction.currency'._(),
xtype: 'displayfield',
bind: {
value: '{transaction_currency:htmlEncode}'
}
},
{
fieldLabel: 'directpayment_transaction.transaction.detail'._(),
xtype: 'displayfield',
bind: {
value: '{transaction_detail}'
}
},
{
fieldLabel: 'directpayment_v1_transaction.merchant.name'._(),
xtype: 'displayfield',
bind: {
value: '{merchant_label}'
}
},
]
}
},
/**
* THIRD TAB
*/
{
icon: '/img/icons/16/barcode-16.png',
bodyPadding: 10,
title: 'tsp_use.panel_detail.tab_vouchers.title'._(),
bodyStyle: 'background: url(/img/icons/256/shopping-basket-full_alpha.png) no-repeat bottom right',
layout: 'fit',
overflowY: 'auto',
items: {
border: false,
padding: 10,
xtype: 'grid',
labelAlign: 'top',
labelWidth: 100,
defaults: {
margin: 0,
padding: 0,
labelSeparator: '',
labelWidth: 200,
hideEmptyLabel: false
},
columns: [{
text: 'tsp_use.panel_detail.tab_vouchers.voucher_ticket_sn'._(),
dataIndex: 'voucher_ticket_sn',
flex: 1
},
{
text: 'tsp_use.panel_detail.tab_vouchers.voucher_ticket_amount'._(),
dataIndex: 'voucher_ticket_amount',
flex: 1
},
{
text: 'tsp_use.panel_detail.tab_vouchers.voucher_ticket_balance'._(),
dataIndex: 'voucher_ticket_balance',
flex: 1
},
{
text: 'tsp_use.panel_detail.tab_vouchers.merchant_id'._(),
dataIndex: 'merchant_id',
flex: 1
},
{
text: 'tsp_use.panel_detail.tab_vouchers.merchant_name'._(),
dataIndex: 'merchant_name',
flex: 1
},
{
text: 'tsp_use.panel_detail.tab_vouchers.merchant_address'._(),
dataIndex: 'merchant_address',
flex: 1
},
{
text: 'tsp_use.panel_detail.tab_vouchers.merchant_zipcode'._(),
dataIndex: 'merchant_zipcode',
flex: 1
},
{
text: 'tsp_use.panel_detail.tab_vouchers.merchant_city'._(),
dataIndex: 'merchant_city',
flex: 1
},
{
text: 'tsp_use.panel_detail.tab_vouchers.merchant_country'._(),
dataIndex: 'merchant_country',
flex: 1
},
],
store: {
fields: [
'voucher_ticket_sn',
'voucher_ticket_amount',
'voucher_ticket_balance',
'merchant_id',
'merchant_name',
'merchant_address',
'merchant_zipcode',
'merchant_city',
'merchant_country'
],
/*
* How to access datas in viewModel ?
*
* bind:{} instead of proxy:{} ?
*
*/
proxy: {
type: 'ajax',
url: '',
pageSize: 25,
reader: {}
},
autoLoad: false
},
}
},
]
}]
});
It works for the displayfield, but I failed to bind the datas to voucher_detail to my grid.
Try it this way:
viewModel: {
data: {
arrayData: undefined
},
stores: {
storeName: {
data: '{arrayData}'
}
}
}
and then you just need to bind the store to the grid.

i try to do the Spie example in Ext JS 5 but it didnt work

Here is my code i dont know why it didnt work ..the error in the console is
[W] [Ext.Loader] Synchronously loading 'widget.polar'; consider adding Ext.require('widget.polar') above Ext.onReady Util.js?_dc=1404383474396:692
GET http://localhost/widget/polar.js?_dc=1404383480019 404 (Not Found) bootstrap.js:558
Uncaught Error: [Ext.create] Unrecognized class name / alias: widget.polar ClassManager.js?_dc=1404383474396:1405
[E] [Ext.Loader] Some requested files failed to load. Util.js?_dc=1404383474396:692
Object
Util.js?_dc=1404383474396:698
console.trace() Util.js?_dc=1404383474396:704
log Util.js?_dc=1404383474396:704
Ext.apply.raise Error.js?_dc=1404383474396:186
Ext.apply.onLoadFailure Loader.js?_dc=1404383474396:649
(anonymous function) bootstrap.js:728
Uncaught Error: [Ext.Loader] Some requested files failed to load. Error.js?_dc=1404383474396:103
im just trying to create an Spie like in the example :http://dev.sencha.com/ext/5.0.0/examples/kitchensink/?charts=true#pie-custom
Ext.define('App.view.main.Main', {
extend: 'Ext.container.Container',
requires: 'App.view.main.TabPanel',
xtype: 'app-main',
controller: 'main',
viewModel: {
type: 'main'
},
layout: {
type: 'border'
},
items: [
{
region: 'center',
xtype: 'customtabpanel'
}]
});
and input it into my TAB .... i dunno why didnt work
app/view/main/TabPanel.js
Ext.define('App.view.main.TabPanel', {
extend: 'Ext.tab.Panel',
xtype: 'customtabpanel',
requires:['App.view.main.Pie'],
ui: 'navigation',
tabPosition: 'left',
tabRotation: 0,
tabBar: {
border: false
},
items: [{
title: 'Active Tab 1',
html: 'Active Link One',
xtype: 'pie-custom',
}, {
title: 'Active Tab 2',
html: 'Active Link Two'
}, {
title: 'Active Tab 3',
html: 'Active Link Three'
}, {
title: 'Active Tab 4',
html: 'Active Link Four'
}]
});
app/view/main/Pie.js
Ext.define('App.view.main.Pie', {
extend: 'Ext.Panel',
xtype: 'pie-custom',
// <example>
bodyStyle: 'background: transparent !important',
layout: {
type: 'vbox',
pack: 'center'
},
// </example>
width: 650,
initComponent: function() {
var me = this;
//<example>
me.tbar = [
'->',
{
text: 'Preview',
handler: function() {
me.down('polar').preview();
}
}
];
//</example>
me.items = [{
xtype: 'polar',
width: '100%',
height: 500,
store: {type: 'device-market-share'},
insetPadding: 30,
innerPadding: 20,
legend: {
docked: 'bottom'
},
interactions: ['rotate', 'itemhighlight'],
sprites: [{
type: 'text',
text: 'Pie Charts - Custom Slice Sizing',
font: '22px Helvetica',
width: 100,
height: 30,
x: 40, // the sprite x position
y: 20 // the sprite y position
}, {
type: 'text',
text: 'Data: IDC Predictions - 2017',
font: '10px Helvetica',
x: 12,
y: 425
}, {
type: 'text',
text: 'Source: Internet',
font: '10px Helvetica',
x: 12,
y: 435
}],
series: [{
type: 'pie',
animation: {easing: 'easeOut', duration: 500},
angleField: 'data1', // bind angle span to visits
lengthField: 'data2', // bind pie slice length to views
clockwise: false,
highlight: {
margin: 20
},
label: {
field: 'os', // bind label text to name
display: 'outside',
font: '14px Arial'
},
style: {
strokeStyle: 'white',
lineWidth: 1
},
tooltip: {
trackMouse: true,
renderer: function(storeItem, item) {
this.setHtml(storeItem.get('os') + ': ' + storeItem.get('data1') + '%');
}
}
}]
//<example>
}, {
style: 'padding-top: 10px;',
xtype: 'gridpanel',
columns : {
defaults: {
sortable: false,
menuDisabled: true
},
items: [
{ text: 'OS', dataIndex: 'os' },
{ text: 'Market Share', dataIndex: 'data1', width: 150, renderer: function(v) { return v + '%'; } },
{ text: 'Growth', dataIndex: 'data2', width: 150, renderer: function(v) { return v + '%'; } }
]
},
store: {type: 'device-market-share'},
width: '100%'
//</example>
}];
this.callParent();
}
});
can you help me out why is this error happen ???
Try to add "ext-charts" to "requires" section of your app.json in line 42

get active tab on button click in extjs

I just want to get active tab on 'save' button click in extjs code.
my code is given below:
Ext.require([
'Ext.tab.*',
'Ext.window.*',
'Ext.tip.*',
'Ext.layout.container.Border'
]);
Ext.define('WebCare.UI.RoleManagerAdminWindow', {
extend: 'Ext.window.Window',
id: 'rolemanageradminwindow',
modal: true,
title: 'Manage Role & Permission',
closable: true,
closeAction: 'hide',
width: 600,
height: 550,
minWidth: 700,
minHeight: 200,
layout: 'border',
bodyStyle: 'padding: 5px;',
listeners: {
show: function (sender, eOpts) {
var self = sender;
vent.trigger("WindowLoad");
}
},
items: [
{
id: 'rolemanageradmintab',
region: 'center',
xtype: 'tabpanel',
constructor: function (config) {
var self = this;
self.callParent(config);
},
items: [
{
xtype: 'rolemanagereditor',
id:'1'
},
{
xtype: 'agencyeditor',
id: '2'
}
],
listeners: {
'tabchange': function (tabPanel, tab) {
}
}
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
defaults: { minWidth: 70 },
style: {
background: "#d6e3f3"//, "#d9ebff",
},
height: 40,
items: [
{ xtype: 'component', flex: 1 },
Ext.create('Ext.button.Button', {
height: 25,
text: 'Close',
disabled: false,
handler: function () {
this.up('.window').close();
}
}),
Ext.create('Ext.button.Button', {
height: 25,
text: 'Save',
disabled: false,
handler: function () {
}
})
]
}
]
});
A simple example to get the active tab in the tabpanel when you click Save button.
Ext.onReady(function() {
var tabPanel = Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
html: 'A simple tab'
},
{
title: 'Tab 2',
html: 'Another one'
},
{
title: 'Tab 3',
html: 'Another one'
}
],
buttons: [
{
text: 'Save',
handler: function() {
var activeTab = tabPanel.getActiveTab();
alert("The active tab in the panel is " + activeTab.title);
}
}
],
renderTo: Ext.getBody()
});
});

Displaying a grid inside the viewport on click - Ext JS

What I'm trying to do is add a grid that is 65% width of the panel created in my app.js
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [ 'Metadata', 'Print', 'Export' ],
launch: function() {
var types = Ext.create('AM.store.Type');
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 1000,
height: 600,
title: '<center>MetaCenter</center>',
layout: 'hbox',
style: { marginLeft: 'auto', marginRight: 'auto' },
items: [
{ xtype: 'panel', padding: 5, height: 500, width: '35%',
items: [
...
{ xtype: 'button', text: 'Search',
listeners: {
click: function() {
console.log('Search Button clicked');
//Code to create panel view?
}
},
],
}
I'm not explicitly creating a viewport, so I don't believe I could do a viewport.add('grid') function, but I'm not sure. Any ideas?
You could add the grid when creating the container, with hidden: true, then show it when the button is clicked:
{
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'panel',
flex: 0.35,
items: [
...
{
xtype: 'button',
text: 'Search',
listeners: {
click: function(btn) {
btn.up('panel').nextSibling().show();
}
}
}
]
},
{
xtype: 'grid',
flex: 0.65,
hidden: true,
...
}
]
}

TextField.getFieldLabel() not working

var rows=[];
for(var i=0; i<5;i++)
{
var row = Ext.create(Prototype.view.RowModel);
var text = row.getComponent(0).getFieldLabel();
var text2 = row.getComponent(0).getId();
rows.push(row);
console.log(text+text2);
}
this.add(rows);
row.GetComponent(0) is confirmed to be a textfield.
When I call getFieldLabel() it crashes with the following error
Uncaught TypeError: Object [object Object] has no method 'getFieldLabel'
But the ExtJs 4.2 documentation says otherwise...?
Whatever the technique I use to reach the "label". i always receive a object Object which has no getFieldLabel(). How do I convert? Or reach it directly?
can someone help?
code of the row model :
Ext.define('Prototype.view.RowModel', {
extend: 'Ext.Container',
config: {
layout: {
type: 'hbox'
},
items: [
{
xtype: 'textfield',
itemId: 'rowLabel',
width: 100,
label: 'Vin',
labelWidth: '100%',
name: 'rowLabel1',
readOnly: true
},
{
xtype: 'numberfield',
itemId: 'UserField',
width: 100,
labelWidth: '0%'
},
{
xtype: 'numberfield',
itemId: 'ObjectField',
width: 100,
labelWidth: '0%'
},
{
xtype: 'textfield',
itemId: 'UnitLabel',
style: 'font-size:15px',
width: 60,
label: 'L/User',
labelWidth: '100%',
readOnly: true
},
{
xtype: 'numberfield',
itemId: 'FactorField',
width: 100,
labelWidth: '0%'
},
{
xtype: 'spacer',
maxWidth: 15
},
{
xtype: 'button',
handler: function(button, event) {
alert('help');
console.log('okay');
},
height: 47,
itemId: 'mybutton',
ui: 'plain',
iconCls: 'info'
}
]
}
});
You can find the textfield by itemId:
row.down('#rowLabel');

Resources