I'm having a problem with Sencha Touch 2 and vbox flexing. Here is my code for the Panel (modified for simplicity, real Panel is much more intricate but this is what it boils down to):
Ext.define('risbergska2.view.Test', {
extend: 'Ext.Panel',
xtype: 'test',
config: {
title: 'Test',
iconCls: 'home',
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'container',
flex: 2,
style: 'background-color: #f90;'
},
{
xtype: 'container',
flex: 1,
style: 'background-color: #9f0;'
},
{
xtype: 'container',
flex: 1,
style: 'background-color: #0f9;'
},
{
xtype: 'container',
flex: 2,
style: 'background-color: #90f;'
}
]
}
]
}
})
And here is my Main.js:
Ext.define("risbergska2.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
items: [
{
xtype: 'homeloggedinview'
},
{
xtype: 'myview'
},
{
xtype: 'programview'
},
{
xtype: 'socialview'
},
{
xtype: 'aboutview'
},
{
xtype: 'test'
}
]
}
});
My app.js:
Ext.application({
name: 'risbergska2',
requires: [
'Ext.MessageBox'
],
views: ['Main', 'HomeLoggedIn', 'My', 'Program', 'Social', 'About', 'Test'],
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('risbergska2.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
If I run this code and go to the Test-panel, nothing is showing. I want it to show (in the test case) four different containers with four different colors in them, the top one and the bottom one being twice the vertical size of the middle ones.
Is this not the way to get that result? Where have I gone wrong?
Thanks!
Set layout : 'fit' for risbergska2.view.Test
Ext.define('risbergska2.view.Test', {
extend: 'Ext.Panel',
xtype: 'test',
config: {
title: 'Test',
iconCls: 'home',
layout : 'fit',
items: [
{
xtype: 'container',
layout: 'vbox',
items: [
Related
I added dockedItems to my form.Panel, it aligns to the form, but I want the dockedItems align to the table inside the form, how should I do.
Here is the demo: https://fiddle.sencha.com/#view/editor&fiddle/3kso
Thanks!
Since you set the viewport's layout to fit, and you also specify a fixed width for the table (300 px), the form is ordered to occupy the remaining area, and that's why the toolbar is at the left edge.
Although you could try to make the toolbar floating and align it the the table, I think it is easier to let the form take only the space it needs, and therefore the toolbar will we aligned to the form.
To do so, at the end of your fiddle, try this code to change the viewport's layout:
Ext.create('Ext.container.Viewport', {
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
});
If you need the fit layout for some other reasons, you can keep the fit layout, and add the form within a container:
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
}]
});
Or if you need a panel that occupies all place, and you want a panel inside this with aligned toolbar, you can use and outside and an inside panel also (check the grey background to see the outside panel):
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
bodyStyle: {
background: '#eeeeee'
},
layout: {
type: 'vbox',
align: 'middle'
},
items: [form]
}]
});
The important thing is that by using vbox and middle in the layout the form will only occupy the place it needs.
EDIT 1:
To address the issues in the comments, here is a complete example that can be run as fiddle:
const form = Ext.create('Ext.form.Panel', {
autoScroll: true,
bodyStyle: {
background: '#abd1ca'
},
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '300px',
'background': '#e3f2fd',
'border-collapse': 'collapse',
}
},
tdAttrs: {
style: {
border: '1px solid #ccc',
padding: '6px',
}
}
},
fieldDefaults: {
labelWidth: 40,
width: '100%',
},
items: new Array(100).fill({
fieldLabel: 'sample',
xtype: 'textfield'
}),
dockedItems: [{
xtype: 'toolbar',
dock: 'left',
items: [{
iconCls: null,
glyph: 61,
xtype: 'button'
}, '-', {
iconCls: null,
glyph: 88,
xtype: 'button'
}, {
iconCls: null,
glyph: 70,
xtype: 'button'
}, '-', {
iconCls: null,
glyph: 47,
xtype: 'button'
}]
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
bodyStyle: {
background: '#eeeeee'
},
layout: {
type: 'hbox',
align: 'stretch',
pack: 'middle'
},
items: [form],
buttonAlign: 'center',
buttons: [{
text: 'Save',
handler: 'save',
}, ],
}]
});
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 trying reset a form, on click of button.
The button's functionality is defined in file seperate controller file.
But on clicking button reset i get error
"Uncaught TypeError: Object form1orig has no method 'reset' "
Controller
Ext.define('myapp.controller.form1', {
extend: 'Ext.app.Controller',
requires: [
'myapp.view.form1'
],
config: {
refs: {
form1orig: '#pressc',
form1Submit: 'button[action=sub]',
form1Reset: 'button[action=res]'
},
control: {
'form1Reset' : {
tap: 'onForm1Reset'
},
'form1Submit' : {
tap: 'onForm1Submit'
}
}
},
onForm1Reset: function(button){
'form1orig'.reset();
console.log('Tapped reset');
},
onForm1Submit: function(button){
console.log('Tapped submit');
}
});
View
Ext.define('myapp.view.form1', {
extend: 'Ext.form.Panel',
requires: [
'Ext.form.FieldSet',
],
xtype: 'form1Me',
id: 'form1Me',
config: {
items: [
{
xtype: 'fieldset',
id: 'pressc',
instructions: 'Please enter the information above.',
defaults: {
labelWidth: '35%'
},
items: [
{
xtype:'textfield',
name: 'name',
label: 'Name',
id: 'eman',
placeHolder: 'Name'
},
{
xtype: 'textareafield',
name : 'Prescription',
id: 'pres',
label: 'Prescription',
placeHolder: 'Enter your prescription here...'
}
]
},
{
xtype: 'container',
defaults: {
xtype: 'button',
style: 'margin: .5em',
flex : 1
},
layout: {
type: 'hbox'
},
items: [
{
text: 'Submit',
id: 'subMe',
action: 'sub',
scope: this,
hasDisabled: false
//handler: function(btn){
/*var presscForm = Ext.getCmp('presscForm');
presscForm.submit({
url: '../../result.php',
method: 'POST',
success: function() {
alert('Thamk you for using our service');
}
});*/
//}
},
{
text: 'Reset',
id: 'resMe',
action: 'res'
/*handler: function(){
Ext.getCmp('form1Me').reset();
}*/
}
]
}
]
}
});
Help
You should do something like:
var form = Ext.ComponentQuery.query('form1Me');
form.reset();
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