PDA

View Full Version : combobox value is not diaplaying on top on second trigger



prachigupta
7 Dec 2012, 3:51 AM
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',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.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.
*/

mitchellsimoens
9 Dec 2012, 8:08 AM
Ok... little more info than just throwing some code. Also, when posting code use the BBCode CODE tags.

prachigupta
11 Dec 2012, 1:57 AM
Hi here by i m including my whole code .

This is my main.jsp


<%@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



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


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



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 .