WebProgramming: EXTJS

Index.html

<html>
<head>
   <title>New Application</title>

<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
   <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
   <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-custom.css">
   <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
   <script type="text/javascript" src="extjs/ext-theme-neptune.js"></script>
   <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

app.js

Ext.Loader.setConfig({
   enabled: true
   });

Ext.application({
   name: 'MyAjaxApp',

   appFolder: 'app',

   controllers: [
   'AppController'
   ],

   launch: function() {
   Ext.create('Ext.container.Viewport', {
   items: [
   {
   xtype: 'loginpage'
   }
   ]
   });
   }
});

3)app/view
LoginPage.js

var states = Ext.create('Ext.data.Store', {
   fields: ['abbr', 'name'],
   data : [

   {"abbr":"1", "name":"User"},
   {"abbr":"2", "name":"Admin"}

   ]
});

Ext.define('MyAjaxApp.view.LoginPage', {
   extend: 'Ext.form.Panel',
   xtype: 'login-form',
   alias : 'widget.loginpage',

   title: 'Please Login',
   frame:true,
   width: 320,
   bodyPadding: 10,
margin : '150 200 200 500',//(top, right, bottom, left)

   defaultType: 'textfield',
   defaults: {
   anchor: '100%'
   },

   items: [
//
{
xtype : 'combo',
fieldLabel: 'Role',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
allowBlank : false,
listeners : {
'afterrender' : function(combo) {
var selectedRecord = combo.getStore().getAt(0);
combo.setValue(selectedRecord);
},
change : function(combo, value) {
if (value == 1) {

} else {

}//end of else

}//end of change event

}//end of listener

},
//
   {
   allowBlank: false,
   fieldLabel: 'User ID',
   name: 'userId',
   emptyText: 'user id'
   },
   {
   allowBlank: false,
   fieldLabel: 'Password',
   name: 'password',
   emptyText: 'password',
   inputType: 'password'
   },
   {
   xtype:'checkbox',
   fieldLabel: 'Remember me',
   name: 'remember'
   }
   ],

   buttons: [
   {
text:'Register', action: 'register' },
   { text:'Login' , action: 'login'},
{
   text: 'Reset Form',
   handler: function() {
   this.up('form').getForm().reset();
   }
   }
   ]
});

HomePage.js

var themeCategories = Ext.create('Ext.data.Store', {
fields : ['abbr', 'name'],
data : [{
"abbr" : "1",
"name" : "Classic"

}, {
"abbr" : "2",
"name" : "Neptune"
}]
});

var layoutCategories = Ext.create('Ext.data.Store', {
fields : ['abbr', 'name'],
data : [{
"abbr" : "1",
"name" : "Horizontal"
}, {
"abbr" : "2",
"name" : "Vertical"
}]
});

Ext.define('MyAjaxApp.view.HomePage', {
extend : 'Ext.form.Panel',
alias : 'widget.homepage',
id : 'main_panel',
requires : ['MyAjaxApp.view.TechnologyService.TSList',
'MyAjaxApp.view.Resource.ResourceList',
'MyAjaxApp.view.Tools.ToolsList',
'MyAjaxApp.view.ILifeCycleServices.ILCSList',
//'MyAjaxApp.view.ILifeCycleServices.ViewILCS',
],
width : 1360,
height : 600,
autoScroll : true,
//frame : true,
title : 'HomePage',
// bodyPadding : '10 10 0',

layout : 'border',

initComponent : function() {
console.log("Inside HomePage");
console.log(this);
console.log(this.data);
this.tslist = Ext.widget('app-view-technologyservice-tslist');
// this.resourcelist = Ext.widget('app-view-resource-resourcelist');
this.toolslist = Ext.widget('app-view-tools-toolslist');
this.ilcslist = Ext.widget('app-view-ilifecycleservices-ilcslist');
Ext.apply(this, {
items : [{
xtype : 'panel',
//title : 'Login',
header : false,
region : 'north',
layout:'hbox',
border:5,
bodyStyle:'background-color:#D0DEF0;',
// bodyStyle : "background: url('images/brand.png') no-repeat right top;",
// height : 43,
flex: 0.12,
items : [
{
xtype:'image',
//width:300,
//height:100,
margins : '12 0 8 10',
src: 'images/TATA_Blue.png',
},{
xtype:'image',
//width:300,
//height:100,
margins : '10 0 0 10',
src: 'images/brand.png',
},{
xtype : 'combo',
margins : '10 0 13 930',
width:70,
fieldLabel : 'Theme',
id : 'themeselection',
store : themeCategories,
queryMode : 'local',
displayField : 'name',
valueField : 'abbr',
labelAlign : 'top',
forceSelection : true,

allowBlank : false,
listeners : {
'afterrender' : function(combo) {
var selectedRecord = combo.getStore().getAt(0);
combo.setValue(selectedRecord);
},
change : function(combo, value) {
if (value == 1) {
Ext.util.CSS.swapStyleSheet("theme",
"extjs/resources/css/ext-all.css");
} else {
Ext.util.CSS
.swapStyleSheet("theme",
"extjs/resources/css/ext-all-neptune.css");
}

}

}
},
//second combo
{
xtype : 'combo',
margins : '10 0 13 5',
width:80,
fieldLabel : 'Layout',
id : 'layoutselection',
store : layoutCategories,
queryMode : 'local',
displayField : 'name',
valueField : 'abbr',
labelAlign : 'top',
forceSelection : true,

allowBlank : false,
listeners : {
'afterrender' : function(combo) {
var selectedRecord = combo.getStore()
.getAt( 0);
combo.setValue(selectedRecord);
},
change : function(combo, value) {
if (value == 1) {
console.log('hbox');

listPanel=Ext.getCmp('main_area_panel');
listPanel.removeAll();
listPanel.add({layout:'hbox',
items:[
Ext.widget('app-view-technologyservice-tslist'),
// Ext.widget('app-view-resource-resourcelist'),
Ext.widget('app-view-tools-toolslist'),
Ext.widget('app-view-ilifecycleservices-ilcslist')
]});
listPanel.doLayout(true,true);

} else {
console.log('vbox');

listPanel=Ext.getCmp('main_area_panel');
listPanel.removeAll();
listPanel.add({layout:'vbox',
items:[
Ext.widget('app-view-technologyservice-tslist'),
// Ext.widget('app-view-resource-resourcelist'),
Ext.widget('app-view-tools-toolslist'),
Ext.widget('app-view-ilifecycleservices-ilcslist')
]});
listPanel.doLayout(true,true);

}

}

}
}]

}, {
xtype : 'panel',
title : 'Version',
region : 'west',
border:5,
// margins : '5 0 0 0',
// cmargins : '5 5 0 0',
width : 175,
//flex:.8,
minSize : 100,
maxSize : 250
}, {
xtype : 'container',
title : 'Main Area',
id : 'main_area_panel',
region : 'center',
border:5,
height : 1500,
autoScroll : true,

}]
});

this.callParent(arguments);
}
});

RefisterForm.js

Ext.define('MyAjaxApp.view..RegisterForm', {
   extend: 'Ext.form.Panel',
   xtype: 'register-form',
   alias : 'widget.registerform',


   frame: true,
   title: 'Register',
   bodyPadding: 10,
   autoScroll:true,
   width: 355,

   fieldDefaults: {
   labelAlign: 'right',
   labelWidth: 115,
   msgTarget: 'side'
   },

   initComponent: function() {
   this.items = [{
   xtype: 'fieldset',
   title: 'User Info',
   defaultType: 'textfield',
   defaults: {
   anchor: '100%'
   },
   items: [
   { allowBlank:false, fieldLabel: 'User ID', name: 'user', emptyText: 'user id' },
   { allowBlank:false, fieldLabel: 'Password', name: 'pass', emptyText: 'password', inputType: 'password' },
   { allowBlank:false, fieldLabel: 'Verify', name: 'pass', emptyText: 'password', inputType: 'password' }
   ]
   },
   {
   xtype: 'fieldset',
   title: 'Contact Information',
   defaultType: 'textfield',
   defaults: {
   anchor: '100%'
   },
   items: [{
   fieldLabel: 'First Name',
   emptyText: 'First Name',
   name: 'first'
   },
   {
   fieldLabel: 'Last Name',
   emptyText: 'Last Name',
   name: 'last'
   },
   {
   fieldLabel: 'Company',
   name: 'company'
   },
   {
   fieldLabel: 'Email',
   name: 'email',
   vtype: 'email'
   },
   /* {
   xtype: 'combobox',
   fieldLabel: 'State',
   name: 'state',
   // store: Ext.create('KitchenSink.store.States'),
   valueField: 'abbr',
   displayField: 'state',
   typeAhead: true,
   queryMode: 'local',
   emptyText: 'Select a state...'
   },*/
   {
   xtype: 'datefield',
   fieldLabel: 'Date of Birth',
   name: 'dob',
   allowBlank: false,
   maxValue: new Date()
   }]
   }];

   this.callParent();
   },

   buttons: [{
   text: 'Register',
   disabled: true,
   formBind: true
   },{
   text: 'back',
action: 'backtologin'
   }]
});

4)app\view\TechnologyService
a)

var layoutCategories = Ext.create('Ext.data.Store', {
fields : ['abbr', 'name'],
data : [{
"abbr" : "1",
"name" : "Vertical"
}, {
"abbr" : "2",
"name" : "Tab"
}]
});

Ext.define('MyAjaxApp.view.TechnologyService.ViewTechnologyService', {
extend : 'Ext.window.Window',
modal : true,
xtype : 'app-view-technologyservice-viewtechnologyservice',
id : 'view_technology_panel',
requires : ['MyAjaxApp.view.TechnologyService.MainPanel','MyAjaxApp.view.TechnologyService.TabPanel'],
width : 1300,
height : 550,
autoScroll : true,
title : 'TechnologyService',
//layout : 'anchor',
layout:'vbox',
defaults : {
anchor : '100%'
},
initComponent : function() {

this.mainpanel = Ext.widget('app-view-technologyservice-mainpanel');
this.tabpanel = Ext.widget('app-view-technologyservice-tabpanel');

Ext.apply(this, {
items : [
{
xtype : 'combo',
fieldLabel: 'Choose Layout',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
allowBlank : false,
listeners : {
'afterrender' : function(combo) {
var selectedRecord = combo.getStore().getAt(0);
combo.setValue(selectedRecord);
},
change : function(combo, value) {
if (value == 1) {
//alert("Hello")
TechWindow=Ext.getCmp('view_technology_panel');
mainPanel=Ext.getCmp('viewTechnologyServiceMainPanel');
tabPanel=Ext.getCmp('viewTechnologyServiceTabPanel');
tabPanel.hide();
//mainPanel.show();
//TechWindow.remove(tabPanel);
TechWindow.add(mainPanel);
mainPanel.show();

} else {
TechWindow=Ext.getCmp('view_technology_panel');
mainPanel=Ext.getCmp('viewTechnologyServiceMainPanel');
tabPanel=Ext.getCmp('viewTechnologyServiceTabPanel');
mainPanel.hide();
//tabPanel.show();
//TechWindow.remove(mainPanel);
TechWindow.add(tabPanel);
tabPanel.show();

}//end of else

}//end of change event

}//end of listener

},this.mainpanel
//this.ddbox,this.panel1 ,this.panel2 ,this.panel3
]
});//ex.apply ends

this.callParent(arguments);
}//init ends

});

b)

/*Ext.define('MyAjaxApp.view.TechnologyService.TSList', {
extend : 'Ext.grid.Panel',
xtype : 'app-view-technologyservice-tslist',
width : 250,
height : 200,
title : 'Technology Services',
requires : ['MyAjaxApp.store.TechnologyServiceStore',
'MyAjaxApp.view.TechnologyService.ViewTechnologyService'],
store : 'MyAjaxApp.store.TechnologyServiceStore',
columns : [{
text : 'Name',
flex : .25,
sortable : true,
hideable : false,
editor : 'textfield',
dataIndex : 'name',
renderer : function(value, metaData, record, row, col, store, gridView) {
return Ext.String.format('<u style="cursor:pointer">' + value
+ '</u>');
}
}],

initComponent : function() {
this.on('cellclick', function(table, td, cellIndex, record, tr,
rowIndex, e, eOpts) {
console.log(cellIndex);
console.log(record.data);
if (cellIndex == 0) {
var popup = Ext
.widget('app-view-technologyservice-viewtechnologyservice')
.show();
}//end of if
}, this);//end of this.on
this.callParent(arguments);

}//end of initComponent

});
*/

Ext.define('Task', {
   extend: 'Ext.data.Model',
   fields: [
   {name: 'task', type: 'string'},
   {name: 'status', type: 'string'}
   ]
   });

   var store = Ext.create('Ext.data.TreeStore', {
   model: 'Task',
   proxy: {
   type: 'ajax',
   //the store will get the content from the .json file
   url: 'TStreeView.json'
   },
   folderSort: true
   });
//tooltip function
function getExpandableImage(value, metaData,record){
var deviceDetail;
if (record.data.leaf==true) {
   deviceDetail = record.get('task') + " : " + record.get('status')+ " :: Click to Open";
}
else
{
deviceDetail = record.get('task') + " : " + record.get('status');
}
   metaData.tdAttr = 'data-qtip="' + deviceDetail + '"';
   return value;
}

Ext.define('MyAjaxApp.view.TechnologyService.TSList', {
extend : 'Ext.tree.Panel',
xtype : 'app-view-technologyservice-tslist',
//flex:.25,
//width:295,
width:395,
height:200,
border:1,
autoScroll: true,
title : 'TechnologyService',
requires : ['MyAjaxApp.store.ResourceStore','MyAjaxApp.view.TechnologyService.ViewTechnologyService'],
store : store,
// collapsible: true,
   useArrows: true,
   rootVisible: false,
   multiSelect: true,
   singleExpand: true,
   //the 'columns' property is now 'headers'
   columns: [{
   xtype: 'treecolumn', //this is so we know which column will show the tree
   text: 'TechnologyService',
   flex: 1.5,
   sortable: true,
   dataIndex: 'task',
//---------for tooltip---
renderer : function(value, metadata,record) {
   return getExpandableImage(value, metadata,record);
   }
//----------tooltip end---

   },{
   //we must use the templateheader component so we can use a custom tpl
   xtype: 'templatecolumn',
   text: 'Availability Status',
   flex: 1,
   sortable: true,
   dataIndex: 'status',
   align: 'center',
   //add in the custom tpl for the rows
   // tpl: Ext.create('Ext.XTemplate', '{description}')
tpl: Ext.create('Ext.XTemplate', '{status:this.taskLink}',{
taskLink: function(v) {
return v;
   }
})

   }],

initComponent : function() {
this.on('cellclick', function(table, td, cellIndex, record, tr,rowIndex, e, eOpts) {
console.log(":*****cellIndex*****");
console.log(cellIndex);
console.log(record.data);
console.log(record.data.leaf);
if ((cellIndex == 0)&&(record.data.leaf==true)) {
var popup = Ext.widget('app-view-technologyservice-viewtechnologyservice').show();
//to load data on window open
Ext.getStore('MyAjaxApp.store.TechnologyServiceStore').load();

}// end of if
}, this);// end of this.on
this.callParent(arguments);

}// end of initComponent

   });

c)

var states = Ext.create('Ext.data.Store', {
   fields: ['abbr', 'name'],
   data : [

   {"abbr":"1", "name":"Vertical"},
   {"abbr":"2", "name":"Tab"},

   ]
});

Ext.define('MyAjaxApp.view.TechnologyService.DDBox', {
extend : 'Ext.form.ComboBox',
xtype : 'app-view-technologyservice-ddbox',
// requires : ['MyAjaxApp.view.TechnologyService.Panel1','MyAjaxApp.view.TechnologyService.Panel2','MyAjaxApp.view.TechnologyService.Panel3','MyAjaxApp.view.TechnologyService.DDBox'],
   fieldLabel: 'Choose Layout',
   store: states,
   queryMode: 'local',
   displayField: 'name',
   valueField: 'abbr',
forceSelection : true,
allowBlank : false,
   // renderTo: Ext.getBody(),

initComponent : function() {

/*console.log("************data on Technology Screen Child*************");
console.log(this.data);
this.ddbox = Ext.widget('app-view-technologyservice-ddbox');
this.panel1 = Ext.widget('app-view-technologyservice-panel1');
this.panel2 = Ext.widget('app-view-technologyservice-panel2');
this.panel3 = Ext.widget('app-view-technologyservice-panel3');*/
//this.listPanel=Ext.getCmp('view_technology_panel');
this.count=0;
Ext.apply(this, {
items : [

]
});//ex.apply ends

this.callParent(arguments);
},//init ends

listeners : {/*
'afterrender' : function(combo) {
var selectedRecord = combo.getStore().getAt(0);
combo.setValue(selectedRecord);

},*/
change : function(combo, value) {
if (value ==1) {
alert(this.count);
combo.count=1;
//listPanel1=Ext.getCmp('view_technology_panel');
//listPanel.removeAll();
//listPanel1.add(Ext.widget('app-view-technologyservice-ddbox'));

} else {
listPanel=Ext.getCmp('view_technology_panel');
listPanel.removeAll();
listPanel.add(Ext.widget('app-view-technologyservice-ddbox'));
listPanel.add(Ext.widget('app-view-technologyservice-panel1'));
listPanel.add(Ext.widget('app-view-technologyservice-panel2'));
listPanel.add(Ext.widget('app-view-technologyservice-panel2'));
/*listPanel.add({//layout:'hbox',
items:[
Ext.widget('app-view-technologyservice-ddbox'),
Ext.widget('app-view-technologyservice-panel1'),
Ext.widget('app-view-technologyservice-panel2'),
Ext.widget('app-view-technologyservice-panel3')
]});*/
}//end of else

}//end of change event

}//end of listener

});

Ext.define('MyAjaxApp.view.TechnologyService.MainPanel', {

extend : 'Ext.panel.Panel',

xtype : 'app-view-technologyservice-mainpanel',

id:'viewTechnologyServiceMainPanel',

requires : ['MyAjaxApp.view.TechnologyService.Panel1','MyAjaxApp.view.TechnologyService.Panel2','MyAjaxApp.view.TechnologyService.Panel3','MyAjaxApp.view.TechnologyService.DDBox'],

//width:900,

initComponent : function() {

//this.ddbox = Ext.widget('app-view-technologyservice-ddbox');

console.log("Inside MainPanel.js");

console.log(this);

console.log( Ext.getCmp('main_panel'));

console.log(Ext.getCmp('main_panel').data);

this.panel1 = Ext.widget('app-view-technologyservice-panel1');

this.panel2 = Ext.widget('app-view-technologyservice-panel2');

this.panel3 = Ext.widget('app-view-technologyservice-panel3');

if(Ext.getCmp('main_panel').data=='admin')

{

Ext.apply(this, {

items : [

//this.ddbox,

this.panel1 ,

this.panel2 ,

this.panel3

]

});//ex.apply ends

}else

{

Ext.apply(this, {

items : [

//this.ddbox,

//this.panel1 ,//not visible to user

this.panel2 ,

this.panel3

]

});//ex.apply ends

}

this.callParent(arguments);

}//init ends

});

Ext.define('MyAjaxApp.view.TechnologyService.TabPanel', {

extend : 'Ext.tab.Panel',

xtype : 'app-view-technologyservice-tabpanel',

id:'viewTechnologyServiceTabPanel',

requires : ['MyAjaxApp.view.TechnologyService.Panel1','MyAjaxApp.view.TechnologyService.Panel2','MyAjaxApp.view.TechnologyService.Panel3','MyAjaxApp.view.TechnologyService.DDBox'],

width:500,

initComponent : function() {

//this.ddbox = Ext.widget('app-view-technologyservice-ddbox');

this.panel1 = Ext.widget('app-view-technologyservice-panel1');

this.panel2 = Ext.widget('app-view-technologyservice-panel2');

this.panel3 = Ext.widget('app-view-technologyservice-panel3');

Ext.apply(this, {

items : [

//this.ddbox,

this.panel1 ,this.panel2 ,this.panel3

]

});//ex.apply ends

this.callParent(arguments);

}//init ends

});

/* Ext.define('User', {

extend: 'Ext.data.Model',

fields: [ 'name', 'email', 'phone' ]

});

var userStore = Ext.create('Ext.data.Store', {

model: 'User',

proxy: {

type: 'ajax',

url: '/technologyservice',

reader: {

type: 'json',

root: 'users'

}

autoLoad: true

});

Ext.define('MyAjaxApp.view.TechnologyService.Panel1', {

extend : 'Ext.grid.Panel',

xtype : 'app-view-technologyservice-panel1',

//flex:.25,

//width:295,

store: 'MyAjaxApp.store.TechnologyServiceStore',

width: 400,

height: 135,

title: 'Application Users 1',

selType: 'rowmodel',

columns: [

{

text: 'Name',

width: 100,

sortable: true,

hideable: false,

editor: 'textfield',

dataIndex: 'name'

{

text: 'Email Address',

width: 150,

dataIndex: 'email',

editor: 'textfield',

hidden: false

{

text: 'Phone Number',

flex: 1,

dataIndex: 'phone',

editor: 'textfield',

}

]

});

WebProgramming

EXTJS

No comments:

Post a Comment

Translate

Search This Blog