I have a ColumTree Ext.us.Tree.ColumnTree, I want to hide/show a column conditionally, I used config like hidden and setVisible, but it will not work,
var tree = new Ext.ux.tree.ColumnTree({
width: 990,
height: 300,
rootVisible: false,
autoScroll: true,
title: '<s:property value="lblStockTotal"/>',
renderTo: 'tree-div',
columns: [
{
id: 'lblProduct',
header: '<s:property value="lblProduct"/>'+' -> '+'<s:property value="lblProgram"/>'+' -> ' +'<s:property value="lblCountry"/>',
dataIndex: 'Product',
width: 230
},
{
header: '<s:property value="lblTotalVolume"/>',
width: 150,
dataIndex: 'TotalVolume'
},
{
header: '<s:property value="lblTradingStock"/>',
width: 150,
dataIndex: 'TradingStock'
},
{
header: '<s:property value="lblMarketplace"/>',
width: 150,
dataIndex: 'Marketplace',
hidden:true
},
{
header: '<s:property value="lblAuction"/>',
width: 150,
dataIndex: 'Auction',
hidden:true
},
{
header: '<s:property value="lblWarehouse"/>',
width: 150,
dataIndex: 'Warehouse',
hidden:true // NOT Working
}
],
loader: new Ext.tree.TreeLoader({
dataUrl: 'stocktotaldata.action',
uiProviders: {
'col': Ext.ux.tree.ColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
text: 'Tasks'
})
});
MANUAL APPROACH
What I have Done, I split up each column into variable like col1,col2 etc and now I want to render those column using if condition , which is even not work, when I add up all those column like col1+col2+col3, that will encountered an error
masterColumn=column1+column2+column3+column4+column5+column6+colEnd;
var column1=[
{
id: 'lblProduct',
header: '<s:property value="lblProduct"/>'+' -> '+'<s:property value="lblProgram"/>'+' -> ' +'<s:property value="lblCountry"/>',
dataIndex: 'Product',
width: 230
},;
var column2=
{
header: '<s:property value="lblTotalVolume"/>',
width: 150,
dataIndex: 'TotalVolume'
},;
var column3=
{
header: '<s:property value="lblTradingStock"/>',
width: 150,
dataIndex: 'TradingStock'
};
var column4=
,{
header: '<s:property value="lblMarketplace"/>',
width: 150,
dataIndex: 'Marketplace',
hidden:true
};
var column5=
,{
header: '<s:property value="lblAuction"/>',
width: 150,
dataIndex: 'Auction',
align:'right',
hidden:true,
};
var column6=
,{
header: '<s:property value="lblWarehouse"/>',
width: 150,
dataIndex: 'Warehouse',
hidden:true
};
var colEnd=];
var tree = new Ext.ux.tree.ColumnTree({
width: 990,
height: 300,
rootVisible: false,
autoScroll: true,
title: '<s:property value="lblStockTotal"/>',
renderTo: 'tree-div',
columns: masterColumn,
loader: new Ext.tree.TreeLoader({
dataUrl: 'stocktotaldata.action',
uiProviders: {
'col': Ext.ux.tree.ColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
text: 'Tasks'
})
});
var tree = new Ext.ux.tree.ColumnTree({
width: 990,
height: 300,
rootVisible: false,
autoScroll: true,
title: '<s:property value="lblStockTotal"/>',
renderTo: 'tree-div',
columns: [
this.column1 = {
id: 'lblProduct',
header: '<s:property value="lblProduct"/>'+' -> '+'<s:property value="lblProgram"/>'+' -> ' +'<s:property value="lblCountry"/>',
dataIndex: 'Product',
width: 230
},
this.column2 = {
header: '<s:property value="lblTotalVolume"/>',
width: 150,
dataIndex: 'TotalVolume'
},
this.column3 = {
header: '<s:property value="lblTradingStock"/>',
width: 150,
dataIndex: 'TradingStock'
},
this.column4 = {
header: '<s:property value="lblMarketplace"/>',
width: 150,
dataIndex: 'Marketplace',
hidden:true
},
this.column5 = {
header: '<s:property value="lblAuction"/>',
width: 150,
dataIndex: 'Auction',
hidden:true
},
this.column6 = {
header: '<s:property value="lblWarehouse"/>',
width: 150,
dataIndex: 'Warehouse',
hidden:true // NOT Working
}
],
loader: new Ext.tree.TreeLoader({
dataUrl: 'stocktotaldata.action',
uiProviders: {
'col': Ext.ux.tree.ColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
text: 'Tasks'
})
});
we can use the reference using this, and later use this reference in the instance you have created and then can use hide and show method to hide or show.
Related
I want to write the sums of some data under grouping and grid. I am sharing my codes, I will be glad if you help. Thank you.
var store = new Ext.data.JsonStore({
url: 'ajaxQueryData?_qid=4146',
root: 'data',
totalProperty: 'browseInfo.totalCount',
remoteSort: true,
id: 'sira_no',
sortInfo: {
field: 'sira_no',
direction: 'ASC'
},
fields: [
{
name: "sira_no",
type: "int"
},
{
name: "branch_id_qw_"
},
{
name: "firma"
},
{
name: "sevk_adres"
},
{
name: "malzeme"
},
{
name: "group_id_qw_"
},
{
name: "kategori_id_qw_"
},
{
name: "alt_kategori_id_qw_"
},
{
name: "vade"
},
{
name: "birim_tip_qw_"
},
{
name: "miktar"
},
{
name: "kg"
},
{
name: "birim_fiyat"
},
{
name: "para_birim_qw_"
},
{
name: "net_tutar"
},
{
name: "irsaliye_dt"
},
{
name: "irsaliye_no"
},
{
name: "fatura_dt"
},
{
name: "fatura_no"
},
{
name: "sehir_id_qw_"
},
{
name: "ilce_id_qw_"
},
{
name: "satis_sorumlusu_id_qw_"
}
],
pageSize: 50,
autoLoad: {
params: {
startRow: 0,
fetchCount: 50
}
}
// proxy: new Ext.data.HttpProxy({
// })
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [{
id: 'sira_no',
header: 'Sıra No',
width: 50,
sortable: true,
dataIndex: 'sira_no'
},
{
header: 'Şube',
width: 150,
sortable: true,
dataIndex: 'branch_id_qw_'
},
{
header: 'Firma',
width: 250,
sortable: true,
dataIndex: 'firma'
},
{
header: 'Sevk Adresi',
width: 150,
sortable: true,
hidden: true,
dataIndex: 'sevk_adres'
},
{
header: 'Malzeme Adı',
width: 200,
sortable: true,
hidden: true,
dataIndex: 'malzeme'
},
{
header: 'Grup',
width: 100,
sortable: true,
dataIndex: 'group_id_qw_'
},
{
header: 'Kategori',
width: 100,
sortable: true,
dataIndex: 'kategori_id_qw_'
},
{
header: 'Alt Kategori',
width: 100,
sortable: true,
dataIndex: 'alt_kategori_id_qw_'
},
{
header: 'Vade (gün)',
width: 80,
sortable: true,
dataIndex: 'vade'
},
{
header: 'Birim',
width: 50,
sortable: true,
hidden: true,
dataIndex: 'birim_tip_qw_'
},
{
header: 'Miktar',
width: 80,
sortable: true,
hidden: true,
dataIndex: 'miktar'
},
{
header: 'Kg',
width: 80,
sortable: true,
dataIndex: 'kg'
},
{
header: 'Birim Fiyat',
width: 80,
sortable: true,
dataIndex: 'birim_fiyat'
},
{
header: 'Para Birimi',
width: 50,
sortable: true,
dataIndex: 'para_birim_qw_'
},
{
header: 'Net Tutar',
width: 80,
sortable: true,
dataIndex: 'net_tutar'
},
{
header: 'İrsaliye Tarihi',
width: 100,
sortable: true,
hidden: true,
dataIndex: 'irsaliye_dt'
},
{
header: 'İrsaliye No',
width: 100,
sortable: true,
hidden: true,
dataIndex: 'irsaliye_no'
},
{
header: 'Fatura Tarihi',
width: 100,
sortable: true,
hidden: true,
dataIndex: 'fatura_dt'
},
{
header: 'Fatura No',
width: 100,
sortable: true,
hidden: true,
dataIndex: 'fatura_no'
},
{
header: 'Şehir',
width: 120,
sortable: true,
dataIndex: 'sehir_id_qw_'
},
{
header: 'İlçe',
width: 120,
sortable: true,
dataIndex: 'ilce_id_qw_'
},
{
header: 'Satış Sorumlusu',
width: 200,
sortable: true,
dataIndex: 'satis_sorumlusu_id_qw_'
}
],
viewConfig: {
forcefit: true
},
//resizable: true,
width: function() {
$("#aciklama").width();
$(document).ready(function() {
$(".slide-left").click(function() {
Width: $("#aciklama").width();
})
$(".slide-right").click(function() {
Width: $("#aciklama").width() - 334;
})
})
},
height: $("#aciklama").height(),
frame: true,
tbar: new Ext.PagingToolbar({
pageSize: 50,
store: store,
displayInfo: true
})
});
grid.render('aciklama');
I'm coming from Twitter Bootstrap into ExtJS and unsure how to use which components in order to have a "row" which displays as many containers across the screen as will fit and then wrap them down.
Green boxes are where I would like to move the 2 grids:
Ext.onReady(function(){
Ext.define('Test', {
extend: 'Ext.data.Model',
fields: [
'created',
'name'
]
});
var testStore = Ext.create('Ext.data.Store', {
model: 'Test',
data: [
{
name: 'Do Something To Something Else',
created: 'Wednesday'
},
{
name: 'Do Another Thing To Another Thing',
created: 'Thursday'
}
]
});
var activeTasksApplet = Ext.create('Ext.panel.Panel', {
title: 'Active Tasks',
width: 350,
height: 200
});
var testsGrid = Ext.create('Ext.grid.Panel', {
store: testStore,
width: 400,
height: 200,
title: 'Tests',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
}
]
});
var pageContents = Ext.create('Ext.container.Viewport', {
layout: 'border',
defaults: {
collapsible: false,
split: true,
bodyStyle: 'padding:15px'
},
items: [
{
title: 'Header',
region: 'north',
height: 120,
minSize: 75,
maxSize: 150,
cmargins: '5 0 0 0'
},
{
title: 'Panels',
region: 'center',
margins: '5 0 0 0',
items: [
testsGrid,
{
title: 'Active Tasks',
margins: '5 0 0 0',
width: 400,
height: 200,
items: Ext.create('Ext.grid.Panel', {
store: testStore,
width: 400,
height: 200,
title: 'Tests',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
}
]
})
},
Ext.create('Ext.grid.Panel', {
store: testStore,
width: 400,
height: 200,
title: 'Tests',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
}
]
}),
{
title: 'Active Tasks',
margins: '5 0 0 0',
},
{
title: 'Active Tasks',
margins: '5 0 0 0',
}
]
}]
});
});
Update:
Okay, this time for the correct solution.
Use the column layout, it treats the items as divs with float
Docs: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.layout.container.Column
Fiddle: http://jsfiddle.net/8Pqtx/8/
Ext.onReady(function(){
Ext.define('Test', {
extend: 'Ext.data.Model',
fields: [
'created',
'name'
]
});
var testStore = Ext.create('Ext.data.Store', {
model: 'Test',
data: [
{
name: 'Do Something To Something Else',
created: 'Wednesday'
},
{
name: 'Do Another Thing To Another Thing',
created: 'Thursday'
}
]
});
var activeTasksApplet = Ext.create('Ext.panel.Panel', {
title: 'Active Tasks',
height: 200
});
var testsGrid = Ext.create('Ext.grid.Panel', {
store: testStore,
width: 300,
height: 200,
title: 'Tests',
columns: [
{
text: 'Name',
sortable: false,
hideable: false,
dataIndex: 'name'
}
]
});
var pageContents = Ext.create('Ext.container.Viewport', {
layout: 'border',
defaults: {
collapsible: false,
split: true,
bodyStyle: 'padding:15px'
},
items: [
{
title: 'Header',
region: 'north',
height: 120,
minSize: 75,
maxSize: 150,
cmargins: '5 0 0 0'
},
{
title: 'Panels',
layout: 'column',
width: 500,
region: 'center',
items: [
testsGrid,
{
title: 'Active Tasks',
width: 200,
height: 200,
items: Ext.create('Ext.grid.Panel', {
store: testStore,
height: 200,
title: 'Tests',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
}
]
})
},
Ext.create('Ext.grid.Panel', {
store: testStore,
width: 300,
height: 200,
title: 'Tests',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
}
]
}),
{
title: 'Active Tasks',
width: 100
},
{
title: 'Active Tasks',
width: 100
}
]
}]
});
});
I have a problem rendering data store grid on window modal.
here's the code on data.store :
var list_pp = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
model: 'list_pp',
proxy: {
type: 'ajax',
api: {
read: pp_get_url,
create: pp_set_url,
update: pp_up_url,
destroy: pp_del_url
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
},
writer: {
type: 'json',
writeAllFields: true,
root: 'data'
}
},
//autoLoad: false,
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
}
}
});
here's the code that render on some page :
var grid_pp_list = Ext.create('Ext.grid.Panel',
{
width: '100%',
frame: false,
loadMask: true,
collapsible: false,
title: 'Detail PP',
store: list_pp,
columns: [
{
header: 'No PP',
width: 130,
sortable: true,
dataIndex: 'doc_no',
xtype: 'templatecolumn',
tpl: '{doc_no}<br/>{pp_id}/{sifat}<br/>'
}, {
header: 'Tgl.',
width: 100,
sortable: true,
dataIndex: 'pp_date',
xtype: 'datecolumn',
format:'y-m-d'
}, {
header: 'SBU Pemesan',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
},{
header: 'Validasi',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
},{
header: 'Action',
xtype: 'actioncolumn',
width: 60,
sortable: false,
menuDisabled: true,
xtype: 'templatecolumn',
tpl: 'Detail'
},{
header: 'Modified by',
width: 120,
dataIndex: 'modified_by',
sortable: true,
xtype: 'templatecolumn',
tpl: '<i class="icon-user"></i>{modified_by}'
},{
header: 'Modified Date',
width: 120,
sortable: true,
dataIndex: 'modified_date',
xtype: 'datecolumn',
format:'y-m-d H:m:s'
}]
here's the code on window modal :
var modal_pp = Ext.create('Ext.grid.Panel',
{
width: '100%',
frame: false,
loadMask: true,
collapsible: false,
title: 'Modal PP',
store: list_pp,
columns: [
{
header: 'No PP',
width: 130,
sortable: true,
dataIndex: 'doc_no',
xtype: 'templatecolumn',
tpl: '{doc_no}<br/>{pp_id}/{sifat}<br/>'
}, {
header: 'Tgl.',
width: 100,
sortable: true,
dataIndex: 'pp_date',
xtype: 'datecolumn',
format:'y-m-d'
}, {
header: 'SBU Pemesan',
width: 160,
sortable: true,
dataIndex: 'org_order',
xtype: 'templatecolumn',
tpl: '{org_order}'
}],
dockedItems:
[{
xtype: 'pagingtoolbar',
store: list_pp, // same store GridPanel
dock: 'bottom',
displayInfo: true
}]
});
here's generate trigger button trigger for modal window:
text: 'Generate',
iconCls: 'icon-add',
handler: function(){
if (!win) {
win = Ext.widget('window', {
closeAction: 'hide',
width: 1000,
height: 620,
minWidth: 300,
minHeight: 300,
layout: 'fit',
resizable: true,
modal: true,
items: modal_pp
});
}
win.show();
}
in rendering page everything is fine, but in window modal i can't render data store. please if anyone can give a guide or help i will be really appreciate it.
Remove width attributes from the modal grid. You cant specify width in % and if your containing parent has fit layout it doesn't matter anyway.
Wrap items in an array: items: [modal_pp]
I'm trying to put a Grid (Ext.grid.GridPanel) object inside a Tab .
This is the code:
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
autoDestroy: true,
reader: reader,
data: xg.dummyData
}),
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'},
{header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: 'Change', dataIndex: 'change'},
{header: '% Change', dataIndex: 'pctChange'},
// instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype
{
header: 'Last Updated', width: 135, dataIndex: 'lastChange',
xtype: 'datecolumn', format: 'M d, Y'
}
]
}),
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling',
iconCls: 'icon-grid'
});
this.tabs = new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
dockedItems: [
{
xtype:'toolbar',
title:'Hello World'
}],
tabBar: {
ui: 'light',
layout: {
pack: 'left'
}
},
items: [
{
cls:'hello',
id:'tab1',
html : '<a>hello</a>',
title:'Monitor'
}, {
cls:'world',
id:'tab2',
xtype: 'map',
html : '<a>hello world</a>',
title:'Map'
}, {
cls:'world',
id:'tab3',
html : '<a>hello world</a>',
dockedItems:grid
}]
});
When I load the page there's no error, but the grid is not shown.
The grid is not a docked item (that's for toolbars and other things that should stick to one side of a container). If you want the grid to take up the entire tab, just add it directly as an item to the TabPanel and it will become the full tab:
items: [
{
cls:'hello',
id:'tab1',
html : '<a>hello</a>',
title:'Monitor'
}, {
cls:'world',
id:'tab2',
xtype: 'map',
html : '<a>hello world</a>',
title:'Map'
},
grid ]
I have made a layout of tab panel with extjs designer but its not displaying anything if I am running it.
Here's the code please help me :
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'extjs/s.gif';
Ext.onReady(function(){
MyTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
width: 800,
height: 500,
title: 'Ledger',
itemId: 'ledger_tab',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'Ledger',
autoScroll: true,
items: [
{
xtype: 'editorgrid',
title: 'Ledger',
store: 'store',
height: 150,
footer: true,
stripeRows: true,
header: true,
loadMask: true,
id: 'leg_grid_up',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'textfield'
}
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'datefield'
}
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'checkbox',
boxLabel: 'BoxLabel'
}
}
],
tbar: {
xtype: 'toolbar',
height: 50,
items: [
{
xtype: 'container',
layout: 'column',
width: 794,
height: 43,
items: [
{
xtype: 'spacer',
width: 588,
height: 18
},
{
xtype: 'spacer',
width: 200,
height: 18
},
{
xtype: 'datefield'
}
]
}
]//toolbar items
}
},
{
xtype: 'container',
height: 70
},
{
xtype: 'editorgrid',
title: 'Ledger',
height: 150,
id: 'leg_grid_down',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'textfield'
}
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'datefield'
}
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'checkbox',
boxLabel: 'BoxLabel'
}
}
],
tbar: {
xtype: 'toolbar'
}
},
{
xtype: 'container'
}
]//ledger panel
}
];//this
MyTabPanelUi.superclass.initComponent.call(this);
}
});
});
});
You need to render it onto some HTML tag. You can use the renderTo property to render the panel onto the body tag or some div tag with an id set.
Let's assume you are planning to render to the body tag. You need to add renderTo : Ext.getBody(). The Ext.getBody method simply returns the body tag.
MyTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
width: 800,
height: 500,
renderTo: Ext.getBody(),
.
.
.
You aren't rendering it.
Try rendering it to Ext.getBody():
MyTabPanelUi.render(Ext.getBody());