Related
How should I customize to change how many rows of the columnmodel table gets displayed in my web app before the table scrolls
new Ext.Panel({
items : [{
xtype : 'panel',
id : 'abc',
height : 250,
autoScroll : false,
frame : false,
items : [{
xtype : 'editorgrid',
id : 'abc-grid',
store : abc.Store,
cm : abc.Col,
sm : new Ext.grid.RowSelectionModel(),
height : 100,
frame : false,
clicksToEdit : 2,
stripeRows : true,
view: gridView,
viewConfig : {
headersDisabled : true
},
listeners : {
}
}]
}]
});
I want a grid that will change or reload after delete any row and retrieve those rows that have same member id. For this, I add filter. Again I callback store with filter after delete any row. My store filter well but grid couldn't display it......It holds the previous display......
Ext.define('${pkgName}.v02x001001.SV02X00100101' , {
extend : 'Ext.grid.Panel',
alias : 'widget.sv02x00100101',
id : 'sv02x00100101',
border : true,
modal : true,
height : 300,
width : 455,
viewConfig: {
stripeRows : true,
forceFit : true,
emptyText : 'No Records to display',
listeners : {
viewready : function(v) {
var store = Ext.data.StoreManager.get('S02X001001');
store = !store ? Ext.create("S02X001001") : store;
var value = Ext.getCmp('member-sv02x00100104').getValue(),
filters = new Array();
store.clearFilter();
store.filter('member', value);
filters.push({
property : 'member',
value : value
});
store.loadPage(1, {
filters : filters
});
}
}
},
initComponent: function() {
this.store = 'S02X001001';
this.tbar= Ext.create('Ext.ux.StatusBar', {
topBorder : false,
statusAlign : 'right',
items : [{
xtype :'button',
text : 'ADD',
icon : "${resource(dir: 'images', file: 'ADD01003.png')}",
listeners : {
click : this.onNewAddress
}
},'-']
});
this.columns = [
{
text : 'Address Line 1',
dataIndex : 'addressline1',
sortable : false,
flex : 1
},{
text : 'Address Line 2',
dataIndex : 'addressline2',
sortable : false,
width : 170
},{
menuDisabled : true,
sortable : false,
id : 'deletee',
xtype : 'actioncolumn',
width : 22,
items : [{
icon : "${resource(dir: 'images', file: 'DEL01005.png')}",
tooltip : 'Delete This?',
scope : this,
handler : function(grid, rowIdx, colIdx) {
var record = grid.getStore().getAt(rowIdx);
var conId = record.data.id
this.onDeleteClick(conId);
}
}]
}];
this.callParent(arguments);
},
onNewAddress: function(btn, e, eOpts){
var view=Ext.widget('sv02x00100102');
view.show();
var a = Ext.getCmp('member-sv02x00100104').getValue();
Ext.getCmp('member-sv02x00100102').setValue(a);
},
onDeleteClick:function(conId){
Ext.MessageBox.show({
title : 'Delete',
msg : 'Really want to delete ?',
icon : Ext.Msg.WARNING,
buttons : Ext.MessageBox.YESNO,
buttonText :{
yes: "Delete",
no : "No"
},
scope : this,
animateTarget : 'deletee',
fn: function(btn, dbQty){
if(btn == 'yes'){
var registration = Ext.create('${appName}.model.M02X001001',{
id : conId
});
var store = this.getStore();
registration.destroy({
scope : this,
success : function(model, operation) {
if(model != null){
var store = Ext.data.StoreManager.get('S02X001001');
store = !store ? Ext.create("S02X001001") : store;
var value = Ext.getCmp('member-sv02x00100104').getValue(),
filters = new Array();
store.clearFilter();
store.filter('member', value);
filters.push({
property : 'member',
value : value
});
store.loadPage(1, {
filters : filters
});
}
},
failure: function(){
console.log('Unable to delete');
}
});
}
}
});
}
});
How it possible to retrieve rest of the relative rows ........
Here is my Store ..........
Ext.define('${pkgName}.S02X001001', {
extend : 'Ext.data.Store',
model : '${appName}.model.M02X001001',
idProperty: 'id',
autoLoad : true,
autoSync : true,
filterParam: 'query',
remoteSort: true,
proxy : {
type : 'ajax',
noCache : false,
limitParam: 'limit',
startParam: 'start',
url : '${createLink(controller:'C02x001001', action: 'store')}',
reader:{
type : 'json',
root : 'data',
totalProperty : 'total',
successProperty : 'success',
messageProperty : 'message',
implicitIncludes: true
},
simpleSortMode : true
},
sorters: [{
property: 'id',
direction: 'asc'
}]
});
it should be refresh the grid view in automatic,
but you can refresh the view by manual way :
use method getView().refresh();
try:
Ext.getCmp('sv02x00100101').getView().refresh();
I have an Extjs 4 grid with sort capability. i want to call a custum function after each time user presses sort button.
In my custom function i want to navigate to the first page of my grid (my grid uses pagination and it takes advantage of server-side sort) i think i must use store.loadPage(1) in my custom function (correct me if I'm wrong)
where should i put my custom function?
This is my Ext.OnReady() function:
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var url = {
local: 'grid-filter.json', // static data file
remote: 'grid-filter.php'
};
var paging = true;
var encode = false;
var local = false;
Ext.define('UserDirectoryDataModel', {
extend : 'Ext.data.Model',
fields : [ 'uname', 'fname', 'lname', 'postcode', 'mail', {
name : 'pass'
}, 'hasAccess', 'isActive', 'lastVisit' , 'deleteUser'],
idProperty : 'uname'
});
var itemsPerPage = 20;
var store = Ext.create('Ext.data.Store', {
pageSize : itemsPerPage,
autoLoad: false,
local: false,
autoDestroy: true,
model : 'UserDirectoryDataModel',
autoSync : true,
sortOnLoad : true,
remoteSort:true,
sorters : {
property : 'uname',
direction : 'ASC'
},
listeners: {
beforeload: function(){
store.loadPage(1);
}
},
proxy : {
type : 'ajax',
url: (local ? url.local : url.remote),
api : {
read : 'read.php',
update : 'update.php'
},
reader : {
type : 'json',
root : 'users',
successProperty : 'success',
totalProperty : 'totalCount'
},
writer : {
type : 'json',
writeAllFields : true,
encode : false,
root : 'users'
},
afterRequest : function(request, success) {
if (request.action == 'update') {
if (success) {
Ext.MessageBox.alert('alert',
'data updated!');
}
}
}
}
});
store.load({
params:{
start:0,
limit: itemsPerPage
}
});
var filters = {
ftype: 'filters',
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
filters: [
{
}
]
};
var createColumns = function (finish, start) {
var columns = [ {
text : "username",
dataIndex : 'uname',
width : 150,
filterable: true,
align : 'right'
}, {
text : "name",
dataIndex : 'fname',
width : 150,
align : 'right',
hidden : false,
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "last name",
dataIndex : 'lname',
width : 150,
align : 'right',
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "PostalCode",
dataIndex : 'postcode',
width : 110,
align : 'right',
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "email",
dataIndex : 'mail',
width : 200,
align : 'right',
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "password",
width : 150,
align : 'right',
sortable : false,
filterable: true,
hidden : true,
dataIndex : 'pass',
editor : {
xtype : 'textfield',
inputType : 'password',
allowBlank : true
}
}, {
text : "access to system",
dataIndex : 'hasAccess',
renderer:function(value){
if(value[0]=="1"){
return "has";
}else{
return "doens't have";
}
},
width : 100,
align : 'center',
sortable : false,
filterable: false
}, {
text : "active",
dataIndex : 'isActive',
renderer:function(value){
if(value==null)
return;
if(value[0]=="1"){
return "no";
}else if(value[0]=="0"){
return "yes";
}else if(value[0]=="2"){
return "Not in portal!";
}
},
width : 100,
align : 'center',
sortable : false,
filterable: false
}, {
text : "last visit",
dataIndex : 'lastVisit',
width : 120,
hidden : true,
align : 'right',
sortable : true,
filterable: true
}, {
text : " ",
dataIndex : 'uname',
renderer:function(value){
return "delete";
},
width : 120,
hidden : true,
align : 'right'
} ];
return columns.slice(start || 0, finish);
};
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
border: false,
width : 1200,
height : 620,
title : '',
store: store,
disableSelection : false,
seltype : 'rowmodel',
loadMask : true,
viewConfig : {
id : 'gv',
trackOver : false,
stripeRows : false,
plugins : [ {
ptype : 'preview',
bodyField : 'excerpt',
expanded : true,
pluginId : 'preview'
} ]
},
columns: createColumns(),
features: [filters],
dockedItems: [Ext.create('Ext.toolbar.Paging', {
dock: 'bottom',
store: store
})],
plugins : [ Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit : 2
}) ],
renderTo : 'userdatagrid'
});
grid.child('pagingtoolbar').add([
{
text: 'show filters',
handler: function () {
var data = Ext.encode(grid.filters.getFilterData());
Ext.Msg.alert('show filters',data);
}
},{
text: 'delete filters',
handler: function () {
grid.filters.clearFilters();
}
}
]);
store.loadPage(1);
});
Or you could use this:
grid.on('sortchange', function() {
grid.getStore().loadPage(1);
});
Forget everything I wrote:
Server Side sorting in an ExtJS GridPanel
You should put your custom function in the grid event: sortchange.
I just re-read your question - I thought you have infinite paging.
If your sort is done server side, then yes, you need to call loadPage(1).
You also need to send the sort parameters.
listeners: {
sortchange: function(){
var grid = Ext.ComponentQuery.query('my-grid-alias')[0];
grid.getStore().loadPage(1);
}
}
I hope this helps.
I just put a loadPage(1) in the sortchange event, but it made twice server request(grid made the first one with sort parameters automatically), how could it be only once?
I figure out one solution, I set "remoteSort:false" in store and
"sortchange: {fn:function(){
var time = (new Date()).getTime()/1000;
// after {remoteSort:false} is set, sortchange event will be fired twice when column header is clicked, so I had to set a parameter for time record
if('undefined' == typeof(this.last_sort_time) || this.last_sort_time+1 < time){
this.getStore().loadPage(1);
this.last_sort_time = time;
}
}, scope:this}"
in grid.
But it not works fine, because the received data was reordered by the grid before displayed on it
At last, I solve the problem in this way:
Ext.override(Ext.grid.column.Column, {
doSort:function(){
var ds = this.up('tablepanel').store;
ds.currentPage = 1;
this.callParent(arguments);
}
});
And it works perfectly so far
sortchange event fires after request is send to the server. For solution look here
http://www.sencha.com/forum/showthread.php?145779-Reset-page-for-paginator-on-sort-change
There are two comboboxes, one's data is fixed, the other is request from the servlet with AJAX. If I click the fixed combobox first, the other combobox's data is correctly loading, but if I click the other combobox first, then I click the fixed combobox, the other combobox will be loading along.
var win_form_combox0 = Ext
.create(
'Ext.form.field.ComboBox',
{
flex : 1,
name : 'combox0',
allowBlank : false,
store : Ext
.create(
'Ext.data.Store',
{
model : 'Combox',
proxy : {
type : 'ajax',
url : 'interfaceInfoFindController.do?actionType=FINDTRANSFORMERCOMBOX0'
},
autoLoad : true
}),
editable : false,
displayField : 'displayField',
valueField : 'value',
queryMode : 'local',
value : 'transformer',
listeners : {
select : function(combox) {
win_form_combox1.store.removeAll();
win_form_combox1.store.load();
//win_from_combox1.stopAnimation();
//win_form_combox1.setValue(combox.value);
}
}
});
var win_form_combox1 = Ext
.create(
'Ext.form.field.ComboBox',
{
flex : 2,
name : 'combox1',
margins : '0 0 0 5',
editable : false,
displayField : 'displayField',
valueField : 'value',
queryMode : 'local',
value : false,
store : Ext
.create(
'Ext.data.Store',
{
model : 'Combox',
data : [ {
value : false,
displayField : '请选择'
} ],
proxy : {
type : 'ajax',
url : 'interfaceInfoFindController.do?actionType=FINDTRANSFORMERCOMBOX1'
},
autoLoad : false,
listeners : {
load : function() {
win_form_combox1
.setValue(win_form_combox1.store
.getAt(0).data.displayField);
}
}
}),
listeners : {
select : function(combox) {
win_form_combox2.store.load();
//win_form_combox2.setValue(combox.value);
}
}
});
I have this code. If i click on button my form parameters are inserting into database. How i can do it?? what i should write there?
And if i click on reset form, my window closing. Please help! Thank you!
var AddQuestion = new Ext.Button({
method : 'POST',
url : '/questions/create',
tooltip : 'Add Question',
icon : '/images/icons/silk/add.png',
iconCls : 'add',
style : 'margin-right: 60px;float:right;',
handler : function() {
new Ext.Window({
title : 'Add Question',
width : 700,
height : 800,
bodyStyle : 'padding: 10px',
layout : 'form',
modal : true,
closable : true,
resizable : false,
draggable : false,
autowidth : true,
items :[
{
fieldLabel : 'Question',
name : 'question[text]',
xtype : 'htmleditor',
enableFont : false,
enableFormat : false,
enableFontSize : false,
enableLists : false,
enableAlignments: false,
enableFont : false,
enableColors : false,
height : 160,
width : 560
},
{
name :'form_type',
fieldLabel :'Form Type',
xtype :'combo',
triggerAction :'all',
mode :'local',
editable : false,
allowBlank : false,
emptyText :'You should Choose any...',
store :new Ext.data.SimpleStore({
fields :['mode', 'name'],
data :[
['1', 'TextArea Question'],
['2', 'Scale Question'],
['3', 'TextArea + Scale Question']
]
}),
displayField :'name',
valueField :'mode',
hiddenName :'form_type'
},
{
xtype : 'itemselector',
name : 'selected_respondents',
imagePath : '../ux/images/',
bodyStyle : 'background:#DFE8F6',
multiselects: [{
legend : 'All Respondents',
width : 270,
height : 350,
store : st,
displayField : 'email',
valueField : 'id',
hiddenName : 'email'
},{
legend : 'Selected Respondents',
width : 270,
height : 350,
store : st2,
displayField : 'email',
valueField : 'id',
hiddenName : 'email'
}]
},
{
fieldLabel :'To do',
xtype : 'button',
text : 'Refresh respondents ↑',
height : 30,
icon : '/images/icons/silk/arrow_refresh_small.png',
width : 180,
handler: function(){
if((who_is_admin == '1') || (who_is_admin == '0')){
if (st2.getCount() == 0){
st.reload();
}else
{
Ext.Msg.show({
title : 'Message for You',
msg : "You should left <i>'Selected Respondents'</i> field empty to <b>refresh</b> some changes!",
modal : true,
Height : 200,
closable : true,
resizable : false,
draggable : false,
Width : 300,
buttons : Ext.Msg.OK
});
}
}
}
},
{
xtype : 'checkbox',
boxLabel : 'Make Question Active',
inputValue : '1',
name : 'is_active',
hiddenName : 'is_active',
checked : true
},
],
buttons: [{
text: 'Reset Form',
handler: function(){
}
},{
text: 'Submit Form',
handler: function(){
}
}
}] // button end
}).show(); //show window
}
});
You can do this by sending AJAX request as soon as user clicks on button.
For eg in your case handler for 'Submit Form' button should look like
Ext.Ajax.request({
url:'assertion.htm', // url of page where you want to send it
method: 'POST',
params: {
selectedSource:source.getValue() //Right hand side whatever value you want to send
},
scope:this
});