I am using Extjs 6 to build grid view.
this is my Store :
schedule.js
Ext.define('schedulewise.store.schedule.Schedule', {
extend: 'Ext.data.Store',
alias: 'store.Schedule',
requires: [
'schedulewise.utils.Config'
],
model: 'schedulewise.model.schedule.Schedule',
autoLoad: true,
proxy: {
type: 'rest',
url: 'http://127.0.0.1:8080/' + schedulewise.utils.Config.projectName + '/rest/cserver/dto/schedule/allInfo?request=loadSchedule',
useDefaultXhrHeader: false,
reader: {
type: 'json'
},
writer: {
type: 'json'
}
}
this is my viewModel:ScheduleModel.js
Ext.define('schedulewise.view.schedule.ScheduleModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.ScheduleModel',
stores: {
Schedule: {
type:'Schedule'
}
},
data:{
title:'Schedules'
}
});
this is my view:
Ext.define("schedulewise.view.schedule.MainPanel", {
extend: 'Ext.grid.Panel',
xtype: 'MainPanel',
requires: [
'schedulewise.utils.Config'
],
layout: 'fit',
region: 'center',
controller: 'ScheduleController',
viewModel: 'ScheduleModel',
bind: {
store: '{Schedule}',
title:'{title}'
},
columns: [
{
text: 'Name',
dataIndex: 'scheduleName',
resizable: false,
hideable: false,
sortable: false,
flex: 25 / 100
},
{
text: 'lastestVersion',
dataIndex: 'lastestVersion',
resizable: false,
hideable: false,
sortable: false,
flex: 25 / 100
},
{
text: 'currentVersion',
dataIndex: 'lastestVersion',
resizable: false,
hideable: false,
sortable: false,
flex: 25 / 100
},
{
text: 'date range',
dataIndex: 'scheduleRange',
resizable: false,
hideable: false,
sortable: false,
flex: 25 / 100
}
]
});
i found that when the view loaded,Store always requests two times.
I do not know why?
screenshot
You creating two instances of Schedule store. And because of autoLoad: true upon instance creation it is making a request to the server.
Related
Hello i`m struggeling with docked items im trying to collapse my filter panel but this doenst work also the colappse arrow is on the wrong side has anybody an idea how i can fix it. Im Creating an getFilterPane and return it in initComponenet as an toolbar item.
Ext.define('Shopware.apps.SDG.view.update.Grid', {
extend: 'Ext.grid.Panel',
region: 'center',
collapsible: false,
split: true,
title: 'Update Log',
getPagingBar: function () {
var me = this;
me.store = Ext.create('Shopware.apps.SdgArticleUpdateImportLog.store.SdgArticleUpdateLog');
return Ext.create('Ext.toolbar.Paging', {
store: me.store,
dock: 'bottom',
displayInfo: true,
region: 'south'
});
},
getFilterPanel: function () {
var me = this;
return Ext.create('Ext.form.Panel', {
store: me.store,
title: 'Filters',
collapsible: true,
cls: 'detail-view',
width: 300,
region: 'east',
dock: 'right',
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
defaultType: 'textfield',
items: [{
fieldLabel: 'Sku',
name: '1',
allowBlank: true,
listeners: {
change: function (field, value) {
me.store.filter('sku', value);
me.store.filters.clear();
}
}
}, {
fieldLabel: 'Timestamp',
name: '2',
allowBlank: true,
listeners: {
change: function (field, value) {
me.store.filter('importTimestamp', value);
me.store.filters.clear();
}
}
}]
});
},
createFilterPanel: function () {
},
initComponent: function () {
var me = this;
me.dockedItems = [me.getPagingBar(), me.getFilterPanel(),
{
xtype: 'toolbar',
dock: 'top',
items: [
, '->',
{
xtype: 'textfield',
name: 'searchfield',
cls: 'searchfield',
width: 175,
emptyText: '{s name="CoeSeoRoute/Toolbar/Search"}Suche{/s}',
enableKeyEvents: true,
clearable: true,
checkChangeBuffer: 500,
listeners: {
change: function (field, value) {
me.store.filter('search', value);
me.store.filters.clear();
}
}
}
]
}
];
me.columns = me.getColumns();
me.callParent();
},
Try setting collapseDirection..
From the docs:
collapseDirection : String
The direction to collapse the Panel when the toggle button is clicked.
Defaults to the headerPosition
Important: This config is ignored for collapsible Panels which are direct child items of a border layout.
Specify as 'top', 'bottom', 'left' or 'right'.
Available since: 4.0.0
I'm trying to add a combobox to a floating (popup) form panel in ExtJS. But I'm getting a "Cannot set property 'component' of null" error and the window will not load.
I use the following code in a controller to create the window:
onTreeAddDocClick: function () {
var f = new Ext.form.Panel({
frame: false,
header: false,
floating: true,
closable: true,
items: [{
xtype: 'addDoc'
}]
});
f.show();
}
The code for the window itself is as follows:
Ext.define('OPENhrm.view.dossier.widget.popup.AddDoc', {
extend: 'Ext.form.Panel',
xtype: 'addDoc',
requires: [
'Ext.layout.container.VBox'
],
controller: "dossier-addDoc",
viewModel: {
type: "dossier-addDoc"
},
id: 'addDocForm',
frame: true,
title: 'Add document',
width: 400,
bodyPadding: '10 10 0',
layout: 'form',
closable: true,
defaults: {
anchor: '100%',
allowBlank: false,
msgTarget: 'side',
labelWidth: 50
},
items: [{
// item selector
xtype: 'filefield',
emptyText: 'Select Document',
fieldLabel: 'Document',
name: 'filePath',
id: 'filePath',
buttonText: 'upload document',
buttonConfig: {
icon : '/resources/images/icons/add.jpg'
}
}, {
xtype: 'combo',
fieldLabel: 'Test',
hiddenName: 'test',
store: new Ext.data.SimpleStore({
data: [
['Test1'],
['Test2']
],
id: 0,
fields: ['text']
}),
valueField: 'text',
displayField: 'text',
triggerAction: 'all',
editable: false
}],
// buttons
buttons: [{
text: 'Add',
handler: 'onAddDockClick'
}, {
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
}]
});
If I remove the combobox, the window works just fine. If I place the combobox in a form somewhere else in my application (e.g. on a page with 2 panels; a searchfilter/form and a grid with search results), it works just fine. That other page however, is not a floating/popup window.
I got it to work by defining the whole page in the controller, but as I'm using a MVC structure, that doesn't seem like the way to go. Does anyone know how to get the combobox to work in a floating window, without putting the whole code for that window in the controller?
the store works fine for the rest of the app but im not able to use that data and plot that data in the graph.
i have done some basic work with the little knowledge i have with charts.
i tried out with other examples which work but im not able to figure out the problem with this.
the console says:Uncaught TypeError: Cannot read property '1' of undefined
i have installed ruby,compass and sass
view:
Ext.define('CSBApp.view.graph', {
extend: 'Ext.chart.CartesianChart',
requires: [
'Ext.TitleBar',
'Ext.chart.CartesianChart',
'Ext.chart.series.Line',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.draw.sprite.Circle',
],
xtype: 'graph',
config: {
flex: 1,
xtype: 'chart',
store: 'mystore',
cls: 'chart',
innerPadding: 10,
animate: true,
series: [
{
type: 'line',
xField: 'date',
yField: 'amount',
title: 'Expenses',
style: {
stroke: '#003366',
lineWidth: 3
},
marker: {
type: 'circle',
stroke: '#003366',
radius: 5,
lineWidth: 3
}
}
],
axes: [
{
type: 'numeric',
position: 'left',
title: {
fontSize: 15,
text: 'Amount'
},
grid: {
even: {
fill: '#f9f9f9'
}
}
},
{
type: 'numeric',
position: 'bottom',
title: {
fontSize: 15,
text: 'date'
},
grid: {
even: {
fill: '#f9f9f9'
}
}
}
]
}
});
modal:
Ext.define('CSBApp.model.expensemodel',{
extend: 'Ext.data.Model',
config: {
identifier:{
type:'uuid'
},
fields: [
{
name:'desc',
type:'string'
},
{
name: 'amount',
type:'number'
},
{
name: 'date',
type:'date',
defaultformat: 'Y-m-d'
},
],
// autoLoad : true
}
});
store:
Ext.define('CSBApp.store.mystore',{
extend : 'Ext.data.Store',
config : {
model : 'CSBApp.model.expensemodel',
storeId : 'mysqlstore',
proxy : {
type : 'sql',
id : 'mystore',
reader: {
type: "sql"
}
},
autoLoad : true
}
});
i have kind of figured it out.
the basic problem resides in the view and how it calls the store.
so the app seems to work fine with the sql store.
the main factor is that the 'requires' files have to be correct.
here is the view:
Ext.define('CSBApp.view.graph', {
extend: 'Ext.chart.CartesianChart',
xtype: 'graph',
requires: [
'Ext.chart.series.Line',
'Ext.chart.axis.Numeric',
'Ext.chart.axis.Category',
'Ext.chart.CartesianChart',
'Ext.chart.axis.layout.CombineDuplicate',
'Ext.chart.axis.segmenter.Names'
],
config: {
store:'mysqlstore' ,
width : '100%',
layout:'fit',
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
minimum:0,
fields: 'amount'
},
{
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'date',
minimum:0,
}],
series: [{
type: 'line',
xField: 'date',
yField: 'amount',
minimum:0,
style: {
stroke: '#003366',
lineWidth: 3
},
marker: {
type: 'circle',
stroke: '#003366',
radius: 5,
lineWidth: 3,
}
}
}]
}
});
this is pretty correct if you get the store rite.
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
i am working with grid to tree drag n drop. i am able to add new node to root of tree by dragging it from grid but i dont know how to add child to node i hovered on? I spent 2 days on dis but no luck.below is my code :
Ext.define('Overdrive.view.ui.MyViewport', {
extend: 'Ext.container.Viewport',
initComponent: function () {
var me = this;
me.items = [{
xtype: 'panel',
height: 600,
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'PARENT',
items: [{
xtype: 'treepanel',
border: '',
id: 'treepanel',
collapseDirection: 'left',
collapsible: true,
title: 'Items',
titleCollapse: true,
store: 'Test',
flex: 1,
viewConfig: {
listeners: {
render: function (tree) {
var dropTarget = new Ext.dd.DropTarget(tree.el, {
ddGroup: 'gridtotree',
copy: false,
notifyDrop: function (dragSource, event, data) {
var idFrom = data.records[0].data.name;
var node = Ext.getCmp('treepanel').getRootNode(); //working
node.appendChild({
'text': idFrom,
'children': []
});
}
});
}
}
}
}, {
xtype: 'panel',
height: 596,
flex: 3,
items: [{
xtype: 'panel',
height: 285,
layout: {
type: 'anchor'
}
}, {
xtype: 'gridpanel',
id: 'itemtypegrid',
title: 'Item Type',
store: 'GridTest',
enableDragDrop: true,
ddText: 'Shift Row',
columns: [{
xtype: 'gridcolumn',
width: 100,
dataIndex: 'name',
text: 'Name'
}],
viewConfig: {
plugins: [
Ext.create('Ext.grid.plugin.DragDrop', {
ddGroup: 'gridtotree',
enableDrop: true
})]
}
}]
}]
}];
me.callParent(arguments);
}
To catch the tree-node you can add this handler to Tree.Panel -> ViewConfig -> listeners:
itemmouseenter: function (view, model, htmlItem, index, e)
{
console.log(model);
},
You can save this value and use in another handler - notifyDrop