PDA

View Full Version : fit some panels vertically



jamesdesouza
20 Aug 2014, 1:42 AM
Hi all,

I have a viewport container and its 2 regions, center and south.
Inside center region, there is a accordion panel and its 2 items that has a grid panel each.
Beside, collapsible south region has a grid, too.

I just need to fit every panel (regions, accordion and grids) vertically.

All of my js code is below

/// <reference path="/ExtJS/ext-debug.js" />
/// <reference path="/Assets/js/defines.js" />
/// <reference path="/Assets/js/class.js" />
Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '/ExtJS/src/ux');
Ext.require(['*']);
Ext.require([
'Ext.ux.grid.FiltersFeature'
]);
Ext.onReady(function () {
Ext.QuickTips.init();
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));


// Kampanyalar
var winKampanya = Ext.create('Ext.window.Window', {
title: 'Kampanya',
id: 'winKampanya',
icon: getIcon('table'),
width: 320,
bodyStyle: 'padding: 5px;',
closable: false,
items: [new Ext.form.FormPanel({
id: 'formKampanya',
fileUpload: true,
width: 300,
frame: false,
autoHeight: true,
bodyStyle: 'padding: 5px;',
labelWidth: 50,
items: [{
id: 'frmKampanyaId',
xtype: 'hiddenfield',
name: 'frmKampanyaId',
value: '0'
}, {
id: 'frmKampanya',
xtype: 'textfield',
name: 'frmKampanya',
emptyText: 'Kampanya ad? giriniz...',
width: 290
},
desmer.combo('Tip'),
desmer.combo('Numara'), {
xtype: 'fileuploadfield',
id: 'frmImport',
emptyText: 'Bir excel dosyas? seçiniz...',
hideLabel: true,
name: 'frmImport',
width: 290
}],
buttons: [
desmer.button('Kaydet', 'saveKampanya', 'table_save'),
desmer.button('Temizle', 'resetKampanya', 'table_refresh'),
desmer.button('Kapat', 'closeKampanya', 'cross')
]
})]
})
var gridKampanyalar = Ext.create('Ext.grid.Panel', {
id: 'gridKampanyalar',
title: 'Kampanyalar',
autoWidth: true,
loadKampanyalar: function () {
this.store.load();
return this;
},
store: Ext.create('Ext.data.JsonStore', {
id: 'storeKampanyalar',
fields: [
{ name: 'id', type: 'int' },
{ name: 'durum', type: 'bool' },
{ name: 'excel', type: 'string' },
{ name: 'kampanya', type: 'string' },
{ name: 'tin', type: 'string' },
{ name: 'zaman', type: 'date' },
{ name: 'guncellenme', type: 'date' },
{ name: 'sonlanma', type: 'date' },
{ name: 'cToplam', type: 'int' },
{ name: 'cArama', type: 'int' },
{ name: 'cBasarili', type: 'int' },
{ name: 'cBasarisiz', type: 'int' },
{ name: 'cHedef', type: 'int' },
{ name: 'oArama', type: 'float' },
{ name: 'oBasari', type: 'float' },
{ name: 'oHedef', type: 'float' }
],
autoLoad: true,
proxy: {
type: 'ajax',
url: '/Ajax.aspx?islem=ListeKampanya',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: 'datas'
}
},
listeners: {
load: function (th, recs) {
var rec = Ext.Array.findBy(recs, function (item, index) {
return item.data.durum;
})
if (rec) {
var grid = Ext.getCmp('gridNumaralar');
grid.loadAramalar(rec.get('id'));
grid.setTitle(rec.get('kampanya'))
}
}
}
}),
multiSelect: false,
viewConfig: {
emptyText: 'Hiçbir data yok!',
getRowClass: function(record, index, rowParams, store) {
return record.get('durum') ? 'activeCampaign' : '';
}
},
loadMask: true,
features: [{
ftype: 'filters',
local: true,
menuFilterText: "Filtre"
}],
columns: [{
text: 'ID',
dataIndex: 'id',
width: 35,
hidden: true,
filter: { type: 'string' }
}, {
text: 'Durum',
dataIndex: 'durum',
width: 60,
hidden: true,
filter: { type: 'bool' }
}, {
text: 'Excel',
dataIndex: 'excel',
width: 60,
hidden: true,
filter: { type: 'string' },
renderer: function (val) {
return Ext.String.format('<a href="{0}" target="_blank">Dosya</a>', val);
}
}, {
text: 'Kampanya',
flex: 1,
dataIndex: 'kampanya',
filter: { type: 'string' }
}, {
text: 'Numara',
width: 120,
dataIndex: 'tin',
filter: { type: 'string' }
}, {
text: 'Tarihler',
width: 300,
columns: [
{
text: 'Ba?lang?ç',
flex: 1,
dataIndex: 'zaman',
filter: { type: 'date' },
renderer: desmer.renderers.date
}, {
text: 'Güncelleme',
flex: 1,
dataIndex: 'guncellenme',
filter: { type: 'date' },
renderer: desmer.renderers.date
}, {
text: 'Sonlanma',
flex: 1,
dataIndex: 'sonlanma',
filter: { type: 'date' },
renderer: desmer.renderers.date
}
]
}, {
text: '?statistikler',
width: 500,
columns: [
{
text: 'Toplam',
flex: 1,
dataIndex: 'cToplam',
filter: { type: 'int' }
}, {
text: 'Arama',
flex: 1,
dataIndex: 'cArama',
filter: { type: 'int' }
}, {
text: 'Ba?ar?l?',
flex: 1,
dataIndex: 'cBasarili',
filter: { type: 'int' }
}, {
text: 'Ba?ar?s?z',
flex: 1,
dataIndex: 'cBasarisiz',
filter: { type: 'int' }
}, {
text: 'Hedef',
flex: 1,
dataIndex: 'cHedef',
filter: { type: 'int' }
}
]
}, {
text: 'Oranlar',
width: 300,
columns: [
{
text: 'Arama',
flex: 1,
dataIndex: 'oArama',
filter: { type: 'float' }
}, {
text: 'Ula?ma',
flex: 1,
dataIndex: 'oBasari',
filter: { type: 'float' }
}, {
text: 'Hedef',
flex: 1,
dataIndex: 'oHedef',
filter: { type: 'float' }
}
]
}, {
xtype: 'actioncolumn',
width: 50,
items: [
desmer.actCol('Düzenle', 'acEditCampaign', 'table_edit'),
desmer.actCol('Sil', 'acDeleteCampaign', 'table_delete')
]
}],
listeners: {
itemdblclick: function (th, rec, item, index, e) {
if (rec.data.durum) Ext.Msg.alert('Durum', 'Seçti?iniz kay?t zaten aktif durumda.');
else {
Ext.Msg.confirm('Onay', rec.data.kampanya + ' kampanyas?n? aktive etmek istedi?inize emin misiniz?', function (btn, text) {
if (btn == 'yes') {
postData('ActivateKampanya', { KampanyaId: rec.data.id }, function (response) {
var ret = JSON.parse(response.responseText)
if (ret.success) {
Ext.Msg.alert('Sonuç', ret.message);
th.getStore().load();
}
})
}
});
}


}
},
tbar: [
desmer.button('Ekle', 'tbAddCampaign', 'table_add'),
'->',
desmer.xlsExport()
]
})


// Aramalar
var gridNumaralar = Ext.create('Ext.grid.Panel', {
id: 'gridNumaralar',
title: 'Numaralar',
autoWidth: true,
loadAramalar: function (campaign) {
this.store.load({
params: {
kampanya: campaign
}
});
},
store: Ext.create('Ext.data.JsonStore', {
fields: [
{ name: 'kampanya', type: 'int' },
{ name: 'id', type: 'int' },
{ name: 'numara', type: 'string' },
{ name: 'isim', type: 'string' },
{ name: 'aramaSaati', type: 'date' },
{ name: 'durum', type: 'string' },
{ name: 'aramaSayisi', type: 'int' }
],
autoLoad: false,
proxy: {
type: 'ajax',
url: '/Ajax.aspx?islem=Liste',
actionMethods: {
read: 'POST'
},
reader: {
type: 'json',
root: 'datas'
}
}
}),
multiSelect: false,
viewConfig: {
emptyText: 'Hiçbir data yok!'
},
loadMask: true,
features: [{
ftype: 'filters',
local: true,
menuFilterText: "Filtre"
}],
columns: [{
text: 'Kampanya',
dataIndex: 'kampanya',
width: 50,
hidden: true,
filter: { type: 'string' }
}, {
text: 'ID',
dataIndex: 'id',
width: 50,
hidden: true,
filter: { type: 'string' }
}, {
text: 'Numara',
width: 150,
dataIndex: 'numara',
filter: { type: 'string' }
}, {
text: '?sim',
flex: 1,
dataIndex: 'isim',
filter: { type: 'string' }
}, {
text: 'Arama Saati',
width: 150,
dataIndex: 'aramaSaati',
filter: true,
renderer: function (val) {
return Ext.Date.format(new Date(val), 'd m Y H:i:s')
}
}, {
text: 'Durum',
width: 100,
dataIndex: 'durum',
filter: { type: 'list' }
}, {
text: 'Arama',
width: 80,
dataIndex: 'aramaSayisi',
filter: { type: 'int' }
}, {
xtype: 'actioncolumn',
width: 50,
items: [
desmer.actCol('Sil', 'acDeleteCall', 'vcard_delete')
]
}],
tbar: [
'->',
desmer.xlsExport()
]
})




var accKampanyalar = Ext.create('Ext.panel.Panel', {
header: false,
border: false,
autoHeight: true,
flex: 1,
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
hideCollapseTool: true
},
items: [gridKampanyalar,gridNumaralar]
});




var centerRegion = {
region: 'center',
id: 'centerRegion',
flex: 1,
items: [accKampanyalar]
}


var southRegion = {
region: 'south',
id: 'southRegion',
title: 'Aktif Aramalar',
collapsible: true,
collapsed: true,
flex: 1,
height: 200,
items: []
}


// Viewport
Ext.create('Ext.container.Viewport', {
layout: 'border',
split: true,
items: [southRegion, centerRegion]
});


});

jamesdesouza
20 Aug 2014, 2:53 AM
resize event solved my problem...var centerRegion = { region: 'center', id: 'centerRegion', flex: 1, items: [accKampanyalar], listeners: { resize: function (th, nw, nh, ow, oh) { accKampanyalar.setSize(nw, nh); } } }