Extjs4 the combobox loading along? - combobox

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

Related

Cannot select check boxes of an Ext checkbox model grid panel

I have an extjs (ExtJS 3) grid panel which is loaded from postgresql database using JsonStore. This is my Json store:
var dropPickGridStore = new Ext.data.JsonStore({
fields : [ {
name : 'locationName'
}, {
name : 'city'
}, {
name : 'addr'
}, {
name : 'estimatedTime'
} ],
root : 'dropPickLoc',
idProperty : 'locationName',
//autoDestroy : true,
autoLoad : true,
proxy : new Ext.data.HttpProxy({
url : "http://" + host + ":" + port + "/" + projectName + "/"
+ "PendingDropPicks"
}),
reader : {
type : 'json',
root : 'dropPickLoc'
},
});
This my grid panel:
var selectModel = new Ext.grid.CheckboxSelectionModel();
/*selectModel : Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
mode: 'MULTI'
});*/
var drop_pick_grid = new Ext.grid.GridPanel({
store : dropPickGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
sortable : true,
header : "Drop/Pick Loc",
dataIndex : 'locationName',
width : 170
}, {
header : "Town/City",
sortable : true,
dataIndex : 'city',
width : 120
}, {
header : "Address",
sortable : true,
dataIndex : 'addr',
width : 170
}, {
header : "EST.Un/Load Time",
sortable : true,
dataIndex : 'estimatedTime',
width : 100
} ]),
sm : selectModel,
//width : 570,
//height : 390,
autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid'
});
The gris is loaded successfully. But There is a problem. I can only check the header row checkbox. I cannot select any of row. It should has the capability of selecting individual row and it should also can select all rows by clicking header checkbox. What's wrong with my code?
Can anyone please be so kind enough to explain what's going wrong with my codes and how should I fix it?
Thank You

Grid doesn't change even after reloading store while filtering

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

ExtJS - dependent combobox

I'm trying to make a combobox that dependent from other combobox with default values but into the listeners of combobox must loading data of itself . I have the problem when using this.store.loadData(todoItems) with todoItems as an array of four positions.
This's store:
var cmb_items = new Ext.data.SimpleStore({
fields : ['itemId', 'item'],
data : itemsMenu
});
I dont know why. Here is my code, can anyone lend me a hand?
{
xtype : 'combo',
store : cmb_items,
hiddenName : 'id_item',
valueField : 'id_item',
mode : 'local',
allowBlank : false,
value : nombreItem,
fieldLabel : 'items',
disabled : true,
name : 'items',
triggerAction : 'all',
emptyText : 'Seleccione un item',
editable : false,
id : "items",
anchor : '90%',
displayField : 'item',
listeners : {
select: function () {
idSistema = Ext.getCmp("sistemas").getValue();
selectedMenu = Ext.getCmp("menus").getValue();
todoItems = getItemsMenu(selectedMenu,idSistema);
//alert(todoItems)
this.store.loadData(todoItems);
idItem = this.getValue();
alert(idItem); // RETURN UNDEFINED
for(i=0;i<this.store.getCount();i++){
if(todoItems[i][0]==idItem){
nombreItem = todoItems[i][1];
outItem = todoItems[i][2];
}
}
}
}
},
Thank you!
I'm not much clear with code, but if you're looking for combo depends another means, try my example.
var countryStore = new Ext.data.SimpleStore({
fields: ['alpha2code','name'],
data: [["BE","Belgium"],["BR","Brazil"],["BG","Bulgaria"]]
});
function getState(stCode){
var data=[];
switch(stCode){
case 'BE':
data=[["BE","Belgium1"],["BR","Brazil1"],["BG","Bulgaria1"]];
break;
case 'BR':
data=[["BE","Belgium2"],["BR","Brazil2"],["BG","Bulgaria2"]];
break;
case 'BG':
data=[["BE","Belgium3"],["BR","Brazil3"],["BG","Bulgaria3"]];
break;
}
return data;
};
var statesStore = new Ext.data.SimpleStore( {
fields: ['statecode','name']
});
var stateForm = new Ext.form.ComboBox({
fieldLabel : 'Country',
id : 'countryCombo',
name : 'country',
msgTarget : 'side',
triggerAction : 'all',
lazyRender : true,
store : countryStore,
mode: 'local',
valueField : 'alpha2code',
emptyText : 'Create or Select an partment',
displayField : 'name',
editable : true,
listeners:{
'select': function(combo,value,index){
debugger;
var input = combo.getValue();
var stateCombo=Ext.getCmp('statesCombo');
//stateCombo.clearValue();
//stateCombo.store.baseParams.countryID=input;
stateCombo.store.loadData(getState(input));
}
}
});
var stateForm1 = new Ext.form.ComboBox({
fieldLabel : 'States',
id : 'statesCombo',
name : 'states',
mode: 'local',
msgTarget : 'side',
triggerAction : 'all',
lazyRender : true,
store : statesStore,
valueField : 'statecode',
emptyText : 'Create or Select an Department',
displayField : 'name',
editable : true
});
var formPanel = new Ext.form.FormPanel({
title: 'World',
labelWidth: 120,
width: 350,
padding: 10,
items:[stateForm,stateForm1]
});
formPanel.render(document.body);

Custom function call after Extjs 4 grid sort

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

Extjs superboxselect keyup event is not firing

I am using superboxselect for one of my projects. I need to perform some additional filtering. Therefore i need to be able to do it in the keyup event.
But i can not get it to work.
var test = new Ext.ux.form.SuperBoxSelect( {
applyTo : 'testId',
id : 'test',
allowBlank : true,
msgTarget : 'title',
xtype : 'superboxselect',
resizable : true,
hiddenName : 'statesHidden[]',
width : 300,
store : somestore,
mode : 'local',
displayField : 'name',
valueField : 'code',
classField : 'cls',
styleField : 'style',
extraItemCls : 'x-flag',
extraItemStyle : 'border-width:2px',
stackItems : true,
listeners : {'keyup' : testFunction}
});
function testFunction(){
alert("hola");
}
set enableKeyEvents property as true.
enableKeyEvents: true

Resources