this is code and link on screenshot
Ext.define('SD.view.SDDetail', {
extend: 'Ext.window.Window',
alias: 'widget.sddetail',
title: "Создание заявки",
height: 620,
width: 850,
layout: 'fit',
border: false,
modal: true,
isDemandReadOnly: false,
changeStatusOnly: false,
initComponent: function () {
var me = this;
var user = TR.user;
var f = new Ext.form.FormPanel({
xtype: 'form',
labelWidth: 60
, frame: true
, items: [{
fieldLabel: 'Text'
, xtype: 'textfield'
, anchor: '-18'
}, {
layout: 'column'
, defaults: {
columnWidth: 0.5
//, layout: 'form'
, border: false
, xtype: 'panel'
, bodyStyle: 'padding:0 18px 0 0'
}
, items: [{
defaults: { anchor: '100%' }
, items: [{
xtype: 'combo'
, fieldLabel: 'Combo 1'
, store: ['Item 1', 'Item 2']
}, {
xtype: 'datefield'
, fieldLabel: 'Date'
}]
}, {
defaults: { anchor: '100%' }
, items: [{
xtype: 'combo'
, fieldLabel: 'Combo 2'
, store: ['Item 1', 'Item 2']
}, {
xtype: 'timefield'
, fieldLabel: 'Time'
}]
}]
}, {
fieldLabel: 'Text Area'
, xtype: 'textarea'
, anchor: '-18 -80'
}]
});
this.items = [f];
this.tbar = {
xtype: 'toolbar',
height: 27,
items: [
{
xtype: "tbspacer"
}, "-", {
xtype: "tbspacer"
},
{
text: "Прикрепленные файлы",
icon: "Content/images/btnAttach.gif",
disabled: true,
handler: function (btn, e) { ShowAttachments(r.id, true, me.isDemandReadOnly); }
}, "-", {
xtype: "tbspacer"
}, {
text: "История статусов",
icon: "Content/images/btnHistory.gif",
disabled: true,
handler: function (btn, e) { ShowStatusesHistory(r.id, true); }
}, "-", {
xtype: "tbspacer"
}, {
text: "Информация по сопроводительной карточке",
icon: "Content/images/btnComplect.gif",
disabled: true,
handler: function (btn, e) { ShowComponents(r.id, true, me.isDemandReadOnly); }
}, "-", {
icon: "Content/images/btnPrint.gif",
text: "Сопроводительная карточка изделия",
disabled: true,
handler: function (btn, e) { DemandCardForm(r.id); }
}
]
};
this.buttons = [
{
text: "Сохранить",
action: 'save'
, disabled: me.isDemandReadOnly || user.SdUserViewOnly
}, {
xtype: "button",
text: "Отмена",
handler: function (btn, e) {
me.close();
}
}
];
// me.on('show', function () {
// me.down('kontragentcombo').focus(false, 250);
// });
me.callParent(arguments);
}
http://s002.radikal.ru/i198/1208/e2/7a153ca9b116.jpg
when i uncomment layout: 'form' i have error
namespace is undefined
[Прерывать на этой ошибке]
if (namespace === from || namespace.substring(0, from.length) === from) {
i whant this http://i032.radikal.ru/1208/51/e9b8ba1c1f30.jpg
but have error, what i must do?
layout is not defined in the items of the panel. It's part of the panel's properties (see the docs: Form Panel). Put it before the items.
As a suggestion - it would be easier to see it if your lines had consistent comma layout.
Related
I have the following code for the node.js high-Charts export-server the legend is showing but the label formatted is not applied and the function is not executed also
I have tried the load function also and it is not working, I tried custom HTML and it is now showing also
let chartDetails = {
type: "png",
options: {
chart: {
type: "pie",
showInLegend: true,
dataLabels: {
enabled: false
}
},
title: {
align: 'left',
floating: false,
text: 'Main Title',
style: {
fontSize: '24px'
}
},
subtitle: {
verticalAlign: 'middle',
align: 'center',
floating: false,
text: '<b>300</b><br>Total Issues',
style: {
fontSize: '30px'
}
},
plotOptions: {
pie: {
innerSize: '70%',
shadow: false,
showInLegend: true,
dataLabels: {
enabled: false,
}
}
},
legend: {
enabled: true,
floating: true,
borderWidth: 0,
align: 'right',
layout: 'vertical',
verticalAlign: 'middle',
useHTML: true,
labelFormatter: function () {
console.log("this: is equal to ");
console.log(this);
return 'custom word';
}
}
,
series: [
{
data: [
{
name: "a",
y: 100
},
{
name: "b",
y: 20
},
{
name: "c",
y: 50
}
]
}
]
}
};
I expected 'custom word' instead 'a','b','c' is showing
It seems when using node-export-server as a module callback functions are not supported. Check this thread on the module github: https://github.com/highcharts/node-export-server/issues/122.
As a workaround, you can use labelFormat property instead of labelFormatter:
legend: {
enabled: true,
floating: true,
borderWidth: 0,
align: 'right',
layout: 'vertical',
verticalAlign: 'middle',
useHTML: true,
labelFormat: "custom word"
}
in normal highchart i get svg code with code like this
var chart = $('#container').highcharts()
svg = chart.getSVG();
So, how can i get svg code with this highchart directive in angular js???
i try like normal code but i didn't get svg code.
i use this directive for my highchart
https://github.com/rootux/angular-highcharts-directive
and this my code in controller.js
$scope.chartLogisticGIGR = {
options: {
tooltip: {
shared: true
}
},
xAxis: { // Primary xAxis
categories: $scope.nameMonths,
title: {
text: 'Month'
},
labels: {
enabled: true
},
min:0
},
yAxis: [{ // Primary yAxis
title: {
text: 'GI / GR in IDR'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value / 1000000,'0') + ' mil';
}
}
}, { // Secondary yAxis
title: {
text: 'Balance'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value / 1000000,'0') + ' mil';
}
},
}],
series: [{
name: 'AGP - Goods Receipt',
type: 'column',
stacking: 'normal',
stack: '1',
data: $scope.dataLogisticGIGR_AGP_GR,
color: $rootScope.getColor('AGP Ext'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AGP - Goods Issue',
type: 'column',
stacking: 'normal',
stack: '1',
data: $scope.dataLogisticGIGR_AGP_GI,
color: $rootScope.getColor('AGP Int'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AGP - Balance',
type: 'spline',
data: $scope.dataLogisticGIGR_AGP_Balance,
color: $rootScope.getColor('AI 2'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AI - Goods Receipt',
type: 'column',
stacking: 'normal',
stack: '3',
data: $scope.dataLogisticGIGR_AI_GR,
color: $rootScope.getColor('AI'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AI - Goods Issue',
type: 'column',
stacking: 'normal',
stack: '3',
data: $scope.dataLogisticGIGR_AI_GI,
color: $rootScope.getColor('AP 2'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
},{
name: 'AI - Balance',
type: 'spline',
data: $scope.dataLogisticGIGR_AI_Balance,
color: $rootScope.getColor('AP'),
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}: {point.y:,.0f}</span><br/>'
}
}],
title: {
text: ''
},
loading: false
};
in this is my code in directive highchart
'use strict';
angular.module('chartsExample.directives',[])
.directive('chart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
chartData: "=value"
},
transclude:true,
replace: true,
link: function (scope, element, attrs) {
var chartsDefaults = {
chart: {
renderTo: element[0],
type: attrs.type || null,
height: attrs.height || null,
width: attrs.width || null
}
};
//Update when charts data changes
scope.$watch(function() { return scope.chartData; }, function(value) {
if(!value) return;
// We need deep copy in order to NOT override original chart object.
// This allows us to override chart data member and still the keep
// our original renderTo will be the same
var newSettings = {};
angular.extend(newSettings, chartsDefaults, scope.chartData);
var chart = new Highcharts.Chart(newSettings);
});
}
};
});
Thank's....
My problem is, even if I used "layout: 'fit'" in all my children items within a boarder layout, they just shrinks into a small box rather than fill the parent, as described in fit layout.
I want the EDS.view.selector.Container to fill the "navigation" section of my boarder layout.
(Code excerpt)
Ext.define('EDS.view.selector.Container', {
extend: 'Ext.panel.Panel',
alias : 'widget.selectorcontainer',
layout: 'fit',
initComponent: function(){
this.items = [
{
xtype: 'tabpanel',
defaults: {
bodyPadding: 10
},
layout: 'fit',
items:[
{
title: 'Organization',
id: 'selector-organization',
tag: 'div',
html: 'div here',
height: '100%',
}
]
}
],
this.callParent();
},
});
(Controller)
init: function(){
console.log('controller.init()');
new Ext.Viewport({
title: 'Data Analysis',
layout: 'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding: 15px',
},
items: [{
title: 'Navigation',
region:'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 600,
minSize: 100,
maxSize: 250,
items: [
{
id: 'selector-container',
xtype: 'selectorcontainer',
layout: 'fit',
}
]
},{
title: 'Main Content',
collapsible: false,
region:'center',
margins: '5 0 0 0'
}]
});
}
You did not set up layout for wrapper containers in your border layout:
items: [{
title: 'Navigation',
region:'west',
layout: 'fit',
...
items: [
]
},{
title: 'Main Content',
collapsible: false,
region:'center',
layout: 'fit',
...
}]
Remember: In ExtJS any plain JS object that goes into items property of a container will be converted into some type of Ext component with xtype defined by defaultType property of that container. In most cases it will be panel.
I'm trying to build my container in the initialize() function by creating all my components then calling this.setItems([...]). For some reason, my components are being placed on top of each other, rather than after each other in the vbox.
I am able to grab the top component and move it down, as is shown in the attached image.
Simplified view with two components:
Ext.define("Sencha.view.DynamicView", {
extend: 'Ext.Container',
xtype: 'dynamic-view',
requires: [],
config: {
layout: {
type: 'vbox'
},
flex: 1,
cls: 'view-container',
store: null
},
createRadioSet: function() {
this.radioFieldSet = Ext.create('Ext.form.FormPanel', {
flex: 1,
items: [{
xtype: 'fieldset',
title: 'About You',
defaults: {
xtype: 'radiofield',
labelWidth: '40%'
},
instructions: 'Favorite color?',
items: [{
name: 'color',
value: 'red',
label: 'Red'
},
{
name: 'color',
value: 'green',
label: 'Green'
}
]
}]
});
return this.radioFieldSet;
},
createCheckboxSet: function() {
this.checkboxFieldSet = Ext.create('Ext.form.FormPanel', {
flex: 1,
items: [{
xtype: 'fieldset',
title: 'Check all that apply',
defaults: {
xtype: 'checkboxfield',
labelWidth: '40%'
},
instructions: 'Tell us all about yourself',
items: [{
name: 'firstName',
value: 'First',
label: 'First Name'
},
{
name: 'lastName',
value: 'Last',
label: 'Last Name'
}
]
}]
});
return this.checkboxFieldSet;
},
initialize: function() {
this.callParent(arguments); // #TDeBailleul - fixed
var r1 = this.createRadioSet();
var cbSet1 = this.createCheckboxSet();
// this.add(cbSet1);
// this.add(r1);
this.setItems([r1, cbSet1]);
}
});
My problem was that I was adding my components incorrectly in a tab controller. I'm including an example that creates buttons on one tab and the checkboxes on another tab.
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name : ('SF' || 'SenchaFiddle'),
createRadioSet: function () {
this.radioFieldSet = Ext.create('Ext.form.FormPanel', {
height: '300px',
width: '300px',
items: [
{
xtype: 'fieldset',
title: 'Title',
defaults: {
xtype: 'radiofield',
labelWidth: '40%'
},
instructions: 'Favorite color?',
items: [
{
name: 'color',
value: 'red',
label: 'Red'
},
{
name: 'color',
value: 'green',
label: 'Green'
}
]
}
]
});
return this.radioFieldSet;
},
createButton: function(i) {
return Ext.create('Ext.Button', {
text: 'hello' + i,
height: '50px',
width: '100px'
});
},
launch: function () {
var tabPanel = Ext.create('Ext.tab.Panel', {
layout: 'card',
padding: 2,
tabBarPosition: 'bottom',
items: [
{
id: 'tab1',
title: 'Home',
layout: 'hbox',
xtype: 'container',
iconCls: 'home'
},
{
id: 'tab2',
title: 'More',
layout: 'hbox',
xtype: 'container',
iconCls: 'star'
}
]
});
Ext.Viewport.add(tabPanel);
var a,b;
for (var i = 0; i < 3; i++) {
a = this.createButton(i);
b = this.createRadioSet();
// tabPanel.getAt(0).add(b); // Reference the proper component: Tab 1
Ext.getCmp('tab1').add(a);
Ext.getCmp('tab2').add(b);
}
}
});
Hello!
I want this handler "handler: onEventControler (???)" removed from view (it do not belong there)
For grid view set dockedItems this cod:
this.dockedItems = [{
xtype: 'toolbar',
items: [{
xtype: 'newstation'
},{
id: 'add-persone-btn',
xtype: 'button',
itemId: 'add',
text: 'Add',
iconCls: 'icon-add',
handler: onEventControler(???)
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
I also tried to implement a this.control, but I could not ask for a button selectorQuery.
How do I properly respecting the architecture mvc extJs4?
thank you.
You should be able to do something like this inside the controller of this view.
init: function () {
this.control({
'toolbar #add': {
click: this.onAddStation
}
});
}
Handler:
onAddStation: function(button, e, eOpts){
//Handle
}
Alternatively, you could use an "action" config on your button.
action: 'addstation'
Then you could have:
init: function () {
this.control({
'button[action=addstation]': {
click: me.onAddStation
}
});
}
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button
This is method "initComponent" for view gridd view:
initComponent: function () {
this.plugins = [Ext.create('Ext.grid.plugin.RowEditing')];
this.dockedItems = [{
xtype: 'toolbar',
items: [{
xtype: 'button',
itemId: 'add',
text: 'Add',
iconCls: 'icon-add',
action: 'add-new-persone'
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
action: 'delete-persone',
disabled: true
}, '-', {
itemId: 'synch',
text: 'Synchronization',
iconCls: 'icon-synch',
action: 'synch-persone'
}]
}];
// paging bar on the bottom
this.bbar = Ext.create('Ext.PagingToolbar', {
store: this.store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[]
});
this._initColumns();
this._initFilter();
this.callParent(arguments);
},