DirectMethod is not getting called, Ext js 3.4 - extjs

I am very new to EXTJS. I am using 3.4 version which is old one.
Have defined the controller and Use DirectMethod for combo box value fill up.
But controller's direct method in not being called.
My Code below
public class Controller { //Controller to fetch the data
#DirectMethod
public String fetchData() {
System.out.println("Controller");
ArrayList < ComboDataVo > da = null;
Dao dao = new Dao();
try {
da = dao.retrieveUserData();
} catch (Exception e) {
e.printStackTrace();
}
System.out.println("In Controller.................");
Gson gson = new GsonBuilder().serializeNulls().create();
System.out.println("Data: " + gson.toJson(da));
return gson.toJson(da);
}
}
Main js
Ext.onReady(function() {
//Menu
new Ext.Toolbar({
renderTo: document.body,
items: [{
xtype: 'tbbutton',
text: 'Button',
helpfile: 'director',
handler: Movies.showHelp
}, {
xtype: 'tbfill'
}, {
xtype: 'tbseparator'
}, {
xtype: 'tbbutton',
text: 'Menu Button',
menu: [{
text: 'Panel1'
}, {
text: 'Panel2'
}]
}]
})
//Form
Ext.QuickTips.init();
var movie_form = new Ext.FormPanel({
renderTo: document.body,
frame: true,
width: 800,
collapsible: true,
title: 'Movie Information',
items: [{
xtype: 'checkbox',
name: 'mtype',
fieldLabel: 'Horror Movie'
}, {
fieldLabel: 'Local Data',
xtype: 'combo',
name: 'genre',
mode: 'local',
store: dstore, // Calling this one for the Combo data
displayField: 'user_id'
}, {
xtype: 'textarea',
fieldLabel: 'Decription',
anchor: '100%',
maxLength: 5
}, {
fieldLabel: 'extra Comments',
xtype: 'htmleditor',
anchor: '100%'
}, {
xtype: 'panel',
title: 'Panel',
layout: 'border',
collapsible: true,
items: [{
xtype: 'textfield',
fieldLabel: 'PanelTextBox1',
name: 'panelTxt1',
region: 'west'
}, {
xtype: 'textfield',
fieldLabel: 'PanelTextBox2',
name: 'panelTxt2',
region: 'south'
}]
}]
});
});
//Data Store js
var dstore = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['user_id', 'emp_no']
}),
proxy: {
type: 'direct',
directFn: 'Controller.fetchData'
},
autoLoad: true
});
Can someone please help me on this?
Appreciate your help!
Thanks,
Dhaval

Related

Height specified is not the real one on extjs

Hi guys i need help with grid panel, I set the height of the grid to 200px and when I see the grid on the browser it has 600px. I tried to force height with setHeight(), but didn't work.
The code for the grid panel is the next:
for(var i=0; i<json.length;++i){
var data = JSON.parse(json[i].json);
var store = Ext.create('Ext.data.Store', {
fields: ['question', 'type', 'answer'],
data: data.questions
});
var rEditor = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
listeners:{
edit: function (editor, e) { }
}
});
var itemId ="";
if(json[i].enabled){
act++;
itemId = 'active'+act;
}else{
inact++
itemId = 'inactive'+inact;
}
var grid = Ext.create('Ext.grid.Panel', {
height: 200,
margin: '20 35 0 35',
title: 'Group of Questions',
store: store,
plugins: [rEditor],
itemId: itemId,
stateId: itemId,
columns: [
{xtype: 'rownumberer', stateId: itemId+'_1', width:30},
{ text: 'Question', dataIndex: 'question', stateId: itemId+'_2', tdCls: 'gridTree', flex: 1, editor: {xtype: 'textfield'}},
{ text: 'Type', dataIndex: 'type', stateId: itemId+'_3', tdCls: 'gridTree', flex: 1, editor: {xtype: 'combobox', fieldLabel: 'Choose Type', store: types,queryMode: 'local', valueField: 'name',tpl: Ext.create('Ext.XTemplate','<tpl for=".">','<div class="x-boundlist-item">{name}</div>','</tpl>'), displayTpl: Ext.create('Ext.XTemplate','<tpl for=".">','{name}','</tpl>')}},
{ text: 'Answer', dataIndex: 'answer', stateId: itemId+'_4', tdCls: 'gridTree', flex: 1, editor: {xtype: 'textfield', store: types, }}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
scale: 'medium',
glyph: Rd.config.icnLight,
listeners: {
click: {
fn: function(){
Ext.Ajax.request({
url: '',
method: 'POST',
params: {
country: country,
language: language,
realm_id: realm_id,
},
});
}
}
}
},
]
}
],
});
if(json[i].enabled){
active.add(grid);
actives.push(grid);
}else{
inactive.add(grid);
inactives.push(grid);
}
}
I forget to say that in the same container i can have more than one grid panel. I don't know if this is possible. Can you guys tell me please.

How to add search filter in EXTJS

I created a table using extjs where it is having three columns name, email and cars. In extjs we are having a default sorting method. here i want to add search method for all these three columns so that i can also search using the name, email and cars.
What change i need to do for the below code
The expected output is i need to get search filter option under each columns.
Ext.define('ViewerModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.viewermodel',
stores: {
mystore: {
fields: ['name', 'email', 'cars'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com"
}, {
'name': 'Bart',
"email": "bart#simpsons.com"
}, {
'name': 'Homer',
"email": "homer#simpsons.com"
}, {
'name': 'Marge',
"email": "marge#simpsons.com"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
}
});
Ext.define('APP.HorizontalBox', {
extend: 'Ext.container.Container',
requires: ['Ext.layout.container.HBox'],
xtype: 'layout-horizontal-box',
width: 750,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
bodyPadding: 10,
defaults: {
frame: true,
bodyPadding: 10
},
viewModel: {
type: 'viewermodel'
},
items: [{
xtype: 'grid',
title: 'Grid: click on the grid rows',
itemId: 'myGridItemId',
flex: 1.2,
margin: '0 10 0 0',
bind: {
store: '{mystore}',
selection: '{users}'
},
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 0.5
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Cars',
dataIndex: 'cars',
flex: 1
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
padding: '2 5 2 5',
text: 'Edit item',
handler: function (btn) {
var grid = btn.up('grid');
var selectedRow = grid.getSelectionModel().getSelection()[0];
var janela = Ext.create('APP.MyWindow', {
animateTarget: btn.getEl(),
//EDITED
viewModel: {
data: {
users: selectedRow
}
}
}).show();
}
}]
}],
}, {
xtype: 'form',
title: 'View',
itemId: 'panelbindItemId',
flex: 1,
margin: '0 10 0 0',
defaults: {
labelWidth: 50
},
items: [{
xtype: 'displayfield',
margin: '20 0 0 0',
fieldLabel: 'Name',
bind: '{users.name}'
}, {
xtype: 'displayfield',
fieldLabel: 'Email',
bind: '{users.email}'
}]
}]
});
Ext.define('APP.MyWindow', {
extend: 'Ext.window.Window',
alias: 'widget.mywindow',
reference: 'windowreference',
title: 'MyWindow | Edit record',
closable: true,
modal: true,
padding: '10px',
height: 150,
layout: 'fit',
initComponent: function () {
var me = this;
Ext.apply(me, {
items: [{
xtype: 'form',
layout: 'anchor',
defaults: {
padding: '5 0 5 0'
},
items: [{
xtype: 'textfield',
margin: '10 0 0 0',
fieldLabel: 'Name',
bind: '{users.name}'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
bind: '{users.email}'
}]
}]
});
me.callParent(arguments);
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('APP.HorizontalBox', {
renderTo: document.body,
width: 750,
height: 400,
title: 'Title'
});
}
});
You can do it in the afterrender event of grid (Refer this post.) For example:
listeners: {
afterrender: function () {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
text: 'Search',
iconCls: 'x-fa fa-home',
handler: function () {
console.log("Search Item");
}
}]);
}
}
Check this Fiddle.
What you are searching for is the FiltersFeature, and the usage is as follows:
xtype:'grid',
...
features:[{
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'name'
}, {
... (one definition for every column you want to allow filtering one)
}]
}]
Please note that you have to add a requires and maybe even load Ext.ux, as can be found in the last comment.
Other readers please be aware that FiltersFeature is ExtJS4 specific, and has been moved around for ExtJS 5 and 6.
You can also use this code where it will search the data using the date.
listeners: {
afterrender: function () {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
xtype:'datefield',
name:'date1',
fieldLabel:'Filter By',
format: 'y-m-d',
listeners:{
renderer: Ext.util.Format.dateRenderer('y-m-d'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'y-m-d'}) }
}
}

ExtJS combobox: the values loaded but doesn't show

This my code to add combobox in extjs version 2.2 ..... the data is loaded and showed empty rows and when select any row it get the right item and i want to align the label to left
Thanks in advance
Ext.onReady(function(){
var relationValues = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['DKEY', 'NAME_AR', 'NAME_EN'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'LoadRelation'
}),
autoLoad: true
});
var userForm = new Ext.form.FormPanel({
standardSubmit: true,
frame:true,
title: 'User Information',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [
{
xtype: 'combo',
name: 'relation',
fieldLabel: 'Relation',
mode: 'local',
store: relationValues,
displayField:'NAME_EN',
valueField: 'DKEY',
//anchor: '100%',
listeners: {
select: function(f,r,i){
console.log(r);
}
}
}
],
buttons: [{
text: 'Insert',
handler: function() {
userForm.getForm().getEl().dom.action = 'login';
userForm.getForm().getEl().dom.method = 'POST';
userForm.getForm().submit();
}
},{
text: 'Reset',
handler: function() {
userForm.getForm().reset();
}
}]
});
userForm.render('mydiv');
});

EXT JS - on click transfer record to store of popup grid panel

This is my popup with tabs.
I need to give a value from record to gridpanel in tab 2 in store to get attributes from server side by category_id. Searched answer in official documentation and didn't find.
Can help me somebody?
Ext.define('desk.view.CategoryPopup', {
extend: 'Ext.window.Window',
alias: 'widget.categorypopup',
title: 'Change Category',
layout: 'fit',
autoShow: true,
bdoyPadding: 10,
initComponent: function(){
this.items = [{
xtype: 'tabpanel',
items: [
{
xtype: 'form',
title: 'Add / Edit / Delete Category',
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Parent Category'
},
{
xtype: 'textfield',
name: 'new',
fieldLabel: 'New Category'
},
{
xtype: 'textfield',
name: 'id',
fieldLabel: 'Category ID',
hidden: true
},
{
xtype: 'textfield',
name: 'parent',
fieldLabel: 'Parent ID',
hidden: true
}
],
bodyPadding: 10
},
{
xtype: 'gridpanel',
alias: 'widget.categoryattr',
title: 'Attributes',
height: 350,
buttons: [{'text': 'Add attribute', 'action' : 'add-attribute'}],
columns: [
{
name: 'Name',
dataIndex: 'name'
}
],
width: 300,
store: Ext.widget('categoryattributes')
}
]
}];
this.buttons = [
{
text: 'Update',
action: 'add'
},
{
text: 'Delete',
action: 'delete'
}
];
this.callParent(arguments);
}
})
This is function in controller
editCategories: function(grid, record){
var view = Ext.widget('categorypopup');
view.down('form').loadRecord(record);
}
you need something like this:
editCategories: function(grid, record){
var view = Ext.widget('categorypopup');
view.down('form').loadRecord(record);
Ext.Ajax.request({
url: '/api/category/'+ record.getId() +'/attributes', //example url insert your webservice
success: function(response){
var attributes = Ext.decode(response.responseText);
view.down('grid').getStore().loadData(attributes);
}
});
}
you will need a store with a model for your grid.

How to perform checkbox checkevent?

I want a help for performing checkevent in a check box. Here is my code:
View.js:
Ext.define('AM.view.shop.Bill',
{
extend: 'Ext.form.Panel',
alias : 'widget.bil',
title: 'Complete Check Out',
defaultType:'textfield',
initComponent: function() {
this.items= [
// Mailing Address
{ xtype: 'fieldset',
title: 'Mailing Address',
defaultType: 'textfield',
layout: 'anchor',
width:520,
defaults: {
anchor: '100%'
},
items: [{
fieldLabel: 'Street Address',
name: 'mailingStreet',
billingFieldName: 'billingStreet',
allowBlank: false
},
{ xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'City',
name: 'mailingCity',
id:'mailingCity',
billingFieldName: 'billingCity',
flex: 1,
allowBlank: false
}]
}]
},
// Billing Address
{
xtype: 'fieldset',
title: 'Billing Address',
layout: 'anchor',
width:520,
defaults: {
anchor: '100%'
},
items: [{
xtype: 'checkbox',
name: 'billingSameAsMailing',
boxLabel: 'Same as Mailing Address?',
hideLabel: true,
checked: true,
style: 'margin-bottom:10px',
id:'billingSameAsMailing',
},
{ xtype: 'textfield',
fieldLabel: 'Street Address',
name: 'billingStreet',
//style: 'opacity:.3',
disabled: true,
allowBlank: false
},
{ xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'City',
name: 'billingCity',
id:'billingCity',
style: (!Ext.isIE6) ? 'opacity:.3' : '',
flex: 1,
disabled: true,
allowBlank: false
}]
}]
}]
this.callParent(arguments);
}
});
controller.js:
Ext.define('AM.controller.Shops', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'bil textfield[name=mailingCity]' : {
change: function(textField) {
var formpanel = Ext.ComponentQuery.query('bil')[0];
var copyToBilling = formpanel.down('[name=billingSameAsMailing]').getValue();
if (copyToBilling) {
var city=formpanel.down('[name=mailingCity]').getValue();
formpanel.down('[name=billingCity]').setValue(city);
}
}
},
'bil checkbox[name=billingSameAsMailing]': {
check: function(item, checked) {
alert(item);
}
}
});
}
});
I use the same method of textbox, to get a particular checkbox for performing event on
that checkbox. In textbox it's working correctly but in the case of checkbox it does not respond.
You just try the following code.It works For me.
item.checked = true;

Resources