Code:
Ext.define('rms.view.companymgt.companyDetail', {
extend: 'Ext.grid.Panel',
alias: 'widget.companydetail',
id: 'companydetail',
itemId: 'companydetail',
store: 'company',
forceFit: true,
frame: true,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
},
columns: [{xtype: 'rownumberer', width: 40},
{
xtype: 'gridcolumn',
dataIndex: 'cmptitle',
text: 'Company Title'
},
{
xtype: 'gridcolumn',
dataIndex: 'cmpname',
text: 'Company Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'cmpfax',
text: 'Fax'
},
{
xtype: 'gridcolumn',
dataIndex: 'cmpcontact',
text: 'Contact No.'
},
{
xtype: 'gridcolumn',
dataIndex: 'cmpwebsite',
text: 'Website'
},{
xtype: 'gridcolumn',
dataIndex: 'cmpemail1',
text: 'Email'
},{
xtype: 'gridcolumn',
text: 'Company Logo',
dataIndex: 'cmplogopath',
renderer: function(value, p, r){
return '<img src="' + r.data['cmplogopath']+""+ r.data['cmplogo'] + '">';
}
},{
xtype: 'actioncolumn',
id:'companyedit-btn',
header: 'Edit Company',
width: 80,
items: [{
iconCls: 'icon-edit-record',
tooltip: 'Edit Company',
text: 'edit'
}]
},
{
xtype: 'actioncolumn',
id:'projectdelete',
header: 'Delete Project',
width: 80,
items: [{
iconCls: 'icon-delete-record',
action:'delete',
tooltip: 'delete record',
text: 'delete'
}]
}],
//plugins: [rowEditing],
dockedItems: [
{
xtype: 'pagingtoolbar',
displayInfo: true,
store: 'company',
dock: 'bottom'
},
{
xtype: 'toolbar',
id: 'companydetailtoolbar',
dock: 'top',
items: [
{
xtype: 'splitbutton',
text: 'File',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
id: 'mnuCompany',
itemId: 'mnuCompany',
text: 'New Company'
},
{
xtype: 'menuseparator'
},
{
xtype: 'menuitem',
id: 'mnuExit',
text: 'Exit',
action: 'btn-exit-company'
}
]
}
},
{
xtype: 'tbfill'
},
{
xtype: 'textfield',
fieldLabel: 'Search'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'Export',
menu: {
xtype: 'menu',
items: [
{
xtype: 'menuitem',
id: 'mnuExcel',
text: 'Excel'
},
{
xtype: 'menuseparator'
},
{
xtype: 'menuitem',
id: 'mnuCSV',
text: 'CSV'
}
]
}
}
]
}
]
});
me.callParent(arguments);
}
});
Code:
Ext.define('rms.view.companymgt.companyEdit', {
extend: 'Ext.window.Window',
alias: 'widget.companyeditwindow',
id: 'companyeditwindow',
editform:1,
itemId: 'companyeditwindow',
store: 'companyStore',
constrain: true,
height: 595,
width: 875,
layout: {
type: 'column'
},
title: 'Company',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'form',
itemId: 'editmainform',
frame: true,
height: 546,
margin: 2,
width: 838,
layout: {
type: 'column'
},
bodyPadding: 10,
preventHeader: true,
title: 'My Form',
items: [
{
xtype: 'fieldset',
height: 134,
margin: 2,
width: 400,
title: 'Company Information',
items: [
{
xtype: 'textfield',
id: 'cmptitle',
itemId: 'cmptitle',
margin: 5,
width: 366,
name: 'cmptitle',
fieldLabel: 'Company Title',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpname',
itemId: 'cmpname',
margin: 5,
name: 'cmpname',
fieldLabel: 'Company Name',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpwebsite',
itemId: 'cmpwebsite',
margin: 5,
name: 'cmpwebsite',
fieldLabel: 'Website',
anchor: '100%'
}
]
},
{
xtype: 'fieldset',
height: 138,
margin: 2,
width: 400,
title: 'Company Contact',
items: [
{
xtype: 'textfield',
id: 'cmpfax',
itemId: 'cmpfax',
margin: 5,
name: 'cmpfax',
fieldLabel: 'Fax No',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpcontact',
itemId: 'cmpcontact',
margin: 5,
name: 'cmpcontact',
fieldLabel: 'Contact No',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpemail1',
itemId: 'cmpemail1',
margin: 5,
name: 'cmpemail1',
fieldLabel: 'Email',
anchor: '100%'
},
{
xtype: 'textfield',
id: 'cmpemail2',
itemId: 'cmpemail2',
margin: 5,
name: 'cmpemail2',
fieldLabel: 'Other Email',
anchor: '100%'
}
]
},
{
xtype: 'fieldset',
height: 350,
margin: 2,
width: 397,
title: 'Company Address',
items: [
{
id: 'btn-add-country',
itemId: 'btn-add-country',
xtype: 'button',
margin: '4 0 0 303',
style: 'position:absolute;',
width: 71,
text: 'Add Country',
action: 'btn-add-country'
},
{
xtype: 'combobox',
id: 'countryname',
itemId: 'countryname',
name: 'countryname',
margin: 5,
width: 294,
fieldLabel: 'Country',
emptyText: 'Select Country...',
displayField: 'countryname',
store: 'country',
valueField: 'countryid'
},
{
xtype: 'button',
id: 'btn-add-state',
itemId: 'btn-add-state',
margin: '0 0 0 303',
style: 'position:absolute;',
width: 71,
text: 'Add State',
action: 'btn-add-state'
},
{
xtype: 'combobox',
id: 'statename',
itemId: 'statename',
margin: 5,
width: 294,
name: 'statename',
fieldLabel: 'State',
emptyText: 'Select State...',
displayField: 'statename',
store: 'state',
valueField: 'stateid'
},
{
id: 'btn-add-city',
itemId: 'btn-add-city',
xtype: 'button',
margin: '0 0 0 303',
style: 'position:absolute;',
width: 71,
text: 'Add City',
action: 'btn-add-city'
},
{
xtype: 'combobox',
id: 'cityname',
itemId: 'cityname',
margin: 5,
width: 294,
name: 'cityname',
fieldLabel: 'City',
emptyText: 'Select City...',
displayField: 'cityname',
store: 'city',
valueField: 'cityid'
},
{
xtype: 'textareafield',
height: 75,
id: 'cmpaddress',
itemId: 'cmpaddress',
margin: 5,
width: 380,
name: 'cmpaddress',
fieldLabel: 'Address',
anchor: '100%'
},
{
xtype: 'htmleditor',
height: 146,
id: 'cmpdesc',
itemId: 'cmpdesc',
margin: 5,
style: 'background-color: white;',
name: 'cmpdesc',
fieldLabel: 'Description',
hideLabel: true,
anchor: '100%'
}
]
},
{
xtype: 'fieldset',
height: 350,
margin: 2,
width: 398,
title: 'Company Logo',
items: [
{
xtype: 'form',
frame: true,
itemId: 'logoform',
id: 'logoform',
height: 320,
width: 375,
bodyPadding: 10,
preventHeader: true,
title: 'My Form',
items: [
{
xtype: 'image',
height: 158,
itemId: 'cmplogoimg',
margin: 10,
width: 287,
src:'http://www.sencha.com/img/sencha-large.png'
},
{
xtype: 'filefield',
margin: '10 0 0 15',
width: 296,
name: 'file',
id: 'file',
itemId: 'file',
fieldLabel: 'File',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
emptyText: 'Select file',
buttonText: 'Select a File...'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
alert('VALUE IS :'+form.getValues());
if(form.isValid()){
form.submit({
url: 'company/UploadFile.action',
waitMsg: 'Uploading your file...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your file has been uploaded.');
Ext.Ajax.request({
url: 'company/GetImages.action',
scope: this,
success: function(response,opts) {
console.log('GET IMAGES');
}
});
}
});
}
}
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'Reset',
itemId: 'btn-reset',
action: 'btn-reset'
,
handler: function() {
this.up('form').getForm().reset();
}
}
]
}]
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
height: 27,
width: 804,
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: 'Save',
action: 'btn-update-company'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
text: 'Exit',
action: 'btn-exit-company'
}
]
}
]
}
]
});
me.callParent(arguments);
}
});
Code:
Ext.define('rms.model.companyModel', {
extend: 'Ext.data.Model',
fields : [
{ name: 'id', type: 'int', useNull: true, mapping: 'id'},
{ name: 'cmpname', type: 'string', mapping: 'cmpname'},
{ name: 'cmptitle', type: 'string', mapping: 'cmptitle'},
{ name: 'cmpdesc', type: 'string', mapping: 'cmpdesc'},
{ name: 'cmpfax', type: 'string', mapping: 'cmpfax'},
{ name: 'cmpcontact', type: 'string', mapping: 'cmpcontact'},
{ name: 'cmpwebsite', type: 'string', mapping: 'cmpwebsite'},
{ name: 'cmpemail1', type: 'string', mapping: 'cmpemail1'},
{ name: 'cmpemail2', type: 'string', mapping: 'cmpemail2'},
{ name: 'countryid', type: 'int', mapping: 'countryid'},
{ name: 'stateid', type: 'int', mapping: 'stateid'},
{ name: 'cityid', type: 'int', mapping: 'cityid'},
{ name: 'cmplogo', type: 'string', mapping: 'cmplogo'},
{ name: 'cmplogopath', type: 'string', mapping: 'cmplogopath'},
{ name: 'cmpaddress', type: 'string', mapping: 'cmpaddress'},
]
});