Notes

Ext.application({
name:'Highradian',
launch:function(){
movieform = new Ext.FormPanel({
title: 'Movie Advance Search',

renderTo:Ext.getBody(),



layout: 'column',
items: [{
xtype: 'panel',
columnWidth:0.5,
height:200,
border:false,
items:[{
xtype:'textfield',
fieldLabel:'Movie Name:',
margin:'50 0 0 160',
name:'title',
id:'movie'
},{
xtype:'splitter'
},{
xtype:'datefield',
fieldLabel:'Release year:',
margin:'0 0 0 160',
name:'release_year',
id:'year'

}],
},{
xtype:'panel',
columnWidth:0.5,
height:200,
border:false,
items:[{
xtype:'textfield',
fieldLabel:'Director Name:',
margin:'50 0 0 140',
name:'director',
id:'direc'
},{
xtype:'splitter'
},{
xtype:'combobox',
fieldLabel:'Language',
margin:'0 0 0 140',
name: 'language_id',
id:'language',
store:Ext.create('Ext.data.Store',{
fields:['abbr','number'],
data:[{
'abbr':'1',
'number':'1'
},{
'abbr':'2',
'number':'2'
},{
'abbr':'3',
'number':'3'
}],
}),
valueField: 'abbr',
displayField: 'number'


}]
}],

});
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
bodyPadding: 10,
layout: {
align: 'middle',
pack: 'center',
type: 'hbox'
},



items: [
{
xtype: 'button',
text : 'Search',
width: 100,
margin: '5 5 5 5',
handler: function(){
var value = Ext.getCmp('movie').getValue();
console.log(value),
store.load({
params:{
mov:value
}
})
}

},
{
xtype: 'button',
text : 'Reset',
width: 100,
margin: '5 5 5 5',
handler: function() {movieform.getForm().reset();}
}
]
}
);
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ { name: 'title', type: 'string' },
{ name: 'description', type: 'string' },
{ name: 'release_year', type: 'int' },
{ name: 'language_id', type: 'string' },
{ name: 'director', type: 'string' },
{ name: 'rating', type: 'string' },
{ name: 'special_features', type: 'string' },
{name: 'film_id', type: 'int'}
]
});

var userStore = Ext.create('Ext.data.Store', {
model: 'User',
pageSize: 10,
proxy:{
type:'ajax',
url: 'http://localhost:8080/Slimfast_track/FetchData',
reader:{
type: 'json',
rootProperty: 'data',
totalProperty:'totalcount',

}

},
storeId: 'invoicestore',
autoLoad: true

});

var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
height: 300,
width: 1280,
selModel: {
selType: 'checkboxmodel'
},
store: userStore,

title: 'Movie Grid',
id:'grid',
tbar: Ext.create('Ext.PagingToolbar', {
store: userStore,
items: [,'-',{
xtype: 'button',
textAlign: 'center',
text: '<span class="x-fa fa-plus-circle fa-lg" style="color:#42a1f5;"></span> Add',
handler : function(){
Ext.create('Ext.window.Window', {
title: 'Add Film',
height: 450,
width: 400,
layout: 'fit',
items: {
xtype: 'form',
border: false,
layout:'vbox',
id: 'myform',
items: [{
xtype: 'textfield',
fieldLabel: 'Title',
margin: '10 0 0 10',
name:'title'
}, {
xtype: 'numberfield',
fieldLabel: 'Release Year',
margin: '10 0 0 10',
name: 'release_year',
maxValue: 2021,
minValue: 1950
}, {
xtype: 'combobox',
fieldLabel: 'special features',
margin: '10 0 0 10',
name: 'special_features',
store:Ext.create('Ext.data.Store',{
fields:['abbr','name'],
data:[{
'abbr':'Trailors',
'name':'Trailors'

},{
'abbr':'Deleted Scenes',
'name':'Deleted Scenes'
},{
'abbr':'Behind The Scenes',
'name':'Behind The Scenes'
}],
}),
valueField: 'abbr',
displayField: 'name'

}, {
xtype: 'combobox',
fieldLabel: 'Rating',
margin: '10 0 0 10',
name: 'rating',
store:Ext.create('Ext.data.Store',{
fields:['abbr','name'],
data:[{
'abbr':'R',
'name':'R'
},{
'abbr':'PG',
'name':'PG'
},{
'abbr':'C',
'name':'C'
},{
'abbr':'NC-17',
'name':'PG'
},{
'abbr':'PG-13',
'name':'PG-13'
}],
}),
valueField: 'abbr',
displayField: 'name'

}, {
xtype: 'combobox',
fieldLabel: 'language',
margin: '10 0 0 10',
name:'language_id',
store:Ext.create('Ext.data.Store',{
fields:['abbr','number'],
data:[{
'abbr':'1',
'number':'1'
},{
'abbr':'2',
'number':'2'
},{
'abbr':'3',
'number':'3'
}],
}),
valueField: 'abbr',
displayField: 'number'
},{
xtype: 'textfield',
fieldLabel: 'Director',
name:'director',
margin: '10 0 0 10',
},{
xtype: 'textarea',
fieldLabel: 'Description',
name:'description',
margin: '10 0 0 10',
}], buttons: [{
text: 'Save',
margin:'0 20 0 0',
handler:function(){
var values=Ext.getCmp('myform').getValues();

Ext.Ajax.request({
url: 'http://localhost:8080/Slimfast_track/Add',
params : values,
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
}

})}}, {
text: 'Cancel',
margin:'0 70 0 0',
handler: function() { this.up('window').close();}
}],
store: Ext.create('Ext.data.ArrayStore', {})
}
}).show();
}
},'-',{
xtype: 'button',
textAlign: 'center',
text: '<span class="x-fa fa-edit fa-lg" style="color:#42a1f5;"></span> Edit',
id:'editbtn',
handler: function(){
var data = Ext.getCmp('grid').getSelectionModel().getSelection()[0].data;

console.log(data);

Ext.create('Ext.window.Window', {
title: 'Edit Film',
height: 450,
width: 500,
bodyPadding: 5,
layout: 'fit',
items: [{
border: false,
iconCls: 'icon-grid',
animCollapse: false,

xtype: 'form',
header: false,
bodyPadding: 15,

items: [
{
xtype: 'hiddenfield',
fieldLabel: 'Film_id',
anchor: '100%',
value: data.film_id,
name: 'film_id'
}
,{
xtype: 'textfield',
fieldLabel: 'Title',
anchor: '100%',
name: 'title',
value: data.title,
},
{
xtype: 'numberfield',
fieldLabel: 'Release year',
name: 'release_year',
maxValue: 2021,
minValue: 1990,
anchor: '100%',
value: data.release_year,
},
{
xtype: 'combo',
fieldLabel: 'Special features',
name: 'special_features',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
'abbr': 'Trailors',
'name': 'Trailors'
},{
'abbr': 'Deleted Scenes',
'name': 'Deleted Scenes'
},{
'abbr': 'Behind Scenes',
'name': 'Behind Scenes'
}]
}),
displayField: 'name',
valueField: 'abbr',
anchor: '100%',
value: data.special_features,
},
{
xtype: 'combo',
fieldLabel: 'Rating',
name: 'rating',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
'abbr': 'R',
'name': 'R'
},{
'abbr': 'PG',
'name': 'PG'
},{
'abbr': 'C',
'name': 'C'
}]
}),
displayField: 'name',
valueField: 'abbr',
anchor: '100%',
value: data.rating,
},
{
xtype: 'combo',
fieldLabel: 'Language',
name: 'language_id',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
'abbr': '1',
'name': '1'
},{
'abbr': '2',
'name': '2'
},{
'abbr': '3',
'name': '3'
}]
}),
displayField: 'name',
valueField: 'abbr',
anchor: '100%',
value: data.language_id,
},{
xtype: 'textfield',
fieldLabel: 'Director',
name: 'director',
anchor: '100%',
value: data.director,
},{
xtype: 'textarea',
name: 'description',
fieldLabel: 'Description',
anchor: '100%',
value: data.description,
}],


buttons: [{
text: 'Save',
align: 'center',
formBind: true,
handler: function(btn) {

var win = btn.up('window'),
form = win.down('form');
console.log(form.getForm().getValues());
var values = form.getForm().getValues();
var film_id = grid.getSelectionModel().getSelection()[0]['data'].film_id;

//create an AJAX request
// Ext.Ajax.defaultPostHeader = 'application/json';
Ext.Ajax.request({
method : 'POST',
url : 'http://localhost:8080/Slimfast_track/editServlet',
params : values,


jsonData: true,
success: function (response) {
Ext.Msg.alert("Movie has been Edited!!", response.responseText);
},
failure: function () {
Ext.Msg.alert("Failure", "failed to load")
},
});
win.close();

}

},{
text:'Cancel',
handler: function () {
this.up('window').close();
}
}]
}]
}).show();
},
disabled: true
},'-',{
xtype: 'button',
text: 'Delete',
textAlign: 'center',
disabled: true,
id: 'delete',
listeners:{
click:function(){
var film_id=grid.getSelectionModel().getSelection();
console.log(film_id[0].data.film_id);
var id = [];
for(var i=0;i< film_id.length;i++){
id.push(film_id[i].data.film_id);
}
console.log(id);
Ext.Msg.confirm("Confirmation","Do you want to save the changes?",function(Text){
if(Text==="no"){
Ext.toast("Movie has not been deleted");
}
else if(Text==="yes"){
Ext.toast("Movie has been deleted");

console.log(id);
Ext.Ajax.request({
method:'POST',
url:'http://localhost:8080/Slimfast_track/deleteServlet',
params:{
id:id,
},
jsonData:true,
});
}
},this);
}



}
}]

}),

listeners:{
rowclick:function(grid,idx){
Ext.getCmp('editbtn').enable();
Ext.getCmp('delete').enable();
}

},
columns: [
{
text: 'Title',
width: 150,
dataIndex: 'title'
},
{
text: 'Description',
width: 200,
dataIndex: 'description'

},
{
text: 'Release Year',
dataIndex: 'release_year'
},
{
text: 'Language',
dataIndex: 'language_id'

},
{
text: 'Director',
dataIndex: 'director'

},
{
text: 'Rating',
dataIndex: 'rating'

},

{
text: 'Special Features',
flex:1,
dataIndex: 'special_features'

},
{
text: 'Film_id',
hidden:true,
dataIndex: 'film_id',

}
]
});


}
})