PDA

View Full Version : Windows in the center region of Viewport



SwetaMishra
24 Nov 2010, 11:15 PM
var mapping_UEST;
var mapping_GL;
var stdElem;
var UserElemStore;
var tempUserStore;
var tree;
var store_UEST;
var mappingGLform ;
Ext.onReady(function() {
Ext.QuickTips.init();
var selEle = new Ext.form.Checkbox(
{
name : 'selEle'
}
);
var userElementRecord = Ext.data.Record.create([
{
id : 'id',
name : 'name'
},
{
name : 'id'
},
{
name : 'UserElements',
type : 'string'
}
]);

UserElemStore = new Ext.data.JsonStore({
url : 'LoadData.action?storeVal=UEle',
remoteSort : false,
root : 'list',
idProperty : 'userEle',
fields : ['elements'],
autoLoad : false,
listeners : {
load : {
fn : function() {
var noOfRecords = UserElemStore.getCount();
var records = UserElemStore.getRange();
for (var i = 0; i < records.length; i++)
tempUserStore.add(records[i]);
viewportMenu.doLayout();
}
}
}
});

tempUserStore = new Ext.data.JsonStore({
url : 'mappingScreen.action?act=dummy',
root : 'list',
fields : ['elements'],
autoLoad : true,
idProperty : 'userEle'

});

var xg = Ext.grid;
var sm = new xg.CheckboxSelectionModel();

var UserElemGrid = new xg.GridPanel({
store : tempUserStore,
cm : new xg.ColumnModel({
defaults : {
width : 120,
sortable : true
},
columns : [sm, {
header : '<b>User Elements</b>',
dataIndex : 'elements',
width : 400
}]
}),
sm : sm,
columnLines : true,
width : 300,
height : 700,
frame : true
});

var mappingRecord = Ext.data.Record.create([{
name : 'id'
}, {
name : 'UserElements',
type : 'string'
}, {
name : 'StdTaxElem',
type : 'string'
}

]);

var proxy = new Ext.data.HttpProxy({
api : {
// load : 'mappingScreen.action?act=readMapHist',
read : 'mappingScreen.action?act=readMapHist',
update : undefined,
destroy : 'mappingScreen.action?act=delete',
create : undefined
}
});

var reader = new Ext.data.JsonReader({
totalProperty : 'total',
successProperty : 'success',
idProperty : 'id',
restful : true,
id : 'user',
messageProperty : 'message' // <-- New "messageProperty"
// meta-data
}, mappingRecord);

var writer = new Ext.data.JsonWriter({
encode : true,
writeAllFields : true,
idProperty : 'id'
});

var editor = new Ext.ux.grid.RowEditor({
saveText : 'update'
});

store_UEST = new Ext.data.JsonStore({
proxy : proxy,
reader : reader,
writer : writer, // <-- plug a DataWriter into the store just
// as you would a Reader
autoSave : false,
batch : true// <-- false would delay executing create, update,
// destroy requests until specifically told to do so
// with some [save] buton.
,
remoteSort : false,
root : 'list',
idProperty : 'id',
fields : ['id', 'UserElements', 'StdTaxElem'],
autoLoad : true
});

var tree_grid = new Ext.grid.GridPanel({
id:'tree_mapping',
width:450,
height:700
}
);


// Typical Store collecting the Proxy, Reader and Writer together.
var grid_mapping = new Ext.grid.GridPanel({
id : 'grid_mapping',
store : store_UEST,
width : 450,
height : 700,
columns : [{
header : "User Elements",
width : 150,
sortable : true,
dataIndex : 'UserElements',
mode : 'local',
editor : {
xtype : 'textfield',
allowBlank : true
}
}, {
header : "Standard Taxonomy Elements",
width : 200,
mode : 'local',
sortable : true,
dataIndex : 'StdTaxElem',
editor : {
xtype : 'textfield',
allowBlank : false
}
}

],
viewConfig : {
forcefit : true
},
plugins : [editor],
height : 700,
width : 450,
frame : true,
tbar : [{
cls : 'x-btn-text-icon',
icon : 'images/deleteIcon.png',
text : 'Remove Mapping',
encodeDelete : true,
handler : function() {
editor.stopEditing();
var s = grid_mapping.getSelectionModel()
.getSelections();
UserElemGrid.getStore().reload();

for (var i = 0, r; r = s[i]; i++) {
store_UEST.proxy.setApi('destroy',
'mappingScreen.action?act=delete');
store_UEST.remove(r);
Ext.getCmp('mapElement').enable();
// tempUserStore.add(s[i].get('UserElements'));
UserElemGrid.getStore().insert(0,
new userElementRecord({
elements : s[i].get('UserElements')
}));
}
tempUserStore.reload();

if(tempUserStore.getCount()>0)
{
Ext.getCmp('genDoc').disable();

}
// UserElemGrid.getStore().reload();
}
}, {
// cls: 'x-btn-text-icon',
icon : 'images/save-icon.png',
text : 'Save All Modifications',
handler : function() {
store_UEST.proxy.setApi('create',
'mappingScreen.action?act=saveMapping');
store_UEST.save();
Ext.Msg.alert('Status',
'All changes have been commited');
}
}]
});

tree = new Ext.tree.TreePanel({

renderTo : mappingGLform,
height : 403,
width : 335,
useArrows : true,
dragConfig : false,
draggable : false,
autoScroll : true,
enableTabScroll:true,
animate : true,
enableDD : false,
trackMouseOver : true,
//containerScroll : true,
rootVisible : false,
frame : true,
hidden : true,
root : {
nodeType : 'async'
},
// auto create TreeLoader
dataUrl : 'json/gl.json',
listeners : {'checkchange' : function(node, checked) {
if (checked) {
// node.getUI().addClass('complete');
} else {
node.getUI().removeClass('complete');
}
}
}

});
//tree.setAutoScroll();
tree.filter = new Ext.ux.tree.TreeFilterX(tree);
tree.getRootNode().expand(true);

UserElewindow = new Ext.Window({
title : 'User Elements',
renderTo : document.body,
draggable : false,
layout : 'fit',
plain : true,
closable : false,
x : '55',
y : '53px',
height : 495,
width : '350px',
stateful: true,
flex: 1,
align: 'left',
pack: 'start',
items : [UserElemGrid],
tbar:['Search For:',{
xtype:'trigger'
,triggerClass:'x-form-clear-trigger'
,onTriggerClick:function() {
this.setValue('');
tempUserStore.clearFilter();
}
,id:'filter'
,enableKeyEvents:true
,listeners:{
keyup:{buffer:150, fn:function(field, e) {
if(Ext.EventObject.ESC == e.getKey()) {
field.onTriggerClick();
}
else {
var records=new Ext.util.MixedCollection;
var record= tempUserStore.getRange();

var pattern=document.getElementById('filter').value;
var str="&";
var strs=pattern.search(str);
if(strs!=-1)
{
pattern=pattern.replace(str,"&amp;");

}



tempUserStore.clearFilter();
records = tempUserStore.filterBy(function(record,id){
var elements=Ext.util.Format.lowercase(record.get('elements'));


return Ext.util.Format.substr(elements, 0,pattern.length)== Ext.util.Format.lowercase(pattern);

});

}
}}
}
}]
});
// UserElewindow.show();

mappingGLform = new Ext.FormPanel({
id : 'mappingGL',
renderTo : mapping_GL,
items : [tree],
buttons : [{
id:'genDoc',
icon : 'images/generateDocs.png',
disabled:true,
text : 'Generate Documents',
handler : function(f, a) {
store_UEST.proxy.setApi('create','mappingScreen.action?act=insertMapping');
store_UEST.save();
store_UEST.commitChanges();
Ext.Msg.alert('Status', 'Files Generated !!!',
function(btn, text) {
if (btn == 'ok') {
UploadWin.show();
UserElewindow.hide();
mapping_GL.hide();
mapping_UEST.hide();
}
}

);
}
}, {

id:'mapElement',
text : 'Map Elements',
disabled:false,
handler : function() {

var msg = '', selNodes = tree.getChecked();

if (selNodes.length > 1) {
Ext.Msg.alert('Warning','Select only one GLOBAL LEDGER element!!!');
} else {
Ext.each(selNodes, function(node) {
msg += node.text;
});
var sm = UserElemGrid.getSelectionModel().getSelections();
var usrElem = '';
if (msg == '') {
Ext.Msg.alert('Warning','Select atleast one GLOBAL LEDGER element !!!');
} else {
if (sm == '') {
Ext.Msg.alert('Warning ','Select atleast one User Element !!!');
}else {
for (i = 0; i <= sm.length - 1; i++)
{
usrElem = usrElem + ',' + sm[i].get('elements');
grid_mapping.getStore().insert(
grid_mapping.getStore().getCount(),
new mappingRecord({
UserElements : sm[i].get('elements'),StdTaxElem : msg})
);
}
tempUserStore.remove(sm);
if(tempUserStore.getCount()==0)
Ext.getCmp('genDoc').enable();
Ext.getCmp('mapElement').disable();
toggleCheck(tree.root, false);
// Pop For Mapped Elements
// Ext.Msg.show({
// title : 'Mapped Elements',
// msg : msg + '--->' + usrElem,
// icon : Ext.Msg.INFO,
// minWidth : 200,
// buttons : Ext.Msg.OK
// });
}
}

}
}
}]
});

function toggleCheck(node, isCheck) {
if (node) {
var args = [isCheck];
node.cascade(function() {
c = args[0];
this.ui.toggleCheck(c);
this.attributes.checked = c;
}, null, args);
}
}

mapping_GL = new Ext.Window({
renderTo : document.body,
title : 'GLOBAL LEDGER',
draggable : false,
layout : 'fit',
plain : true,
closable : false,
x : '405px',
y : '53px',
height : 495,
width : '350px',
stateful: true,
flex: 1,
align: 'center',
pack: 'start',
items : [mappingGLform],
tbar:['Search For:', {
xtype:'trigger'
,triggerClass:'x-form-clear-trigger'
,onTriggerClick:function() {
this.setValue('');
tree.filter.clear();
}
,id:'filter'
,enableKeyEvents:true
,listeners:{
keyup:{buffer:150, fn:function(field, e) {
if(Ext.EventObject.ESC == e.getKey()) {
field.onTriggerClick();
}
else {
var val = this.getRawValue();
var re = new RegExp('.*' + val + '.*', 'i');
tree.filter.clear();
tree.filter.filter(re, 'text');
}
}}
}
}]
});
// mapping_GL.show();
mapping_UEST = new Ext.Window({
renderTo : document.body,
title : 'Mapping History',
layout : 'fit',
plain : true,
closable : false,
draggable : false,
//autoHeight : true,
//autoWidth:true,
x : '755px',
y : '53px',
//anchor:'35%-35%',
height : 495,
width : '350px',
items : [grid_mapping],
stateful: true,
flex: 1,
align: 'right',
pack: 'start'
});
// mapping_UEST.show();


});


I am showing this three windows in the center region of Viewport when user uploads a file.It's working well on my PC
but the position of the three windows is not same when i test it on some another monitor ....so wat can i do to make it uniform for all .

Condor
25 Nov 2010, 7:05 AM
These are fixed windows? Then why use windows at all? Why not make the center region layout:'absolute' and use panels as items that are configured with baseCls:'x-window' to make them look like windows?

ps. x, y, width and height need to be numbers!

x : 55,
y : 53,
height : 495,
width : 350,
stateful: false,

jay@moduscreate.com
25 Nov 2010, 4:56 PM
These are fixed windows? Then why use windows at all? Why not make the center region layout:'absolute' and use panels as items that are configured with baseCls:'x-window' to make them look like windows?

ps. x, y, width and height need to be numbers!

x : 55,
y : 53,
height : 495,
width : 350,
stateful: false,

I don't have a clue why people use windows and try to render them inside a container. Windows are meant to FLOAT on top of the application.