Results 1 to 3 of 3

Thread: Windows in the center region of Viewport

  1. #1

    Default Windows in the center region of Viewport

    Code:
    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 .
    Last edited by Condor; 25 Nov 2010 at 7:03 AM. Reason: Please post using [CODE] tags!

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    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!
    Code:
    x : 55,
    y : 53,
    height : 495,
    width : 350,
    stateful: false,

  3. #3
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Quote Originally Posted by Condor View Post
    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!
    Code:
    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.

Similar Threads

  1. Replies: 1
    Last Post: 4 Nov 2010, 12:43 AM
  2. Load content to a Viewport's Center Region
    By pgraju in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 8 Sep 2008, 6:53 AM
  3. Viewport: further customizing the 'center' region
    By ngd in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 13 Apr 2008, 9:17 PM
  4. Viewport Question - Center Region Width
    By thething in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 25 Feb 2008, 2:26 AM
  5. ViewPort center region
    By keztrel in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 29 Nov 2007, 7:59 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •