Sencha ExtJS is an advanced version of JavaScript. Now the days, it is one of the most valuable language in terms of a web application as it is helpful in designing because of its vast predefined properties of panel tab etc.
Here is the code related to Sencha ExtJS. If you want to create panels inside panel, then this code may be helpful:
Here is the code for above output:
<!DOCTYPEhtml>
<html>
<head>
<linkhref="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"rel="stylesheet"/>
<scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<scripttype="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', { // Creating Panel
renderTo: 'div2',
height: 585,
width: 1360 ,
layout: 'border',
items: [{ // Creating Panel inside Panel
title: 'West Panel',
region: 'west',
html: 'West Side of the Panel',
collapsible: true,
split: true,
width: 300,
layout : 'accordion',
bodyStyle: 'padding:15px',
items: [{ // Creating Panel inside Panel
title: 'Panel 1',
html: 'Panel 1 html content'
}, {
title: 'Panel 2',
html: 'Panel 2 html content'
}, {
title: 'Panel 3',
html: 'Panel 3 html content'
}]
}, {
title: 'south Panel',
region: 'south',
html: 'South Side of the Panel',
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
}, {
title: 'East Panel',
region: 'east',
html: 'East Side of the Panel',
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
}]
});
});
If we want to create a menu bar then this code may be helpful:
Here is code for the above output:
Ext.onReady(function () {
var SamplePanel = Ext.extend(Ext.Panel, { // Creating Panel to for Menu bar
width: 1365,
height: 60,
hidden: false,
renderTo: 'div1',
scrollable: true
})
new SamplePanel({ // Defining Panel to for Menu bar
title: 'Implementation Testing',
tbar: [{ // Creating top view for the menu bar
iconCls: 'add16', // Assigning view property to the test1
text: ‘test1’,
menu: [ // Creating items under 1 menu bar.
{
text: "Register",
closable: false,
listeners: {
click: function () { // Action which we need to proceed after clicking on menu item
Registwin.show();
}
}
},
{
text: "login",
closable: false,
listeners: {
click: function () {
loginwin.show();
}
}
}
]
},
{
iconCls: 'add16',
text: ‘test2’,
menu: [
{
text: "Register",
closable: false,
listeners: {
click: function () {
Registwin.show();
}
}
},
{
text: "login",
closable: false,
listeners: {
click: function () {
loginwin.show();
}
}
}
]
},
{
iconCls: 'add16',
text: ‘test3’,
menu: [
{
text: "Register",
closable: false,
listeners: {
click: function () {
Registwin.show();
}
}
},
{
text: "login",
closable: false,
listeners: {
click: function () {
loginwin.show();
}
}
}
]
},
{
iconCls: 'add16',
text: ‘test4’,
menu: [
{
text: "Register",
closable: false,
listeners: {
click: function () {
Registwin.show();
}
}
},
{
text: "login",
closable: false,
listeners: {
click: function () {
loginwin.show();
}
}
}
]
},
{
iconCls: 'add16',
text: ‘test5’,
menu: [
{
text: "Register",
closable: false,
listeners: {
click: function () {
Registwin.show();
}
}
},
{
text: "login",
closable: false,
listeners: {
click: function () {
loginwin.show();
}
}
}
]
},
{
iconCls: 'add16',
text: ‘test6’,
menu: [
{
text: "Register",
closable: true,
listeners: {
click: function () {
Registwin.show();
}
}
},
{
text: "login",
closable: false,
listeners: {
click: function () {
loginwin.show();
}
}
}
]
},
{
xtype: 'button',
text: 'Register',
listeners: {
click: function () {
Registwin.show();
}
}
}, {
xtype: 'button',
text: 'Login',
listeners: {
click: function () {
loginwin.show();
}
}
}
],
lbar: [
],
rbar: [
],
bbar: [
]
})
});
If we want to create a window form with validation, then this code may be
helpful:
Here is the code for above output:
Ext.onReady(function () {
Registwin = new Ext.Window({ // Creating login window
xtype: 'UserForm',
modal: true,
closeAction: 'close',
layout: 'fit',
height: 300,
width: 400,
title: 'Register',
items: [
{
xtype: 'form',
bodyPadding: 5,
items: [
{
xtype: 'fieldset',
title: 'Fill The Details',
defaults: {
xtype: 'textfield',
labelWidth: 100,
maxLength: 10,
enforceMaxLength: true,
width: 300
},
items: [
{
labelSeparator: '', // It is used to add fieldLabel and textbox
fieldLabel: 'Name',
name: 'Name',
maxLength: 10, // It will show error after 10 digit
enforceMaxLength: true, // Used so that user cannot enter the value whose text length is greater than 10.
allowBlank: false, // Putting validation so that this fieldwill be manadatory.
msgTarget: 'under' // Place Where we need to error message.
},
{
fieldLabel: 'Email',
labelSeparator: '',
name: 'UserEmail',
maxLength: 20,
vtype :'email', // Putting validation so that input will be email type only.
enforceMaxLength: true,
allowBlank: false,
msgTarget: 'under'
},
{
fieldLabel: 'Phone',
name: 'PhoneNumber',
labelSeparator: '',
maskRe: /[0-9]/, //Textbox will accept only 0-9character
maxLength: 10,
enforceMaxLength: true,
allowBlank: false,
msgTarget: 'under'
},
{
labelSeparator: '',
fieldLabel: 'Address',
name: 'Address',
maxLength: 10,
enforceMaxLength: true,
allowBlank: false,
msgTarget: 'under'
},
{
xtype: 'datefield',
fieldLabel: 'Date of birth',
name: 'DOB',
labelSeparator: '',
format: 'd/m/Y', // Putting validation for user input must be date month and year.
maxLength: 10,
enforceMaxLength: true,
allowBlank: false,
msgTarget: 'under'
},
{
fieldLabel: 'Password',
name: 'Password',
id: 'pass1',
labelSeparator: '',
inputType: 'password', //User input will be hidden,show only *
maxLength: 10,
enforceMaxLength: true,
allowBlank: false,
msgTarget: 'Under'
}
]
}
],
buttons: [
{
text: 'Save',
action: 'saveUser', //Above validation is used to show error message but we need to put validation on button otherwise after clicking on button wrong data will be processded successfully. We need to show error message after clicking on click button. So below is the code to check all form validation.
listeners: {
click: function (button) {
var form = button.up('form');
if (form.isValid()) {
Ext.Msg.alert('Succcess', 'Thanks For Register !')
}
else
{
Ext.Msg.alert('Error', 'Please fill valid data !')
}
} } } ]
Here is the complete code to use all the above concept in the program.
<!DOCTYPEhtml>
<html>
<head>
<linkhref="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"rel="stylesheet"/>
<scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<scripttype="text/javascript">
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
renderTo: 'div2',
height: 585,
width: 1360 ,
layout: 'border',
defaults: {
},
items: [{
title: 'West Panel',
region: 'west',
html: 'West Side of thePanel',
collapsible: true,
split: true,
width: 300,
layout : 'accordion',
bodyStyle: 'padding:15px',
items: [{
xtype : 'panel',
title: 'Panel 1',
html: 'Panel 1 html content'
}, {
title: 'Panel 2',
html: 'Panel 2 html content'
}, {
title: 'Panel 3',
html: 'Panel 3 html content'
}]
}, {
title: 'south Panel',
region: 'south',
html: 'South Side of the Panel',
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
}, {
title: 'East Panel',
region: 'east',
html: 'East Side of the Panel',
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
}]
});
});
Ext.onReady(function () {
var SamplePanel =Ext.extend(Ext.Panel, {
width: 1365,
height: 60,
hidden: false,
renderTo: 'div1',
scrollable: true
})
new SamplePanel({
title: 'Implementation Testing',
tbar: [{
iconCls: 'add16',
text: 'Test1',
menu: [
{
text: "Register",
closable: false,
listeners: {
click: function () { Registwin.show();
}
}
},
{
text: "login", closable: false,
listeners: {
click: function () {
loginwin.show();
}
}
}
]
},
{
iconCls: 'add16',
text: 'Test2',
menu: [
{
text: "Register",
closable: false,
listeners: {
click: function () {
Registwin.show();
}
}
},
{
text: "login",
closable:false,
listeners: {
click: function () {
loginwin.show();
}
}
}
]
},
{
iconCls: 'add16',
text: 'Test3',
menu: [
{
text: "Register",
closable: false,
listeners: {
click: function () {
Registwin.show();
}
}
},
{
text: "login",
closable:false,
listeners: {
click: function () {
loginwin.show();
}
}
}
]
},
{
iconCls: 'add16',
text: 'Test4',
menu: [
{
text: "Register",
closable: false,
listeners: {
click: function () {
Registwin.show();
}
}
},
{
text: "login",
closable: false,
listeners: {
click: function () {
loginwin.show();
}
}
}
]
},
{
iconCls: 'add16',
text: 'Test5',
menu: [
{
text: "Register",
closable: false,
listeners: {
click: function () {
Registwin.show();
}
}
},
{
text: "login",
closable:false,
listeners: {
click: function () {
loginwin.show();
}
}
}
]
},
{
iconCls: 'add16',
text: 'Test6',
menu: [
{
text: "Register",
closable: true,
listeners: {
click: function () {
Registwin.show();
}
}
},
{
text: 'login',
closable: false,
listeners: {
click: function () {
loginwin.show();
}
}
}
]
}
,
{
xtype: 'button',
text: 'Register',
listeners: {
click: function () {
Registwin.show();
}
}
}, {
xtype: 'button',
text: 'Login',
listeners: {
click: function () {
loginwin.show();
}
}
}
],
lbar: [
],
rbar: [
],
bbar: [
]
})
});
Ext.onReady(function () {
loginwin = new Ext.Window({
id: 'newForm',
modal: true,
closeAction: 'close',
layout: 'fit',
height: 200,
width: 400,
title: 'UserForm',
items: [
{
xtype: 'form',
bodyPadding: 5,
items:
[
{
xtype: 'fieldset',
title: 'Login Page',
defaults:
{
xtype: 'textfield',
labelWidth: 100,
width:300
},
items:
[
{
fieldLabel: 'Email',
name:'Email',
labelSeparator: '',
maxLength: 10,
enforceMaxLength: true,
allowBlank: false,
msgTarget: 'under'
},
{
fieldLabel:'Password',
name:'Password',
maxLength: 10,
enforceMaxLength: true,
labelSeparator: '',
allowBlank: false, inputType :'password',
msgTarget: 'under'
}
]
}
],
buttons: [
{
text: 'Save',
action: 'saveUser',
listeners: {
click: function (button) {
var form = button.up('form');
if (form.isValid()) {Ext.Msg.alert('Succcess', 'Welcome!')}
else
{ Ext.Msg.alert('Error', 'Please fillvailid data !')}
}
}
}
]
}
]
});
Ext.onReady(function () {
Registwin = new Ext.Window({
xtype: 'UserForm',
modal: true,
closeAction: 'close',
layout: 'fit',
height: 300,
width: 400,
title: 'Register',
items: [
{
xtype: 'form',
bodyPadding: 5,
items: [
{
xtype: 'fieldset',
title: 'Fill The Details',
defaults: {
xtype: 'textfield',
labelWidth: 100,
maxLength: 10,
enforceMaxLength: true,
width: 300
},
items: [
{
name: 'UserId',
hidden: true
},
{
labelSeparator: '',
fieldLabel: 'Name',
name: 'Name',
maxLength: 10,
enforceMaxLength: true,
allowBlank: false,
msgTarget: 'under'
},
{
fieldLabel: 'Email',
labelSeparator: '',
name: 'UserEmail',
maxLength: 20,
vtype :'email',
enforceMaxLength: true,
allowBlank: false,
msgTarget: 'under'
},
{
fieldLabel: 'Phone',
sortable: false,
name: 'PhoneNumber',
labelSeparator: '',
maskRe: /[0-9]/,
maxLength: 10,
enforceMaxLength: true,
maxLength: 10,
enforceMaxLength: true,
allowBlank: false,
msgTarget: 'under'
},
{
labelSeparator: '',
fieldLabel: 'Address',
name: 'Address',
maxLength: 10,
enforceMaxLength: true,
allowBlank: false,
msgTarget: 'under'
},
{
xtype: 'datefield',
fieldLabel: 'Date of birth',
name: 'DOB',
labelSeparator:'',
format: 'd/m/Y', maxLength: 10,
enforceMaxLength: true,
allowBlank:false,
msgTarget: 'under'
},
{
fieldLabel: 'Password',
name: 'Password',
id: 'pass1',
labelSeparator: '',
inputType: 'password',
maxLength: 10,
enforceMaxLength: true,
allowBlank:false,
msgTarget: 'Under'
}
]
}
],
buttons: [
{
text: 'Save',
action: 'saveUser',
listeners: {
click: function (button) {
var form = button.up('form');
if (form.isValid()) {
Ext.Msg.alert('Succcess','Thanks For Register !')
}
else
{
Ext.Msg.alert('Error','Please fill vailid data !')
}
}
}
}
]
}
]
});
});
})
</script>
</head>
<body>
<divid="div1"></div>
<divid="div2"></div>
</body>
</html>
Leave Comment