ExtJS4, Spring JPA, Restful services, Hibernate application

Я работаю над книжным хранилищем, используя ExtJS4, Spring JPA, Restful services, Hibernate. Мне нужно создать сетку в Extjs, которая отображает все книги при загрузке страницы и должна быть форма под сеткой, которая имеет возможность добавить книгу. Как только пользователь нажимает кнопку «Добавить» в форме, сетка должна автоматически обновляться и показывать новую книгу.ExtJS4, Spring JPA, Restful services, Hibernate application

Его вид сложной для меня, чтобы построить все с нуля. Я создал код на стороне сервера и получил ответ на методы listBooks и saveBook. Теперь мне нужно создать страницу ExtJS, которая вызывает мои службы, определенные весной, чтобы показать список книг и добавить книгу. Я борюсь с интеграцией ExtJS со стороны сервера. Я не могу назвать услуги через extjs. Я был бы очень признателен за вашу помощь! Я прикрепляю некоторые скриншоты. Также я создал классы Dao и Service для своих соответствующих классов Impl.

Ext.onReady(function(){ 
 

 
\t Ext.create(Ext.window.Window, { 
 
     title : 'Add Book', 
 
     width : 350, 
 
     x : 50, 
 
     y : 275, 
 
     layout : 'fit', 
 
     resizable: false, 
 
     closeAction: 'hide', 
 
     modal : true, 
 
     config : { 
 
     recordIndex : 0, 
 
     action : '' 
 
     }, 
 
     items : [{ 
 
     xtype : 'form', 
 
     layout: 'anchor', 
 
     bodyStyle: { 
 
      background: 'none', 
 
      padding: '10px', 
 
      border: '0' 
 
     }, 
 
     defaults: { 
 
      xtype : 'textfield', 
 
      anchor: '100%' 
 
     }, 
 
     items : [{ 
 
      name : 'isbn', 
 
      fieldLabel: 'ISBN' 
 
     },{ 
 
      name: 'title', 
 
      fieldLabel: 'Title' 
 
     },{ 
 
      name: 'author', 
 
      fieldLabel: 'Author' 
 
     },{ 
 
      name: 'genre', 
 
      fieldLabel: 'Genre' 
 
     },{ 
 
      name: 'details', 
 
      fieldLabel: 'Details' 
 
     }] 
 
     }], 
 
     buttons: [{ 
 
     text: 'Add Book', 
 
     action: 'add' 
 
     /* handler : function(){ 
 
     \t click : this.doAddBook(), 
 
     
 
     \t doAddBook: function(){ 
 
     \t 
 
     \t Ext.window.MessageBox("Hello"); 
 
     \t 
 
     \t } 
 
     
 
     }*/ 
 
     
 
     }] 
 
    }).show(); 
 
    renderTo: Ext.getBody(); 
 
}); 
 

 

 
Ext.define('BookModel', { 
 
\t extend : 'Ext.data.Model', 
 
\t fields : [ 
 
\t {name: 'isbn', type : 'int'}, 
 
\t {name: 'title', type : 'string'}, 
 
\t {name: 'author', type : 'string'}, 
 
\t {name: 'genre', type : 'string'}, 
 
\t {name: 'details', type : 'string'} 
 
\t ] 
 
}); 
 

 

 

 
Ext.define('Bookstore', { 
 
\t 
 
\t extend : 'Ext.data.Store', 
 
\t storeId : 'bookStore', 
 
\t model : 'BookModel', 
 
\t fields : ['isbn', 'title', 'author','genre', 'details'], 
 
\t proxy : { 
 
\t \t type : 'ajax', 
 
\t \t url : 'http://localhost:2016/SpringRestServiceNew/book/list', 
 
\t \t reader : { 
 
\t \t \t type : 'json', 
 
\t \t \t root : 'books' 
 
\t \t } 
 
\t }, 
 
\t autoLoad : true 
 

 
}); 
 

 

 
Ext.define('BooksList', { 
 
\t extend : 'Ext.grid.Panel', 
 
\t title: 'Books List', 
 
\t store : 'Bookstore', 
 
\t columns : [ 
 
\t {header : 'ISBN', dataIndex: 'isbn', flex: 1}, 
 
\t {header: 'Title', dataIndex: 'title'}, 
 
\t {header: 'Author', dataIndex: 'author'}, 
 
\t {header: 'Genre', dataIndex: 'genre'}, 
 
\t {header: 'Details', dataIndex: 'details'}], 
 
\t 
 
\t height : 250, 
 
\t width : 400, 
 
\t renderTo : Ext.getBody() 
 
});

<!-- 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="ISO-8859-1"> 
 
<title>Library Application</title> 
 
<link rel="stylesheet" 
 
\t href="http://cdn.sencha.io/try/extjs/4.1.0/resources/css/ext-all-gray.css" /> 
 
<script src="http://cdn.sencha.io/try/extjs/4.1.0/ext-all-debug.js"></script> 
 
<script type="text/javascript" src="mycode.js"></script> 
 
</head> 
 
<body> 
 
</body> 
 
</html> 
 
--> 
 

 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8" /> 
 
<title>Library Application</title> 
 
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css"> 
 
<script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all-debug.js"></script> 
 
<!--<script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script> --> 
 
<script type="text/javascript" src="mycode.js"></script> 
 
</head> 
 
<body> 
 
</body> 
 
</html>

[BookController [BookDaoImpl [BookServiceImpl [латентном web.xml[ProjectStructure] 1 servlet.xml

источник

2016-03-19 JavaSkyWalker

Есть несколько проблем с вашим кодом.

Поскольку вам нужна форма после списка, вы должны создать панель вместо окна.
Вы визуализации формы окна к телу, но не список

Здесь обновляется код.

Ext.define('BookPanel', { 
 
    extend: 'Ext.Panel', 
 
    xtype: 'bookForm', 
 
    title: 'Add Book', 
 
    resizable: false, 
 
    config: { 
 
    recordIndex: 0, 
 
    action: '' 
 
    }, 
 
    items: [{ 
 
    xtype: 'form', 
 
    layout: 'anchor', 
 
    bodyStyle: { 
 
     background: 'none', 
 
     padding: '10px', 
 
     border: '0' 
 
    }, 
 
    defaults: { 
 
     xtype: 'textfield', 
 
     anchor: '100%' 
 
    }, 
 
    items: [{ 
 
     name: 'isbn', 
 
     fieldLabel: 'ISBN' 
 
    }, { 
 
     name: 'title', 
 
     fieldLabel: 'Title' 
 
    }, { 
 
     name: 'author', 
 
     fieldLabel: 'Author' 
 
    }, { 
 
     name: 'genre', 
 
     fieldLabel: 'Genre' 
 
    }, { 
 
     name: 'details', 
 
     fieldLabel: 'Details' 
 
    }] 
 
    }], 
 
    buttons: [{ 
 
    text: 'Add Book', 
 
    action: 'add' 
 
     /* handler : function(){ 
 
      \t click : this.doAddBook(), 
 
      
 
      \t doAddBook: function(){ 
 
      \t 
 
      \t Ext.window.MessageBox("Hello"); 
 
      \t 
 
      \t } 
 
      
 
     }*/ 
 
    }] 
 
}); 
 

 
Ext.define('BookModel', { 
 
    extend: 'Ext.data.Model', 
 
    fields: [{ 
 
    name: 'isbn', 
 
    type: 'int' 
 
    }, { 
 
    name: 'title', 
 
    type: 'string' 
 
    }, { 
 
    name: 'author', 
 
    type: 'string' 
 
    }, { 
 
    name: 'genre', 
 
    type: 'string' 
 
    }, { 
 
    name: 'details', 
 
    type: 'string' 
 
    }] 
 
}); 
 

 
var data = { 
 
    books: [{ 
 
    isbn: 1, 
 
    title: 'Ed Spencer', 
 
    author: '555 1234' 
 
    }, { 
 
    isbn: 2, 
 
    title: 'Abe Elias', 
 
    author: '666 1234' 
 
    }] 
 
}; 
 

 
Ext.define('BookStore', { 
 

 
    extend: 'Ext.data.Store', 
 
    storeId: 'bookStore', 
 
    model: 'BookModel', 
 
    data: data, 
 
    proxy: { 
 
    type: 'memory', 
 
    reader: { 
 
     type: 'json', 
 
     root: 'books' 
 
    } 
 
    } 
 

 
}); 
 

 

 
Ext.define('BookList', { 
 
    extend: 'Ext.grid.Panel', 
 
    xtype: 'bookList', 
 
    title: 'Books List', 
 
    store: new BookStore(), 
 
    columns: [{ 
 
    header: 'ISBN', 
 
    dataIndex: 'isbn', 
 
    flex: 1 
 
    }, { 
 
    header: 'Title', 
 
    dataIndex: 'title' 
 
    }, { 
 
    header: 'Author', 
 
    dataIndex: 'author' 
 
    }, { 
 
    header: 'Genre', 
 
    dataIndex: 'genre' 
 
    }, { 
 
    header: 'Details', 
 
    dataIndex: 'details' 
 
    }], 
 

 
    height: 250, 
 
    width: 400 
 
}); 
 

 
Ext.application({ 
 
    name: 'Fiddle', 
 

 
    launch: function() { 
 
    Ext.create('Ext.Panel', { 
 
     layout: 'vbox', 
 
     items: [{ 
 
     xtype: 'bookList', 
 
     width: '100%', 
 
     flex: 1 
 
     }, { 
 
     xtype: 'bookForm', 
 
     width: 500, 
 
     flex: 1 
 
     }], 
 
     renderTo: Ext.getBody() 
 
    }); 
 
    } 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>Library Application</title> 
 
    <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css"> 
 
    <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all-debug.js"></script> 
 
</head> 
 

 
<body> 
 
</body> 
 

 
</html>

источник

2016-03-20 05:10:42 JChap

ExtJS4, Spring JPA, Restful services, Hibernate application

ответ

Смежные вопросы