PDA

View Full Version : my application don't display anything



bothman
4 Dec 2015, 6:32 AM
Hi all
this is my app.js


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

Ext.onReady(function() {
Ext.application({

name : 'IN',

appFolder : 'app',

controllers : ['Items'],

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

}
});
})

and this is my List.js (found in app.view.item folder)


Ext.define('IN.view.item.List', {
extend : 'Ext.grid.Panel',
alias : 'widget.itemlist',
title : 'List of Items',
store : 'Items',
loadMask : true,
autoheight : true,

initComponent : function() {

this.columns = [{
header : 'User Name',
dataIndex : 'user-name',
flex : 1
}, {
header : 'Password',
dataIndex : 'password',
flex : 1
}, {
header : 'Description 1',
dataIndex : 'desc1',
flex : 1
}, {
header : 'Description 2',
dataIndex : 'desc2',
flex : 1
}, {
header : 'Description 3',
dataIndex : 'desc3',
flex : 1
}];

this.callParent(arguments);
}

});

and this is my controller controller.js (found in app.controrller folder)


Ext.define('IN.controller.Items', {
extend : 'Ext.app.Controller',

//define the stores
stores : ['Items'],
//define the models
models : ['Item'],
//define the views
views : ['item.List', 'item.Edit', 'item.MyNumberField'],

//special method that is called when your application boots
init : function() {

//control function makes it easy to listen to events on
//your view classes and take some action with a handler function
this.control({

//when the viewport is rendered
'viewport > panel' : {
render : this.onPanelRendered
},

//when you double click on the grid layout
'itemlist' : {
itemdblclick : this.editItem
},

//when you click in the grid toolbar Add button
'itemlist button[action=add]' : {
click : this.addItem
},

//when you click on the Edit window save button
'itemedit button[action=save]' : {
click : this.updateItem
}
});
},

onPanelRendered : function() {
//just a console log to show when the panel si rendered
console.log('The panel was rendered');
},

addItem : function() {
//create the window and set the mode to Add
var view = Ext.widget('itemedit');
view.addMode = true;
},

editItem : function(grid, record) {
//create the window for editing
//the double click on the row sends the grid row record
var view = Ext.widget('itemedit');
//load the record into the form
view.down('form').loadRecord(record);
//get the Item Number field in the form and protect it
view.down('form').getComponent('itemNumber').setReadOnly(true);

},

updateItem : function(button) {
//get access to the window using the button reference
var win = button.up('window');
//get access to the form using the window reference
form = win.down('form');

//Add an Item
if(win.addMode){
//check if the form passed all validations
if(form.getForm().isValid()){
//if there are no errors then send the Add request to server
Ext.Ajax.request({
url: 'ItemMaintenance',
params: {
company: 1,
//this encodes the form values to a JSON object
addData: Ext.encode(form.getValues())
},
scope:this,
//method to call when the request is successful
success: this.onSaveSuccess,
//method to call when the request is a failure
failure: this.onSaveFailure
});
//close the window
win.close();
}
}
else {
//get reference to the record
record = form.getRecord();
//get reference to the form values
values = form.getValues();
//set the record with new values
record.set(values);
//close the window
win.close();
//Ask the stote to sync the new data with the server
this.getItemsStore().sync();
}
},

onSaveFailure: function(err){
//Alert the user about communication error
Ext.MessageBox.alert('Status', 'Error occured during Item Add');
},

onSaveSuccess: function(response){
//Alert the user about communication error
Ext.MessageBox.alert('Status', 'Item successfully Added');
//load the store to get the new Item that was added
this.getItemsStore().load();
}

});



when I run my index.html nothing happen and I don't know why

index,html


<html>
<head>
<title>User Configuration</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>

</head>
<body></body>
</html>

Gary Schlosberg
7 Dec 2015, 3:54 PM
No errors or warnings in the console? Just a white screen? What does your Items store look like?

bothman
9 Dec 2015, 11:47 AM
thanks for your help the problem was that I defined view in controller file but I keep that view file empty whithout writing anything in it when I delete this file and delete the name from the controller every thing run well