In Extjs 4.1.1a, I am trying to create a table like structure using containers or panels which completely stretches horizontally and vertically to its parent component.
Here is the Example Fiddle
In View:
Ext.define("MyApp.view.Main", {
extend: 'Ext.panel.Panel',
layout: {type: 'vbox',align:'stretch'},
title: 'hello',
id: 'mainContainer'
})
In Controller:
var items = [];
for(var i=0;i<6;i++){
var vContainer = [];
var hContainer = [];
for(var j=0;j<7;j++){
hContainer.push({
xtype: 'panel',
flex:1,
})
}
vContainer.push({
xtype:'panel',
flex: 1,
layout: {type:'hbox',align:'stretch'},
items: hContainer
})
}
var mainController = Ext.getCmp('mainController'); //Calling the id here
mainController.add(items); //adding the items variable which is mentioned above
I am not sure why this ain't working (not showing anything). Please assist me to solve this problem.
Fiddle
You're pushing an array into an array and passing it as items in the main panel:
Here's the fixed code:
var items = [];
for(var i=0;i<6;i++){
var vContainer; //THE PROBLEM - NO NEED FOR IT TO BE AN ARRAY
var hContainer = [];
for(var j=0;j<7;j++){
hContainer.push({
xtype: 'panel',
title : 'H',
flex:1,
});
}
vContainer = {
xtype:'panel',
flex: 1,
layout: {type:'hbox',align:'stretch'},
title : 'V',
items: hContainer
}
items.push(vContainer);
}
Ext.create('Ext.panel.Panel',{
renderTo: Ext.getBody(),
layout: {type: 'vbox',align:'stretch'},
title: 'hello',
minHeight : 500,
minWidth : 500,
items: items
})
Edit: Was too late, leaving the example here anyway.
You're building it wrong:
/*****************************************/
var items = [];
for(var i=0;i<6;i++){
var hContainer = [];
for(var j=0;j<7;j++){
hContainer.push({
xtype: 'panel',
flex:1
});
}
items.push({
xtype:'panel',
flex: 1,
layout: {type:'hbox',align:'stretch'},
items: hContainer
});
}
/*****************************************/
Ext.create('Ext.panel.Panel',{
renderTo: Ext.getBody(),
layout: {type: 'vbox',align:'stretch'},
title: 'hello',
height: 400,
items: items
});
Here's the fiddle: http://jsfiddle.net/johanhaest/ptZp7/
Related
I am trying to show the data history in jsgrid as asked here.
$("#jsGrid").jsGrid({
...
rowRenderer: function(item) {
var row = $("<tr>");
var historyGrid = $('<tr>').addClass('nested-grid').hide();
historyGrid.jsGrid({
width: "100%",
height: "auto",
editing: false,
data: [{"a":"d1","b": "d2"},{"a":"d3","b":"d4"},{"a":"d5","b":"d6"}],
heading: false,
fields: [{ name: "a", type: "text"}, {name: "b",type: "text"}]
})
var items= Object.keys(item);
items.forEach(function(key){
if(key!=items[items.length-1]) {
var cell = $("<td>").addClass("jsgrid-cell").append(item[key]);//line 1
row.append(cell);
}
});
row.click(function () {
historyGrid.toggle();
})
row.append(historyGrid);
return row.add(historyGrid);
}
});
The history appears as below. I want to display in such a way that, it spans the entire blank(row) area.
if I change it tr to td at line 1, it appears as below
Any help?
I have this grid and would like to put all of the values from Box column inside a rectangle using metadata.style , tdCls or CSS. My issue is that I don't want to color the entire column (cell), I only want to color the value inside of it by wrapping it in a rectangle, and if the value of the column is empty then just show an empty rectangle.
Here's an example of what I want for each column (cell) to look like under the Box column:
Here's the working code : FIDDLE
switch(recordStatus) {
case 'Checked-In':
backgroundColor = "#B4B4D6";
metadata.style = 'background-color: ' + backgroundColor + ';';
return val;
break;
...
}
Thank you so much in advance!
You need to return html from your renderer method and provide style as per you requirement.
In this FIDDLE, I have modified some changes in your code as per you requirement. I hope it is same as per your requirement.
JS code
var data = Ext.decode('[{"box":"","name":"Brady, Marsha","status":"Checked-In"},{"box":"MA","name":"Dwight, Schrute","status":"With MA"},{"box":"MA","name":"Jim, Halpert","status":"With MA"},{"box":"MA","name":"Mike, Brown","status":"With MA"},{"box":"MA","name":"Steve, Smith","status":"With MA"},{"box":"MA","name":"Lori, Morrison","status":"With MA"},{"box":"MA","name":"Mary, Loson","status":"With MA"},{"box":"MA","name":"Junior, Meloni","status":"With MA"},{"box":"MA","name":"Jim, Halpert","status":"With MA"},{"box":"","name":"Kevin, Malone","status":"Checked-In"},{"box":"","name":"Angela, Martin","status":"Checked-In"},{"box":"2","name":"Jim, Halpert","status":"Ready for MA"},{"box":"2","name":"Kevin, Malone","status":"Ready for MA"},{"box":"2","name":"Angela, Martin","status":"Ready for MA"}]'),//Store Data
//Create store
store = Ext.create('Ext.data.Store', {
fields: ['name', 'box', 'status'],
data: data,
groupField: 'status'
}),
//create grid
grid = Ext.create('Ext.grid.Panel', {
height: 450,
frame: true,
title: 'Sponsored Projects',
iconCls: 'icon-grid',
renderTo: document.body,
store: store,
features: [{
ftype: 'grouping',
}],
columns: [{
text: 'Box',
renderer: function (val, metadata, record) {
var recordStatus = record.get('status'),
style = 'border:1px solid #cccccc';
if (val) {
switch (recordStatus) {
case 'Checked-In':
style = "background-color:#B4B4D6";
break;
case 'With MA':
style = "background-color:#CBC5EB";
break;
case 'Ready for MA':
style = "background-color:#E3E1ED";
break;
default:
style = '';
}
}
metadata.style = "text-align: center;";
return `<div class="x-box-div" style="${style}">${val}</div>`
},
dataIndex: 'box',
flex: 0.5
}, {
text: 'Name',
renderer: function (value, metaData) {
return value.replace(value, '<u><b>' + value.toUpperCase() + '</b></u>');
},
dataIndex: 'name',
flex: 2
}, {
text: 'Status',
dataIndex: 'status',
flex: 1
}]
});
CSS code
<style>
.x-box-div {
min-width: 30px;
min-height: 30px;
text-align: center;
display: inline-block;
vertical-align: middle;
padding: 10px 0;
max-height: 30px;
}
</style>
This worked for me
renderer: function (v,meta) {
meta.tdCls = '***your icon with css***';
}
I am trying to customize the style of grid cells depending on conditions met by cell values. In the kendo documentation I have found an example how to do this. The example works with extending the grid with a databound function.
I have adjusted the code on the Dojo page to my needs and there it works perfectly. But when I try to extend my grid with a databound function I fail to find the right syntax/postion to insert the function.
This is my databound function:
dataBound: function(e) {
// get the index of the cell
var columns = e.sender.columns;
var columnIndex = this.wrapper.find(".k-grid-header [data-field=" + "Frachtkonsens" + "]").index();
// iterate the table rows and apply custom row and cell styling
var rows = e.sender.tbody.children();
for (var j = 0; j < rows.length; j++) {
var row = $(rows[j]);
var dataItem = e.sender.dataItem(row);
var value = dataItem.get("Frachtkonsens");
var max = dataItem.get("Mengenschwelle");
//var min = dataItem.get("Min");
var cell = row.children().eq(columnIndex);
cell.addClass(checkValue(value, max));
}
}
This is the javascript:
<script type="text/javascript">
function checkvalue(value, max) {
if (max > 0) {
if (value > max){
return "critical";
}
}
}
$(function() {
var konsenseGrid = $("#parameters-grid").kendoGrid({
dataSource: someData,
scrollable: true,
sortable: true,
pageable: { refresh: true },
selectable: "row",
resizable: true,
height: 430,
editable: true,
toolbar: [{ text: "", template: kendo.template($("#add-parameter-template").html()) }, { text: "", template: kendo.template($("#update-parameter-template").html()) }],
columns: [
{
field: "Parameter",
title: "Parameter",
width: "160px"
},
{
field: "Max",
title: "Max",
width: "55px",
format: "{0:n}",
editor: numberEditor
},
{
field: "Frachtkonsens",
title: "Frachtkonsens",
width: "70px",
format: "{0:n1}",
editor: numberEditor
},
{
command:
["edit", "destroy"],
title: " ",
width: "200px"
}
],
});
});
And this is the style I want to apply to cells that meet the conditions:
.critical {
font-weight: bold;
color: #f00;
}
If someone could help me please!
Regards Manu
You should put dataBound along with the top-level configuration properties, and provide the respective handler function, e.g.:
$(function() {
var konsenseGrid = $("#parameters-grid").kendoGrid({
dataSource: {
data: [{'Parameter': 'a', Max: 5, Frachtkonsens: 10, Mengenschwelle: 5}, {'Parameter': 'b', Max: 1, Frachtkonsens: 1, Mengenschwelle: 3}]
},
dataBound: function(e) {
// get the index of the cell
var columns = e.sender.columns;
var columnIndex = this.wrapper.find(".k-grid-header [data-field='Frachtkonsens']").index();
// iterate the table rows and apply custom row and cell styling
var rows = e.sender.tbody.children();
for (var j = 0; j < rows.length; j++) {
var row = $(rows[j]);
var dataItem = e.sender.dataItem(row);
var value = dataItem.get("Frachtkonsens");
var max = dataItem.get("Mengenschwelle");
//var min = dataItem.get("Min");
var cell = row.children().eq(columnIndex);
cell.addClass(checkValue(value, max));
}
},
scrollable: true,
...
Example
This my TabPanel code:
inside the code there is two tabs (tab1 and tab2) in the TabPanel (tabs_panel)
MyTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
height: 210,
resizeTabs: true,
tabWidth: 266,
id: 'tabs_panel',
initComponent: function () {
this.items = [{
xtype: 'panel',
title: 'Project',
padding: 20,
height: 150,
id: 'tab1'
}, {
xtype: 'panel',
title: 'Service',
height: 150,
padding: 20,
id: 'tab2'
}]
}
});
I'm trying to hide tab2 using bellow code but this bellow code
var tabPanel = Ext.getCmp('tabs_panel');
var tabToHide = Ext.getCmp('tab2');
tabPanel.hideTabStripItem(tabToHide);
but somehow this above code does not work for me. How can I fix the problem?
You have two possibilities:
var tabPanel = Ext.getCmp('tabs_panel');
tabPanel.hideTabStripItem("tab2"); // with tab id
or
var tabPanel = Ext.getCmp('tabs_panel');
tabPanel.hideTabStripItem(1); // with tab index
try this one
Ext.getCmp("tab").child('#id').tab.hide()
Let's say I have a JS in one file that creates a Viewport:
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
{
region: 'center'
},
...
]
});
Now let's say I have another JS file that loads subsequently with this component definition:
{
contentEl: 'content',
height: '100%'
}
How do I add that component with contentEl: 'content' to the 'center' region?
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
{
region: 'center',
id:'centerViewPortId'
}
]
});
//your second javascript file
Ext.onReady(function(){
var contentEl = Ext.create('Ext.Component', {
contentEl: 'content',
renderTo: Ext.getBody()
});
viewPort.getComponent('centerViewPortId').add(contentEl);
});
var viewpoert = Ext.create('Ext.container.Viewport', {
layout: 'border'
});
anoter file;
var contentEl = Ext.Create('Ext.Something.What.You.Want', {
region: "center"
});
finally:
viewport.add(contentEl);
This link still came up top of the search results for Google, so I thought I'd add another neat solution:
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'border'
});
//your second javascript file
Ext.onReady(function(){
var contentEl = Ext.create('Ext.Component', {
contentEl: 'content',
region: 'center',
renderTo: Ext.getBody()
});
viewPort.add(contentEl);
});