Yajra Datatable export all the records - export-to-csv

I am using yajra Datatable in laravel 9. I integrate their buttons like: copy, csv, excel, pdf, print.
When I want to export/print it just exports the records that are only visible to table (10 records).
But I want to export all the paginated records also. How can I do it? Can you give me any Solutions?
My Controller,
public function index(Request $request){
if($request->ajax()){
$data = YajraDataTable::select('id','name','email','phone')->get();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = 'Edit';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('admin.yajra.index');
}
My Blade file,
<script type="text/javascript">
$(function () {
var table = $('#user_datatable').DataTable({
processing: true,
serverSide: true,
responsive: true,
autoWidth:false,
ajax: "{{ route('yajra.datatable') }}",
columns: [
{ data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'phone', name: 'phone'},
{data: 'action', name: 'action', orderable: false, searchable: false},
],
dom: 'lBfrtip',
buttons: [
{ extend: 'copy', exportOptions: { modifier: { page: 'all', search: 'none' } } },
{ extend: 'excel', exportOptions: { modifier: { page: 'all', search: 'none' } } },
{ extend: 'csv', exportOptions: { modifier: { page: 'all', search: 'none' } } },
{ extend: 'pdf', exportOptions: { modifier: { page: 'all', search: 'none' } } },
{ extend: 'print', exportOptions: { modifier: { page: 'all', search: 'none' } } },
{ extend: 'colvis', exportOptions: { modifier: { page: 'all', search: 'none' } } },
],
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, 'All'] ]
});
});
</script>

Related

ExtJs 5 bind store to cell editor in grid

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.

Submit all of grid rows with Extjs form submit

I have a grid panel in a form. Any row of the grid panel have a filefield. I want to send any row (name field and filename field) to server.
Model:
Ext.define('FM.model.DefineCode', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'filename', type: 'string'}
],
validations: [
{type: 'presence', field: 'id'},
{type: 'presence', field: 'name'},
{type: 'presence', field: 'filename'}
]
});
Store:
Ext.define('FM.store.DefineCode', {
extend: 'Ext.data.Store',
model: 'FM.model.DefineCode',
autoLoad: true,
data: []
});
View:
Ext.define('FM.view.map.DefineCode', {
extend: 'Ext.window.Window',
title: 'Define Code',
alias: 'widget.mmDefineCode',
width: 600,
modal: true,
items: [{
xtype: 'form',
items: [{
xtype: 'gridpanel',
title: 'myGrid',
store: 'DefineCode',
columns: [
{
text: 'Id',
xtype: 'rownumberer',
width: 20
}, {
text: 'Name',
dataIndex: 'name',
flex: 1,
editor:{
xtype: 'textfield'
}
}, {
text: 'File',
dataIndex: 'filename',
width: 200,
editor:{
xtype: 'filefield',
emptyText: 'Select your Icon',
name: 'photo-path',
buttonText: '',
flex: 1,
buttonConfig: {
iconCls: 'icon-upload-18x18'
},
listeners: {
change: function(e, ee, eee) {
var grid = this.up('grid');
var store = grid.getStore();
var newStore = Ext.create('FM.store.DefineCode',{});
store.insert(store.data.items.length, newStore);
}
}
},
}, {
text: '',
width: 40
}
],
height: 200,
width: 600,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]}
],
}],
buttons: [{text: 'OK', action: 'OK'}],
initComponent: function() {
var me = this;
Ext.apply(me, {});
me.callParent(arguments);
}
});
Controller:
...
form.submit({
url: 'icon/create',
});
When I submit form, only last row is sending to server.
Where is problem?
Why you using this ?
var newStore = Ext.create('FM.store.Path', {});
store.insert(store.data.items.length, newStore);
try using rowEditing to edit/submit 1 row data :
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
clicksToMoveEditor: 1,
listeners: {
'validateedit': function(editor, e) {},
'afteredit': function(editor, e) {
var me = this;
var jsonData = Ext.encode(e.record.data);
Ext.Ajax.request({
method: 'POST',
url: 'your_url/save',
params: {data: jsonData},
success: function(response){
e.store.reload({
callback: function(){
var newRecordIndex = e.store.findBy(
function(record, filename) {
if (record.get('filename') === e.record.data.filename) {
return true;
}
return false;
}
);
me.grid.getSelectionModel().select(newRecordIndex);
}
});
}
});
return true;
}
}
});
and place it to your plugin.
I don't try it first, but may be this will help you a little.
AND this is for your controller to add a record from your grid, you need a button to trigger this function.
createRecord: function() {
var model = Ext.ModelMgr.getModel('FM.model.DefineCode');
var r = Ext.ModelManager.create({
id: '',
name: '',
filename: ''
}, model);
this.getYourgrid().getStore().insert(0, r);
this.getYourgrid().rowEditing.startEdit(0, 0);
}
check this for your need, this is look a like. You need to specify the content-type.
And for your java need, please read this method to upload a file.

Not able to get reference to form in sencha

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();

Ext Js 4 MVC with Spring and Hibernate "Remote Exception" thrown on application startup

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

Can't login to a web application through sencha app on clicking 'Sign in' button

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");
}});