1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    2
    Vote Rating
    0
    prachigupta is on a distinguished road

      0  

    Default Unanswered: combobox value is not diaplaying on top on second trigger

    Unanswered: combobox value is not diaplaying on top on second trigger


    hi i m using the below code .Kindly help me.


    on error console i m getting dom is undefined on second click of add button.


    Rhub.ShortCodeTranslation = function(){



    this.Form = function(e){
    Ext.define('network', {
    extend: 'Ext.data.Model',
    fields:[
    {name: 'Network_ID',mapping:'Network_ID',type: 'string'},
    {name: 'Network_NAME',mapping:'Network_NAME',type: 'string'}


    ]
    });
    this.F = new Ext.ux.FormBlind(Ext.getCmp('shortcodetranslation-tab'),{

    labelWidth:100,
    width:310,
    defaults:{width:200},
    waitMsgTarget:true,
    defaultType:'textfield',
    items: [{
    xtype:'combo',
    fieldLabel:'Network Name',
    name:'Network_Id',
    id:'Network_Id',
    allowBlank:false,

    store: Ext.create('Ext.data.Store', {
    model: 'network',
    autoLoad: true,
    proxy: {
    type: 'ajax',
    url: 'ShortCodeTranslation?action=network'


    }
    }),
    anchor:'100%',
    displayField:'Network_NAME',
    valueField:'Network_ID',
    hiddenName:'Network_ID',
    editable:false,
    typeAhead:true,
    queryMode: 'local',

    emptyText:'Select Network Name',
    selectOnFocus:true,
    allowblank:false


    },{
    xtype:'combo',
    fieldLabel:'Subscription Type',
    name:'Sub_Type',
    id:'Sub_Type',
    allowBlank:false,
    store: new Ext.data.SimpleStore({
    autoLoad:true,
    fields:[ {name:'Account_ID'}, {name:'Account_NAME'} ],
    data: [['1', 'Prepaid'], ['2', 'Postpaid']]
    }),
    anchor:'100%',

    displayField:'Account_NAME',
    valueField:'Account_NAME',
    hiddenName:'Account_NAME',
    editable:false,
    typeAhead:true,
    mode:'local',
    triggerAction:'all',
    emptyText:'Select Subscription Type',
    selectOnFocus:true
    },{
    xtype: 'textfield',
    fieldLabel: 'Short Code',
    anchor: '100%',
    name: 'ShortCode',
    id:'ShortCode' ,
    allowblank:false
    },
    {
    xtype: 'textfield',
    fieldLabel: 'Translation ShortCode',
    anchor: '100%',
    name: 'TrancCode',
    id:'TrancCode' ,
    allowblank:false
    }],
    buttons:[{
    text:'Cancel',
    iconCls:'cancel',
    scope:this,
    handler:function(){
    this.F.dismiss();this.Grid.store.loadPage(1);

    }
    },{
    text:'Save',
    iconCls:'save',
    scope:this,
    handler:function(){

    this.F.getForm().submit({
    url:'ShortCodeTranslation',
    params:{action:'insert'},
    scope:this,
    success:function(form, action){
    var json = Ext.decode(action.response.responseText);
    //var respstatus=Ext.util.JSON.decode(action.response.responseText).status;
    this.F.dismiss();
    this.Grid.store.loadPage(1);
    Ext.Msg.show({
    title:'Information',
    msg:json.status,
    buttons:Ext.Msg.OK,
    modal:false
    });
    },
    failure:function(form, action){
    var json = Ext.decode(action.response.responseText);
    //var respstatus=Ext.util.JSON.decode(action.response.responseText).status;
    Ext.Msg.show({
    title:'Information',
    msg:json.status,
    buttons:Ext.Msg.OK,
    modal:false
    });
    }
    });

    }
    }]
    });
    this.F.show();


    }
    this.Remove = function(){
    var seletionModel = this.Grid.getSelectionModel()
    var sel = this.Grid.getSelectionModel().getSelection() ;
    if(sel[0] == undefined){
    Ext.Msg.show({
    title:'Information',
    msg:'Select any Configuration to delete.',
    buttons:Ext.Msg.OK,
    modal:false
    });
    }else{
    Ext.Msg.show({
    title:'Delete?',
    msg:'Are you sure you want to delete?',
    buttons:Ext.Msg.YESNO,
    modal:false,
    scope:this,
    fn:function(b,t){
    if(b == 'yes'){
    Ext.Ajax.request({
    url:'ShortCodeTranslation',
    params:{action:'delete',Snoel[0].get('Sno'),Network_Idel[0].get('Network_Name'),Sub_Typeel[0].get('Subscriber_Type'),ShortCodeel[0].get('ShortCode'),TrancCodeel[0].get('TranslationCode')},
    method:'POST',
    scope:this,
    success:function(result,request){
    var json = Ext.decode(result.responseText);
    this.Grid.store.remove(sel);
    this.Grid.store.loadPage(1);
    Ext.Msg.show({
    title:'Information',
    msg:json.status,
    buttons:Ext.Msg.OK,
    modal:false
    });
    },
    failure:function(result,request){
    var json = Ext.decode(result.responseText);
    Ext.Msg.show({
    title:'Information',
    msg:json.status,
    buttons:Ext.Msg.OK,
    modal:false
    });
    }
    });
    }else{

    }
    }
    });
    }
    }


    Ext.define('User', {
    extend: 'Ext.data.Model',
    fields:[
    {name: 'Sno',mapping:'Sno',type: 'string'},
    {name: 'Network_Name',mapping:'Network_Name',type: 'string'} ,
    {name: 'Subscriber_Type',mapping:'Subscriber_Type',type: 'string'},
    {name: 'ShortCode',mapping:'ShortCode',type: 'string'} ,
    {name: 'TranslationCode',mapping:'TranslationCode',type: 'string'} ,

    ]
    });


    var ShortcodeStore = Ext.create('Ext.data.Store', {
    autoLoad:true,
    model:User,
    proxy:new Ext.data.HttpProxy({
    root:'userdata',
    totalProperty:'results',
    url: 'ShortCodeTranslation?action=view',
    method:'post',
    reader: {
    type : 'json',
    root : 'userdata',
    totalProperty:'results'
    }


    })
    });
    ShortcodeStore.load();

    this.UserManager_pagbar=new Ext.PagingToolbar({
    pageSize:10,
    store:this.ShortcodeStore,
    displayInfo:true,
    emptyMsg:'No Data Found to Display',
    displayMsg:'Displaying {0}-{1} of {2}',
    enableToggle:true

    });


    this.Grid = new Ext.grid.GridPanel({
    viewConfig:{forceFit:true},
    minColumnWidth:5,
    loadMask: {msg:'Loading Data...'},
    region:'center',
    layout:'fit',
    border:false,
    store:ShortcodeStore,
    columns:[
    {text: 'Sno',sortable:true,dataIndex: 'Sno'},
    {text: 'Network Name',sortable:true,dataIndex: 'Network_Name'},
    {text: 'Subscriber Type',sortable:true,dataIndex: 'Subscriber_Type'},
    {text: 'ShortCode',sortable:true,dataIndex: 'ShortCode'},
    {text: 'TranslationCode',sortable:true,dataIndex: 'TranslationCode'}
    ],
    tbar:[{
    text:'Add',
    iconCls:'add',
    scope:this,
    handler:this.Form


    },{
    text:'Delete',
    iconCls:'delete',
    scope:this,
    handler:this.Remove
    }
    ]



    });


    this.Tab = new Ext.Panel({
    title:'Short Code Translation',
    iconCls:'users',
    layout:'border',
    border:false,
    closable:true,
    id:'shortcodetranslation-tab',
    items:this.Grid


    });


    }
    /*
    * To change this template, choose Tools | Templates
    * and open the template in the editor.
    */

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,004
    Answers
    3489
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Ok... little more info than just throwing some code. Also, when posting code use the BBCode CODE tags.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    2
    Vote Rating
    0
    prachigupta is on a distinguished road

      0  

    Default


    Hi here by i m including my whole code .

    This is my main.jsp
    HTML Code:
     <%@include file="authentication.jsp"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>	  <title>Pyro Intelligent Call Router</title>		  <link rel="stylesheet" href="libs/resources/css/ext-ux-livegrid.css" type="text/css" charset="utf-8" />	  <link rel="stylesheet" type="text/css" href="default.css" />          <link rel="stylesheet" type="text/css" href="ext-4.1/resources/css/ext-all-gray.css" />	  <link rel="stylesheet" type="text/css" href="ext-4.1/shared/example.css"/>	  <script type="text/javascript" src="ext-4.1/ext-all-debug.js"></script>                		<script language="JavaScript1.2">		        javascript:window.history.forward(1);		</script>		<script type="text/javascript">		function noBack(){window.history.forward()}		noBack();		window.onload=noBack;		window.onpageshow=function(evt){if(evt.persisted)noBack()}		window.onunload=function(){void(0)}		</script></head><body >
            <script type="text/javascript" src="app/setting.jsp"></script>        <script type="text/javascript" src="libs/FormBlind.js"></script>               <script type="text/javascript" src="app/default3.js"></script>        <script type="text/javascript" src="app/menu.js"></script>        <script type="text/javascript" src="app/shortcodetranslation.js"></script>       </body></html>
    Here is my default.js where i m creating the main window

    Code:
    Ext.BLANK_IMAGE_URL="libs/resources/images/default/s.gif";
    
    
    Ext.namespace("Rhub");
    
    
    Ext.form.Field.prototype.msgTarget = 'under';  //  validation message display
    Ext.Loader.setConfig({enabled:true});
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.toolbar.Paging',
            'Ext.ModelManager',
             'Ext.form.field.File',
        'Ext.tip.QuickTipManager'
    
    ]);
    
    
    Rhub.Main = function(){
    
    
    	this.mp = function(t,tpl){
    		var p = {
    			title:t,
    			html:tpl.applyTemplate()
    		};
    		return p;
    	}
    
    
    	var menu = new Rhub.Menu();
    if(Settings.Type == 0){
    		// Panel for holding menu panels
    		this.Menu = Ext.create('Ext.Panel',{
    			region:'west',
    			width:225,
    			split:true,
    			//frame:true,
    			id:'action-panel',
    			collapsemode:'mini',
    			margins:'5 0 5 0',
    			collapsible:true,
    			layout:'accordion',
    			border:false,
    			layoutConfig:{
    				animate:true
    			},
    			items:[
    			       this.mp("Administrator",menu.admintpl),
    
    			       this.mp("Change Password",menu.cpwdtpl),
    			       this.mp("Logout",menu.toolstpl)]
    		});
    	}
    
    
      // Panel for holding banner
    	this.Banner = Ext.create('Ext.Panel',{
    		region:'north',
    		border:false,
    		height:125,
                    width: 1100,
                     html:'<div align="center" style="position:absolute; left:1; top:0; width:1090; height:75;background-color:none;"><img src="images/Banner1.jpg"  width="900" height="125"  align="center"></div>'
    
    	});
    
    
    	// Main Tab Container
    	this.Tabs = Ext.create('Ext.TabPanel',{
    		region:'center',
    		margins:'5 0 5 0',
    		bodyBorder:false,
    		id:'tab-holder',
    		border:true,
    		resizeTabs:true,
    		bodyBorder:false,
    		enableTabScroll:true,
    		minTabWidth:150,
    		tabWidth:200,
    		activeItem:0
    	});
            //this.Win = new Ext.Viewport({  // full screen
    	this.Win = Ext.create('Ext.Window',{  // pop up window
    		title:'Pyro Intelligent Call Router',
    		width:900,
    		height:600,
    		layout:'border',
                    closable:false,
                    maximizable: true,
    		items:[this.Menu,this.Tabs,this.Banner]
    	});
    
    
    	this.Win.show();
    
    
    
    
    if(Settings.Type == 0){
    
    
    
      if(Ext.get('sctranslation') !==null){
    		Ext.get('sctranslation').on('click',function(){
                        var TabPanel = Ext.getCmp('tab-holder');
                        var TabToCheck = TabPanel.getChildByElement('shortcodetranslation-tab');
    			if(!TabToCheck){
    				var shortcodetranslationv = new Rhub.ShortCodeTranslation();
    				TabPanel.add(shortcodetranslationv.Tab);
    				TabPanel.setActiveTab(shortcodetranslationv.Tab);
    				this.Win.doLayout();				
    			}else{
    
    				 TabPanel.setActiveTab('shortcodetranslation-tab');
    
    			}
    		},this);
     }       
    
    
    
    
    
    
    }
    Ext.get('logout').on('click',function(){
    		document.location = "logout.jsp";                
    
    
    	});
    
    
    
    
    	this.Win.on('close',function(){
    		document.location = "logout.jsp";
    	});
    
    
    }
    
    
    Ext.onReady(Rhub.Main,Rhub);
    Here is my menu.js
    Code:
    
    
    Code:
    Rhub.Menu = function(){
    	// Admin
    	if(Settings.Type == 0){
    
    		this.admintpl = new Ext.Template(
    				'<ul>',
                                     '<li id="sctranslation"><img src="icons/users_large.png" /><span>Short Code Translation</span></li>',
                                    '</ul>');
    
    		this.cpwdtpl = new Ext.Template(
                                    '<ul>',
                                    '<li id="changepwd"><img src="icons/users_large.png" /><span>Change Password</span></li>',
                                    '</ul>');
    
    
                    this.toolstpl = new Ext.Template(
                                    '<ul>',
                                    '<li id="logout"><img src="icons/logout.png" /><span><a href="#">Logout</a></span></li>',
                                    '</ul>');
    	}
    
    
    
    }


    Here is main shortcodetranslation.js

    Code:
    
    
    Code:
    Rhub.ShortCodeTranslation = function(){
    
    
    
    this.Form = function(e){
               Ext.define('network', {
    	     extend: 'Ext.data.Model',
    	     fields:[
    		        {name: 'Network_ID',mapping:'Network_ID',type: 'string'},
    		        {name: 'Network_NAME',mapping:'Network_NAME',type: 'string'} 
    		    ]
                }); 
    		this.F = new Ext.ux.FormBlind(Ext.getCmp('shortcodetranslation-tab'),{
    
                            labelWidth:100,
    			width:310,
    			defaults:{width:200},
    			waitMsgTarget:true,
    			defaultType:'textfield',
    			items: [{
    				xtype:'combo',
                                    fieldLabel:'Network Name',
                                    name:'Network_Id',
                                    id:'Network_Id',
                                    allowBlank:false,
    
                                    store: Ext.create('Ext.data.Store', {
                                        model: 'network',
                                        autoLoad: true,
                                        proxy: {
                                            type: 'ajax',
                                            url: 'ShortCodeTranslation?action=network'
    
    
                                        }
                                    }),
                                    anchor:'100%',
                                    displayField:'Network_NAME',
                                    valueField:'Network_ID',
                                    hiddenName:'Network_ID',
                                    editable:false,
                                    typeAhead:true,
                                   queryMode: 'local',
    
                                    emptyText:'Select  Network Name',
                                    selectOnFocus:true,
                                     allowblank:false
    
    
                                            },{                	
                                    xtype:'combo',
                                    fieldLabel:'Subscription Type',
                                    name:'Sub_Type',
                                    id:'Sub_Type',
                                    allowBlank:false, 
                                    store: new Ext.data.SimpleStore({
                                                                    autoLoad:true,
                                                                   fields:[    {name:'Account_ID'}, {name:'Account_NAME'} ],
                                                                    data: [['1', 'Prepaid'], ['2', 'Postpaid']]
                                                                    }),
                                    anchor:'100%',
    
                                    displayField:'Account_NAME',
                                    valueField:'Account_NAME',
                                    hiddenName:'Account_NAME',
                                    editable:false,
                                    typeAhead:true,
                                    mode:'local',
                                    triggerAction:'all',
                                    emptyText:'Select Subscription Type',
                                    selectOnFocus:true
                                        },{
                                    xtype: 'textfield',
                                    fieldLabel: 'Short Code',
                                    anchor: '100%',
                                    name: 'ShortCode',
                                    id:'ShortCode' ,
                                    allowblank:false
                                   },
                                  {
                                    xtype: 'textfield',
                                    fieldLabel: 'Translation ShortCode',
                                    anchor: '100%',
                                    name: 'TrancCode',
                                    id:'TrancCode' ,
                                    allowblank:false
                                   }],
                                        buttons:[{
                                                text:'Cancel',
                                                iconCls:'cancel',
                                                scope:this,
                                                handler:function(){
                                                        this.F.dismiss();this.Grid.store.loadPage(1);
    
                                                }
                                        },{
                                                text:'Save',
                                                iconCls:'save',
                                                scope:this,
                                                handler:function(){
    
    						  this.F.getForm().submit({
                                                                        url:'ShortCodeTranslation',
                                                                        params:{action:'insert'},
                                                                        scope:this,
                                                                        success:function(form, action){
                                                                            var json = Ext.decode(action.response.responseText);
                                                                                //var respstatus=Ext.util.JSON.decode(action.response.responseText).status;
                                                                                this.F.dismiss();
                                                                                this.Grid.store.loadPage(1);
                                                                                Ext.Msg.show({
                                                                                    title:'Information',
                                                                                    msg:json.status,
                                                                                    buttons:Ext.Msg.OK,
                                                                                    modal:false
                                                                            });
                                                                        },
                                                                        failure:function(form, action){
                                                                             var json = Ext.decode(action.response.responseText);
                                                                                //var respstatus=Ext.util.JSON.decode(action.response.responseText).status;
                                                                                Ext.Msg.show({
                                                                                    title:'Information',
                                                                                    msg:json.status,
                                                                                    buttons:Ext.Msg.OK,
                                                                                    modal:false
                                                                            });
                                                                        }
                                                                });
    
                                                }
                                        }]
                                });	
    this.F.show();
    
    
    	}
        this.Remove = function(){
    		var seletionModel = this.Grid.getSelectionModel()
    		var sel = this.Grid.getSelectionModel().getSelection() ;
                    if(sel[0] == undefined){
    			Ext.Msg.show({
    				title:'Information',
    				msg:'Select any Configuration to delete.',
    				buttons:Ext.Msg.OK,
    				modal:false
    			});
    		}else{
    			Ext.Msg.show({
    				title:'Delete?',
    				msg:'Are you sure you want to delete?',
    				buttons:Ext.Msg.YESNO,
    				modal:false,
    				scope:this,
    				fn:function(b,t){
    					if(b == 'yes'){
    						Ext.Ajax.request({
    							url:'ShortCodeTranslation',
    							params:{action:'delete',Sno:sel[0].get('Sno'),Network_Id:sel[0].get('Network_Name'),Sub_Type:sel[0].get('Subscriber_Type'),ShortCode:sel[0].get('ShortCode'),TrancCode:sel[0].get('TranslationCode')},
    							method:'POST',
    							scope:this,
    							success:function(result,request){
    								 var json = Ext.decode(result.responseText);
    								this.Grid.store.remove(sel);
    								this.Grid.store.loadPage(1);
    								Ext.Msg.show({
                                                                                    title:'Information',
                                                                                    msg:json.status,
                                                                                    buttons:Ext.Msg.OK,
                                                                                    modal:false
                                                                            });
    							},
    							failure:function(result,request){
    								var json = Ext.decode(result.responseText);
    								Ext.Msg.show({
                                                                                    title:'Information',
                                                                                    msg:json.status,
                                                                                    buttons:Ext.Msg.OK,
                                                                                    modal:false
                                                                            });
    							}
    						});
    					}else{
    
                                            }
    				}
    			});
    		}
    	}                
    
    
         Ext.define('User', {
         extend: 'Ext.data.Model',
         fields:[
                    {name: 'Sno',mapping:'Sno',type: 'string'},
                    {name: 'Network_Name',mapping:'Network_Name',type: 'string'} ,
                    {name: 'Subscriber_Type',mapping:'Subscriber_Type',type: 'string'},
                    {name: 'ShortCode',mapping:'ShortCode',type: 'string'} ,
                    {name: 'TranslationCode',mapping:'TranslationCode',type: 'string'} ,
    
    	   ]
                });   
    
    
    var ShortcodeStore = Ext.create('Ext.data.Store', {
                autoLoad:true,
                model:User,
                proxy:new Ext.data.HttpProxy({
                        root:'userdata',
                        totalProperty:'results',
                        url: 'ShortCodeTranslation?action=view',
                        method:'post',
                        reader: {
                                type : 'json',
                                root : 'userdata',
                                totalProperty:'results'
                            }
    
    
                    })
             });
     ShortcodeStore.load();
    
    
    
    
    	this.Grid =Ext.create('Ext.grid.GridPanel',{
    		viewConfig:{forceFit:true},
    		minColumnWidth:5,
    		loadMask: {msg:'Loading Data...'},
    		region:'center',
    		layout:'fit',
    		border:false,
                    store:ShortcodeStore,
    		columns:[
                                {text: 'Sno',sortable:true,dataIndex: 'Sno'},
                                {text: 'Network Name',sortable:true,dataIndex: 'Network_Name'},
                                {text: 'Subscriber Type',sortable:true,dataIndex: 'Subscriber_Type'},
                                {text: 'ShortCode',sortable:true,dataIndex: 'ShortCode'},
                                {text: 'TranslationCode',sortable:true,dataIndex: 'TranslationCode'}
                            ],
    		tbar:[{
    			text:'Add',
    			iconCls:'add',
    			scope:this,
    			handler:this.Form
    
    
    		},{
    			text:'Delete',
    			iconCls:'delete',
    			scope:this,
    			handler:this.Remove
    		}
               ]
    
    
    
    	});
    
    
    	this.Tab = Ext.create('Ext.Panel',{
    		title:'Short Code Translation',
    		iconCls:'users',
    		layout:'border',
    		border:false,
    		closable:true,                
    		id:'shortcodetranslation-tab',
    		items:this.Grid
    
    
    	});
    
    
    }


    And My PROBLEM is "if i click the tab and click on add button in the shortcodetranslation .js its running fyn but if second tym click on add then my networkname combo appears behind the main window it is not appearing infront". Please help me .

Thread Participants: 1