Notes

Ext.onReady(function () {

// **************************************************************//
// **************************************************************//

Ext.create('Ext.form.Panel', {
title: 'Movie Advance Search',
width: '100%',
height: 280,
bodyPadding: '50 50 50 220',
defaults: {
border: false,
xtype: 'panel',
flex: 1,
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [{
xtype: 'textfield',
fieldLabel: 'Movie Name',
name: 'Mov',
id: 'title'
}, {
xtype: 'datefield',
name: 'date',
fieldLabel: 'Release Year',
formatter: 'date("Y")'

}]
}, {
items: [{
xtype: 'textfield',
fieldLabel: 'Director',
name: 'director'
}, {
xtype: 'combo',
store: {
type: 'array',
fields: ['Language'],
data: [
['1'],
['2'],

]
},
displayField: 'Language',
fieldLabel: 'Language',
name: 'lang',
}]
}],

// Reset and Submit buttons
buttons: [{

text: 'Search',
margin: '5 0 0 100',
disabled: true,
formBind: true,
handler: function () {
var M = Ext.getCmp('title').getValue();
console.log(M);
Ext.Ajax.request({
method: 'POST',
url: 'http://localhost:8080/SlimFast/table',
params: {
Movie: M,
}
});
}

}, {
text: 'Reset',
margin: '0 750 0 10',
// formBind: true,
// disabled: true,
handler: function () {
this.up('form').getForm().reset();
}

}],
renderTo: Ext.getBody()

});

//**************************************************************//
//**************************************************************//

Ext.define('dialog', {
extend: 'Ext.window.Window',
title: 'Add Film',
height: 500,
width: 500,
bodyPadding: 5,
layout: 'fit',
items: [{
border: false,
//renderTo: Ext.getBody(),
iconCls: 'icon-grid',
animCollapse: false,
xtype: 'form',
header: false,
bodyPadding: 15,
url: 'http://localhost:8080/Test/add.action',
items: [{
xtype: 'textfield',
fieldLabel: 'Title',
anchor: '100%',
name: 'title',
allowBlank: false
}, {
xtype: 'numberfield',
fieldLabel: 'Release year',
name: 'release_year',
maxValue: 2010,
minValue: 2000,
anchor: '100%',
allowBlank: false
}, {
xtype: 'combo',
fieldLabel: 'Special features',
name: 'special_features',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
'abbr': 'Trailers',
'name': 'Trailers'
}, {
'abbr': 'Commentaries',
'name': 'Commentaries'
}, {
'abbr': 'Deleted Scenes',
'name': 'Deleted Scenes'
}, {
'abbr': 'Behind the Scenes',
'name': 'Behind the Scenes'
}]
}),
displayField: 'name',
valueField: 'abbr',
anchor: '100%',
allowBlank: false
}, {
xtype: 'combo',
fieldLabel: 'Rating',
name: 'rating',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
'abbr': 'G',
'name': 'G'
}, {
'abbr': 'PG',
'name': 'PG'
}, {
'abbr': 'PG-13',
'name': 'PG-13'
}, {
'abbr': 'R',
'name': 'R'
}, {
'abbr': 'NC-17',
'name': 'NC-17'
}]
}),
displayField: 'name',
valueField: 'abbr',
anchor: '100%',
allowBlank: false
}, {
xtype: 'combo',
fieldLabel: 'Language',
name: 'language_id',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
'abbr': '1',
'name': 'English'
}, {
'abbr': '2',
'name': 'Italian'
}, {
'abbr': '3',
'name': 'Japanese'
}, {
'abbr': '4',
'name': 'Mandarian'
}, {
'abbr': '5',
'name': 'French'
}, {
'abbr': '6',
'name': 'German'
}, {
'abbr': '7',
'name': 'Mongolian'
}]
}),
displayField: 'name',
valueField: 'abbr',
anchor: '100%',
allowBlank: false
},

{
xtype: 'textfield',
fieldLabel: 'Director',
name: 'director',
anchor: '100%'
}, {
xtype: 'textarea',
name: 'description',
fieldLabel: 'Description',
anchor: '100%',
allowBlank: false
}
],

buttons: [{
text: 'Save',
margin: '0 100 0 50',
disabled: true,
formBind: true,
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
// Submit the Ajax request and handle the response
form.submit({
success: function (form, action) {
Ext.Msg.alert('Success', 'Details entered succesfully');
},
failure: function (form, action) {
Ext.Msg.alert('Failed');
}
});
}
}
}, {
text: 'Cancel',
margin: '0 160 0 -95',
handler: function () {
this.up('window').close();
}
}]
}]

});

//**************************************************************//
//**************************************************************//
var itemsPerPage = 9;
var store = Ext.create('Ext.data.Store', {
storeId: 'invoiceStore',
pageSize: itemsPerPage,
autoLoad: false,
fields: ['film_id', 'title', 'description', 'release_year', 'language_id', 'director', 'rating', 'special_features'],
proxy: {
type: 'ajax',
url: 'http://localhost:8080/Test/execute.action',
disableCaching: false,
reader: {
type: 'json',
rootProperty: 'list',
totalproperty: 'total',
}
},
});
store.load({
params: {
start: 0,
limit: itemsPerPage
}
});
Ext.create('Ext.grid.Panel', {
defaultListenerScope: true,

// This view acts as a reference holder for all components below it which have a reference config
// For example the onSelectionChange listener accesses a button using its reference
referenceHolder: true,

onSelectionChange: function (sm, selections) {
this.getReferences().removeButton.setDisabled(selections.length === 0);
this.getReferences().EditButton.setDisabled(selections.length > 1);
},
title: 'Movie Grid',
width: '100%',
height: 440,
store: store,
id: 'testGrid',
columns: [{
text: 'ID',
dataIndex: 'film_id',
hidden: true,
height: 45,
width: 180,
name: 'film_id'
}, {
text: 'Title',
dataIndex: 'title',
name: 'title'
}, {
text: 'Description',
dataIndex: 'description',
flex: 1,
name: 'description'
}, {
text: 'Release Year',
dataIndex: 'release_year',
flex: 1,
name: 'release_year',
formatter: 'date("Y")'
}, {
text: 'Language',
dataIndex: 'language_id',
flex: 1,
name: 'language_id'
}, {
text: 'Director',
dataIndex: 'director',
flex: 1,
name: 'director'
}, {
text: 'Rating',
dataIndex: 'rating',
flex: 1,
name: 'rating'
}, {
text: 'Special Feature',
dataIndex: 'special_features',
flex: 1,
name: 'special_features'
}],
renderTo: Ext.getBody(),
selModel: {
checkOnly: false,
injectCheckbox: 'first',
mode: 'SIMPLE'
},
selType: 'checkboxmodel',
listeners: {
selectionchange: 'onSelectionChange',

},
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'top',
displayInfo: true,
items: [
'-', {
xtype: 'button',
text: '<span class="x-fa fa-plus-circle fa-lg" style="color:#42a1f5;"></span> Add',
handler: function(){
pop = Ext.create('dialog');
pop.show();
}
}, '-', {
xtype: 'button',
text: '<span class="x-fa fa-edit fa-lg" style="color:#42a1f5;"></span> Edit',
disabled: true,
reference: 'EditButton',
handler: function () {
var data = Ext.getCmp('testGrid').getSelectionModel().getSelection();
myvalue = [];
var t, d, l, r, di, s, ry;
myvalue = data[0].get('film_id');
t = data[0].get('title');
d = data[0].get('description');
ry = data[0].get('release_year');
l = data[0].get('language_id');
r = data[0].get('rating');
s = data[0].get('special_features');
di = data[0].get('director');
Ext.create('Ext.window.Window', {
title: 'Edit Film',
height: 450,
width: 500,
bodyPadding: 5,
layout: 'fit',
items: [{
border: false,
//renderTo: Ext.getBody(),
iconCls: 'icon-grid',
animCollapse: false,
xtype: 'form',
header: false,
bodyPadding: 15,
url: 'http://localhost:8080/struts/Editaction.action',
items: [{
xtype: 'hiddenfield',
fieldLabel: 'ID',
anchor: '100%',
value: myvalue,
name: 'film_id',

}, {
xtype: 'textfield',
fieldLabel: 'Title',
anchor: '100%',
value: t,
name: 'title',
id: 'tle'
}, {
xtype: 'numberfield',
fieldLabel: 'Release year',
value: ry,
name: 'release_year',
maxValue: 2010,
minValue: 2000,
anchor: '100%',
id: 'ryr'
}, {
xtype: 'combo',
fieldLabel: 'Special features',
value: s,
id: 'sf',
name: 'special_features',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
'abbr': 'Trailers',
'name': 'Trailers'
}, {
'abbr': 'Commentaries',
'name': 'Commentaries'
}, {
'abbr': 'Deleted Scenes',
'name': 'Deleted Scenes'
}, {
'abbr': 'Behind the Scenes',
'name': 'Behind the Scenes'
}]
}),
displayField: 'name',
valueField: 'abbr',
anchor: '100%'
}, {
xtype: 'combo',
fieldLabel: 'Rating',
value: r,
id: 'rtg',
name: 'rating',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
'abbr': 'G',
'name': 'G'
}, {
'abbr': 'PG',
'name': 'PG'
}, {
'abbr': 'PG-13',
'name': 'PG-13'
}, {
'abbr': 'R',
'name': 'R'
}, {
'abbr': 'NC-17',
'name': 'NC-17'
}]
}),
displayField: 'name',
valueField: 'abbr',
anchor: '100%'
}, {
xtype: 'combo',
fieldLabel: 'Language',
value: l,
id: 'lng',
name: 'language_id',
store: Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
'abbr': '1',
'name': 'English'
}, {
'abbr': '2',
'name': 'Italian'
}, {
'abbr': '3',
'name': 'Japanese'
}, {
'abbr': '4',
'name': 'Mandarian'
}, {
'abbr': '5',
'name': 'French'
}, {
'abbr': '6',
'name': 'German'
}, {
'abbr': '7',
'name': 'Mongolian'
}]
}),
displayField: 'name',
valueField: 'abbr',
anchor: '100%'
}, {
xtype: 'textfield',
fieldLabel: 'Director',
value: di,
name: 'director',
anchor: '100%',
id: 'dir'
}, {
xtype: 'textarea',
name: 'description',
value: d,
fieldLabel: 'Description',
anchor: '100%',
id: 'des'
}],

buttons: [{
text: 'Submit',
formBind: true,
method: 'POST',
//handler: 'onSubmit'
handler: function () {
// The getForm() method returns the Ext.form.Basic instance:
var form = this.up('form').getForm();
if (form.isValid()) {
// Submit the Ajax request and handle the response
form.submit({
success: function (form, action) {
Ext.Msg.alert('Success');

},
failure: function (form, action) {
Ext.Msg.alert('Failed');
}
});
}
}
}]
}]
}).show();

},
},
'-', {
xtype: 'button',
text: 'Delete',
disabled: true,
reference: 'removeButton',

handler: function () {
Ext.create('Ext.window.Window', {
title: 'Confirmation',
height: 200,
width: 300,
bodyPadding: 5,
html: 'Are you sure you want to delete the record?',
buttons: [{
text: 'Yes',
handler: function () {
var data = Ext.getCmp('testGrid').getSelectionModel().getSelection();
myvalue = [];
for (i = 0; i < data.length; i++) {
myvalue += data[i].get('film_id') + ",";
}
console.log(myvalue);
Ext.Ajax.request({
url: 'http://localhost:8080/struts/Deleteaction.action',
params: {
film_id: myvalue,
}
});
if (data) {

store.remove(data);
Ext.toast('Data Saved');
}
this.up('window').close();
}
}, {
text: 'No',

handler: function () {
this.up('window').close();
}
}]
}).show();
}

}
],
}]
});
});