Related
I would like to get my values from my form through the getRecord() function.
This is the result im currently getting from form.getRecord():
The data object is empty.
This is my controller:
onAddNewsClick: function(button, e, eOpts) {
var win = this.getNewsEdit();
if(!win){
win = Ext.create('widget.newsedit');
}
this.getNewsPanel().loadRecord(Ext.create('model.news'));
console.log(this.getNewsPanel());
this.adding = true;
win.show();
},
OnSaveNewsClick: function(button, e, eOpts) {
var form = this.getNewsPanel();
console.log(form);
var selectedRecord = form.getRecord();
console.log(selectedRecord);
if (this.adding) {
this.adding = undefined;
}
}
The correspoding Model:
Ext.define('mobile_admin.model.News', {
extend: 'Ext.data.Model',
alias: 'model.news',
requires: [
'Ext.data.field.Field'
],
fields: [
{
name: 'title'
},
{
name: 'newscontent'
},
{
name: 'newsdate'
},
{
name: 'status'
}
]});
With form.getValues() I get all the values of the form.
It feels like that the model is not connecting to the form. In the form I put the necessary name connection: (http://docs.sencha.com/extjs/5.1.0/Ext.form.Basic.html#method-loadRecord)
My Form items:
items: [
{
xtype: 'textfield',
fieldLabel: 'Titel',
name: 'title'
},
{
xtype: 'datefield',
fieldLabel: 'Datum',
name: 'newsdate'
},
{
xtype: 'htmleditor',
height: 150,
width: 600,
fieldLabel: 'Inhalt',
name: 'newscontent',
},
{
xtype: 'textfield',
fieldLabel: 'Status',
name: 'status'
},
]
Anyone has an idea?
I use ExtJs (5.1.3).
//EDIT:
I found out that I can set the record like this:
var b = form.getRecord()
b.set(form.getValues()
Shouln't this ExtJs do automatically?
What loadRecord really do is just setting values. Form don't use this record any more. Here is form docs:
loadRecord: function(record) {
this._record = record;
return this.setValues(record.getData());
},
You asked if setting values to record can be done automatically. Yes, it is possible, but binding is required.
I prepared a sample code:
Ext.define('mobile_admin.model.News', {
extend: 'Ext.data.Model',
alias: 'model.news',
requires: [
'Ext.data.field.Field'
],
fields: [
{
name: 'title', defaultValue : 'test'
},
{
name: 'newscontent'
},
{
name: 'newsdate'
},
{
name: 'status'
}
]
});
Ext.define('mobile_admin.form.ViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.formpanel',
links : {
theModel : {
type : 'mobile_admin.model.News',
create : true
}
}
});
Ext.define('mobile_admin.form.formpanel', {
extend: 'Ext.form.Panel',
alias: 'widget.newsedit',
viewModel : 'formpanel',
items : [
{
xtype: 'textfield',
fieldLabel: 'Titel',
name: 'title',
bind : {
value : '{theModel.title}'
}
},
{
xtype: 'datefield',
fieldLabel: 'Datum',
name: 'newsdate',
bind : {
value : '{theModel.newsdate}'
}
},
{
xtype: 'htmleditor',
height: 150,
width: 600,
fieldLabel: 'Inhalt',
name: 'newscontent',
bind : {
value : '{theModel.newscontent}'
}
},
{
xtype: 'textfield',
fieldLabel: 'Status',
name: 'status',
bind : {
value : '{theModel.status}'
}
}],
buttons : [{
text : 'Save',
handler : function(button) {
var vM = button.up('form').getViewModel();
vM.notify();
console.log(vM.get('theModel').getData());
}
}]
});
Ext.application({
name : 'Fiddle',
launch : function() {
debugger;
var form = Ext.widget('newsedit');
var window = Ext.widget('window', {
items : form
});
window.show();
}
});
I'm trying to bind store to combobox editor in grid. My view is subclass of grid with cellediting plugin. I'm trying to bind at least static store with yes/no option. I tried many options and nothing worked.
Grid class:
Ext.define('App.view.school.room.RoomGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.school-room-grid',
controller: 'school-room-grid',
requires: [
'App.view.school.room.RoomGridController',
'App.view.school.room.RoomGridViewModel',
'Ext.button.Button',
'Ext.grid.plugin.CellEditing',
'Ext.grid.Panel',
'Ext.picker.Color',
'Ext.toolbar.Paging',
'Ext.toolbar.Toolbar'
],
reference: 'roomGrid',
viewModel: {
type: 'room'
},
bind: {
store: '{rooms}',
title: '{currentRoom.name}'
},
border: false,
itemId: 'testGrid',
glyph: 0xf0ce,
forceFit: true,
plugins: [
{
ptype: 'cellediting',
pluginId: 'editing'
}
],
header: {
title: 'Title',
padding: '4 9 4 9'
},
columns: [
//...
{
xtype: 'gridcolumn',
dataIndex: 'general',
text: 'SomeColumnYesNo',
editor:{
xtype: 'combobox',
bind: {
value:'{currentRoom.general}',
store:'{yesnoCombo}' //not working
},
displayField : 'name',
valueField : 'id',
selectOnFocus: true
}
}
],
buttons: [
{
itemId: 'addButton',
xtype: 'button',
width: 70,
scale: 'small',
text: 'Dodaj',
glyph: 0xf067
},
{
itemId: 'printButton',
xtype: 'button',
width: 70,
scale: 'small',
text: 'Drukuj',
glyph: 0xf02f
},
{
xtype: 'tbfill'
},
{
itemId: 'rejectButton',
xtype: 'button',
width: 22,
scale: 'small',
text: 'Anuluj',
glyph: 0xf021,
bind: {
disabled: '{!storeDirty}'
}
},
{
itemId: 'saveButton',
xtype: 'button',
width: 22,
scale: 'small',
text: 'Zapisz',
glyph: 0xf00c,
bind: {
disabled: '{!storeDirty}'
}
}
],
initComponent: function () {
me.callParent(arguments);
},
});
ViewModel class:
Ext.define('App.view.school.room.RoomGridViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.room',
requires: [
'App.store.RoomStore',
'App.store.BuildingStore',
'App.store.TeacherStore',
'App.store.local.YesNoStore'
],
stores: {
//...
yesnoCombo:{
type:'local.yesnostore'
}
},
data: {
currentRoom: null
}
});
ViewController class:
Ext.define('App.view.school.room.RoomGridController', {
extend: 'Deft.mvc.ViewController',
alias: 'controller.school-room-grid',
requires: [
'App.view.school.room.RoomGridViewModel'
],
inject: [
'viewContext'
],
bind: {
currentRoom: '{currentRoom}',
store: '{rooms}'
},
config: {
currentRoom: null,
/** #type App.store.RoomStore */
roomStore: null,
/** #type App.context.ViewContext */
viewContext: null
},
control: {
'#': {
boxready: 'onBoxReady',
select: 'onSelect'
},
'#addButton': {
click: 'onAddButtonClick'
},
'#rejectButton': {
click: 'onRejectButtonClick'
},
'#saveButton': {
click: 'onSaveButtonClick'
}
},
onStoreLoading: function () {
Deft.Logger.info(this.$className + '.onStoreLoading');
var me = this;
me.getView().setLoading(true);
},
onStoreLoaded: function () {
Deft.Logger.info(this.$className + '.onStoreLoaded');
var me = this;
me.getView().setLoading(false);
},
//...
}
static store:
Ext.define('Perykles.store.local.YesNoStore', {
extend:'Ext.data.Store',
fields: ['id', 'name'],
autoLoad:false,
alias: 'store.local.yesnostore',
data : [
{"id":"true", "name":"Tak"},
{"id":"false", "name":"Nie"}
]
});
When I click on column binded to store to edit value instead of showing yes/no option in combobox i receive following error:
[E] Cannot modify ext-empty-store
Object
console.trace()
Uncaught Error: Cannot modify ext-empty-store
Any help would be appreciated.
I am new for sencha touch. I using mvc method. Please see my code below
Main.js
Ext.define('test.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video',
'Ext.dataview.NestedList'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'nestedlist',
}
]
}
]
}
});
Nestedlist.js
Ext.define('bluebutton.view.NestedList', {
extend: 'Ext.NestedList',
xtype: 'nestedlist',
requires: [
'Ext.field.Select',
'Ext.field.Search',
'Ext.plugin.ListPaging',
'Ext.plugin.PullRefresh',
],
config: {
store : { xclass : 'Test.store.data'},
detailContainer: detailContainer,
detailCard: true,
},
});
Test.store.data
Ext.define('Test.store.data', {
extend: 'Ext.data.TreeStore',
config: {
model: 'Test.model.data',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Drinks',
items: [
{
text: 'Water',
items: [
{ text: 'Still', leaf: true },
{ text: 'Sparkling', leaf: true }
]
},
{ text: 'Soda', leaf: true }
]
},
{
text: 'Snacks',
items: [
{ text: 'Nuts', leaf: true },
{ text: 'Pretzels', leaf: true },
{ text: 'Wasabi Peas', leaf: true }
]
}
]
}
}
});
model.js
Ext.define('Test.model.data', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});
But nested list no able to get the data. I get empty list. Any solution?
If you are providing inline data in store shouldn't it be data attribute instead of root?
Ext.define('Test.store.data', {
extend: 'Ext.data.TreeStore',
config: {
model: 'Test.model.data',
defaultRootProperty: 'items',
data: {
items: [
{
text: 'Drinks',
items: [
{
text: 'Water',
items: [
{ text: 'Still', leaf: true },
{ text: 'Sparkling', leaf: true }
]
},
{ text: 'Soda', leaf: true }
]
},
{
text: 'Snacks',
items: [
{ text: 'Nuts', leaf: true },
{ text: 'Pretzels', leaf: true },
{ text: 'Wasabi Peas', leaf: true }
]
}
]
}
}
});
I have created an application designed in Spring MVC3, Hibernate and Ext Js. It's a books library. I use Eclipse IDE.
In the WebContent folder i created the extjs application named app , there I uploaded extjs files too.
My application contains 4 packages: controller, model, store and view.
Controller Books.js:
Ext.define('ExtJS.controller.Books', {
extend: 'Ext.app.Controller',
stores: ['Books'],
models: ['Book'],
views: ['book.Edit', 'book.List'],
refs: [{
ref: 'booksPanel',
selector: 'panel'
},{
ref: 'booklist',
selector: 'booklist'
}
],
init: function() {
this.control({
'booklist dataview': {
itemdblclick: this.editUser
},
'booklist button[action=add]': {
click: this.editUser
},
'booklist button[action=delete]': {
click: this.deleteUser
},
'bookedit button[action=save]': {
click: this.updateUser
}
});
},
editUser: function(grid, record) {
var edit = Ext.create('ExtJS.view.book.Edit').show();
if(record){
edit.down('form').loadRecord(record);
}
},
updateUser: function(button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
if (values.id > 0){
record.set(values);
} else{
record = Ext.create('ExtJS.model.Book');
record.set(values);
record.setId(0);
this.getBooksStore().add(record);
}
win.close();
this.getBooksStore().sync();
},
deleteUser: function(button) {
var grid = this.getBooklist(),
record = grid.getSelectionModel().getSelection(),
store = this.getBooksStore();
store.remove(record);
this.getBooksStore().sync();
}
});
Model Book.js:
Ext.define('ExtJS.model.Book', {
extend: 'Ext.data.Model',
fields: ['id', 'title', 'author', 'publisher', 'isbn', 'pages', 'category', 'qty']
});
Store Books.js:
Ext.define('ExtJS.store.Books', {
extend: 'Ext.data.Store',
model: 'ExtJS.model.Book',
autoLoad: true,
pageSize: 35,
autoLoad: {start: 0, limit: 35},
proxy: {
type: 'ajax',
api: {
read : 'books/view.action',
create : 'books/create.action',
update: 'books/update.action',
destroy: 'books/delete.action'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true,
encode: false,
root: 'data'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});
View contains the Viewport.js:
Ext.define('ExtJS.view.Viewport', {
extend: 'Ext.container.Viewport'
});
and a folder named book where I have:
List.js:
Ext.define('ExtJS.view.book.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.booklist',
//requires: ['Ext.toolbar.Paging'],
iconCls: 'icon-grid',
title : 'Books',
store: 'Books',
columns: [{
header: "Title",
width: 50,
flex:1,
dataIndex: 'title'
},{
header: "Author",
width: 50,
flex:1,
dataIndex: 'author'
},{
header: "Publisher",
width: 50,
flex:1,
dataIndex: 'publisher'
},{
header: "Isbn",
width: 50,
flex:1,
dataIndex: 'isbn'
},{
header: "Pages",
width: 50,
flex:1,
dataIndex: 'pages'
},{
header: "Category",
width: 50,
flex:1,
dataIndex: 'category'
},{
header: "Qty",
width: 50,
flex:1,
dataIndex: 'qty'
}],
initComponent: function() {
this.dockedItems = [{
xtype: 'toolbar',
items: [{
iconCls: 'icon-save',
itemId: 'add',
text: 'Add',
action: 'add'
},{
iconCls: 'icon-delete',
text: 'Delete',
action: 'delete'
}]
},
{
xtype: 'pagingtoolbar',
dock:'top',
store: 'Books',
displayInfo: true,
displayMsg: 'Displaying books {0} - {1} of {2}',
emptyMsg: "No books to display"
}];
this.callParent(arguments);
}
});
and
Edit.js:
Ext.define('ExtJS.view.book.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.bookedit',
requires: ['Ext.form.Panel','Ext.form.field.Text'],
title : 'Edit Book',
layout: 'fit',
autoShow: true,
width: 280,
iconCls: 'icon-user',
initComponent: function() {
this.items = [
{
xtype: 'form',
padding: '5 5 0 5',
border: false,
style: 'background-color: #fff;',
fieldDefaults: {
anchor: '100%',
labelAlign: 'left',
allowBlank: false,
combineErrors: true,
msgTarget: 'side'
},
items: [
{
xtype: 'textfield',
name : 'id',
fieldLabel: 'id',
hidden:true
},
{
xtype: 'textfield',
name : 'title',
fieldLabel: 'Title'
},
{
xtype: 'textfield',
name : 'author',
fieldLabel: 'Author'
},
{
xtype: 'textfield',
name : 'publisher',
fieldLabel: 'Publisher'
},
{
xtype: 'textfield',
name : 'isbn',
fieldLabel: 'Isbn'
},
{
xtype: 'textfield',
name : 'pages',
fieldLabel: 'Pages'
},
{
xtype: 'textfield',
name : 'category',
fieldLabel: 'Category'
},
{
xtype: 'textfield',
name : 'qty',
fieldLabel: 'Qty'
}
]
}
];
this.dockedItems = [{
xtype: 'toolbar',
dock: 'bottom',
id:'buttons',
ui: 'footer',
items: ['->', {
iconCls: 'icon-save',
itemId: 'save',
text: 'Save',
action: 'save'
},{
iconCls: 'icon-reset',
text: 'Cancel',
scope: this,
handler: this.close
}]
}];
this.callParent(arguments);
}
});
My app.js:
Ext.application({
name: 'ExtJS',
controllers: [
'Books'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'booklist'
}
]
});
}
});
The error "Remote exception" from store/Books.js is thrown. I don't know what can be the problem.
EDIT:
The problem is: "Error retrieving books from database". It comes from Java Controller:
#Controller
public class BookController {
private BookService bookService;
#RequestMapping(value="/books/view.action")
public #ResponseBody Map<String,? extends Object> view(#RequestParam int start, #RequestParam int limit) throws Exception {
try{
List<Book> books = bookService.getBookList(start,limit);
int total = bookService.getTotalBooks();
return ExtJSReturn.mapOK(books, total);
} catch (Exception e) {
return ExtJSReturn.mapError("Error retrieving books from database.");
}
}
See also BookService.java method:
#Transactional(readOnly=true)
public List<Book> getBookList(int start, int limit){
return bookDAO.getBooks(start, limit);
}
public int getTotalBooks(){
return bookDAO.getTotalBooks();
}
See BookDAO.java methods:
#SuppressWarnings("unchecked")
public List<Book> getBooks(int start, int limit) {
DetachedCriteria criteria = DetachedCriteria.forClass(Book.class);
return hibernateTemplate.findByCriteria(criteria, start, limit);
}
public int getTotalBooks(){
return DataAccessUtils.intResult(hibernateTemplate.find("SELECT COUNT(*) FROM books"));
}
Any idea?
Here is the problem:
org.springframework.orm.hibernate3.HibernateQueryException: books is not mapped [SELECT COUNT(*) FROM books]; nested exception is org.hibernate.hql.ast.QuerySyntaxException: books is not mapped [SELECT COUNT(*) FROM books]
Fixed here: https://stackoverflow.com/a/14447201/1564840
This is my view
Ext.define("TimeSheet.view.Tracktime", {
extend: "Ext.form.Panel",
requires: ["Ext.form.FieldSet", "Ext.field.Text", "Ext.Button","Ext.Label", "Ext.field.Email", "Ext.field.Password","Ext.MessageBox", "Ext.Img"],
alias: "widget.tracktimeview",
config:{
id: 'entrypage',
fullscreen: true,
url: 'timesheet.ajatus.in/check.php',
//standardSubmit: false,
method: 'GET',
layout: {
centered: true,
},
defaults: {
styleHtmlContent: true,
//cls: 'backfield'
},
cls: 'panelBackground',
items: [{
xtype: 'fieldset',
id: 'loginfield',
autoComplete: true,
scrollable: false,
cls: 'formfield',
items: [{
xtype: 'image',
src: 'tracktime.png',
height: '60px',
cls: 'track'
},
{
xtype: 'textfield',
name : 'name',
label: 'tracktime/'
},
{
xtype: 'textfield',
name : 'uname',
allowBlank:false,
placeHolder: "User name"
},
{
xtype: 'passwordfield',
name : 'password',
allowBlank:false,
placeHolder: 'Password'
}
]
},{
xtype: 'button',
id: 'loginbtn',
cls: 'enter',
text: 'Sign in',
ui: 'confirm',
height: "50px",
}],
control: ({
'#loginbtn': {
tap: function() {
}
}
}),
},});
THIS IS CONTROLLER
Ext.define("TimeSheet.controller.Track", {
extend: "Ext.app.Controller",
config: {
refs: {
trackTimeView: "tracktimeview",
selector: '#tracktimeview',
addentryView: "addentryview",
selector: '#addentryview',
entryPage: '#entrypage',
loginBtn: '#loginbtn'
},
control:{
loginBtn: {
tap: "onLoginBtn"
},
onloginbtn: {
tap: function(btn) {
var form = Ext.getCmp('entry');
//var values = entry.getValues();
entry.submit({
method:'POST',
url: 'xxxxxxxx/check.php',
params: values,
success: function(response){
var text = response.responseText;
Ext.Msg.alert('Success', text);
},
failure : function(response) {
Ext.Msg.alert('Error','Error while submitting the form');
console.log(response.responseText);
}
});
}
},
}
},
onLoginBtn: function() {
console.log("onLoginBtn");
var values = TimeSheet.views.tracktimeview.entrypage.getValues();
TryLogin(values['uname'], values['password']);
},
launch: function () {
this.callParent(arguments);
console.log("launch");
},
init: function () {
this.callParent(arguments);
console.log("init");
}});