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.
Related
I try to chanage a color of line lables:
exmaple of label pic
The line has settings:
const linedataset = {
type: 'line',
label: 'label',
data: xavarage,
order: 1,
borderColor: 'rgb(225, 54, 54)',
backgroundColor: lineBackground,
};
And common settings are:
const chartoptions = {
hoverBackgroundColor,
backgroundColor,
responsive: true,
scales: {
x: {},
y: {
min: 0,
},
},
plugins: {
title: {
display: true,
text: this.selectedCategory?.full,
font: {
size: 20,
},
},
datalabels: {
anchor: 'end',
align: 'end',
},
},
};
I have tried to usse the following code:
options: {
legend: {
color: "#ccc"
}
}
But it does not work too. How to set color of label text (line graphic)?
Your chart uses chartjs-plugin-datalabels. Therefore, you need to define color inside datalabels as follows:
datalabels: {
color: '#ccc',
anchor: 'end',
align: 'end'
},
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
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.
var settingForm = Ext.create('Ext.form.Panel', {
frame: false,
bodyStyle: 'padding:5px 5px 0',
modal: true,
resizable: false,
draggable: true,
forceSelection: true,
fieldDefaults: {
labelAlign: 'right',
//msgTarget: 'side',
labelWidth: 140
},
items: [{
xtype: 'fieldset',
anchor: '100%',
title: 'Some Information',
layout: 'column',
items: [{
xtype: 'container',
columnWidth: .5,
layout: 'anchor',
items: [{
xtype: 'hiddenfield',
name: 'txtHiddenId',
id: 'txtHiddenId'
}, {
xtype: 'textfield',
fieldLabel: 'Host Name',
name: 'txtHostName',
id: 'txtHostNameId',
allowBlank: false,
anchor: '96%',
disabled: true,
enableKeyEvents: true,
listeners: {
keypress: function() {
manageUpdate();
},
specialkey: function(field, e) {
if (e.getKey() == "46" || e.getKey() == "8")
manageUpdate();
}
}
}
Remove draggable: true and forceSelection: true. See if it helps.
I am using EXTJS 4.0 and I want to display tips when user move to on my line Charts i already created Group Line Chart and as well as create Rich Tips also but now my problem is when I create tips for every series and run in browser I got blank tips for three line Chart out of four but fourth line chart display the correct Rich tips. My sample code is:
Code For Panel and Line charts:
var ChequesDetailsChartsMonthWiseWin = Ext.create('Ext.panel.Panel', {
width: 800,
height: 600,
hidden: false,
id:'ChequesDetailsChartsMonthWiseWinId',
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
items: {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: ChequesDetailsLineChartsMonthwiseStore,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['Honorarium','Program Expenses','Assets Amount','Human Resource'],
title: 'Amounts (In Rs)',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['month'],
title: 'Month of the Year'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Honorarium',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Honorarium');
this.setTitle("Information for " + 'Honorarium - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'month',
yField: 'Program Expenses',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Program Expenses');
this.setTitle("Information for " + 'Program Expenses - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Assets Amount',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Assets Amount');
this.setTitle("Information for " + 'Assets Amount - Month :' +storeItem.get('month') );
}
} // tips ends here
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
// fill: true,
xField: 'month',
yField: 'Human Resource',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
},
tips: {
trackMouse: true,
width: 600,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart,grid]
},
renderer: function(storeItem, item) {
//alert(storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.clearFilter();
ChequesDetailsPieChartGridMonthwiseStore.filter('month', storeItem.get('month'));
ChequesDetailsPieChartGridMonthwiseStore.filter('HeadName', 'Human Resource');
this.setTitle("Information for " + 'Human Resource - Month :' +storeItem.get('month') );
}
} // tips ends here
}]
}
});
And Sample Preview is :
Line Chart :
Line Chart :
Please provide me solution of how to display tips in all charts or where I am doing wrong.