View Full Version : my application don't display anything

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

enabled : true

Ext.onReady(function() {

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



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

//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
//get the Item Number field in the form and protect it


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
//check if the form passed all validations
//if there are no errors then send the Add request to server
url: 'ItemMaintenance',
params: {
company: 1,
//this encodes the form values to a JSON object
addData: Ext.encode(form.getValues())
//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
else {
//get reference to the record
record = form.getRecord();
//get reference to the form values
values = form.getValues();
//set the record with new values
//close the window
//Ask the stote to sync the new data with the server

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


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


<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>


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?

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