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');
});
Related
In the following example with cellediting I want to dynamically change the emptyfield textfield editor and clear the field.
However, if I select the first item in the combobox I get the textfield reference, but only once. If after I selecting another item in the combobox I can no longer get the textfield reference or change the emptyText.
Also I can not clear the textfield value when selecting one combobox item.
FIDDLE: https://fiddle.sencha.com/#view/editor&fiddle/2g3d
Ext.create('Ext.data.Store', {
storeId: 'mystore',
fields:[ 'type', 'description'],
});
var combostore = Ext.create('Ext.data.Store', {
fields:[ 'name'],
data:[
{'name' : 'Phone'},
{'name' : 'Mobile'},
{'name' : 'Email'}
]
});
Ext.create('Ext.data.Model', {
fields:[
{name:'type', type:'string'},
{name:'description', type:'string'}
]
});
Ext.create('Ext.form.Panel', {
title: 'Order Info',
width: 400,
bodyPadding: 10,
defaults: {
anchor: '100%',
padding: 5
},
items: [{
xtype: 'gridpanel',
selModel: 'rowmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
pluginId: 'celleditingId'
},
header:{
titlePosition: 0,
items:[{
xtype:'button',
text: 'Add row',
handler: function(btn){
var record = Ext.create('Ext.data.Model', {});
var grid = btn.up('grid'),
rowediting = grid.getPlugin('celleditingId');
grid.store.insert(0,{});
rowediting.startEdit(0, 0);
}
}]
},
title: 'Contact',
store: Ext.data.StoreManager.lookup('mystore'),
columns: [{
text: 'Type',
dataIndex: 'type',
editor:{
xtype: 'combobox',
name: 'type',
valueField: 'name',
displayField: 'name',
store: combostore,
queryMode: 'local',
markDirty:false,
listeners: {
select: function (combo, record, eOpts){
var columnTextfieldEditor = Ext.ComponentQuery.query('#textfieldEd')[0].editor,
grid = combo.up('grid');
if (combo.value === 'Phone') {
Ext.apply(columnTextfieldEditor, {
emptyText: 'First text',
submitEmptyText: false
});
var row = grid.getSelectionModel().getSelection()[0];
grid.getPlugin('celleditingId').startEditByPosition({
row: grid.store.indexOf(row),
column: 1
});
// columnTextfieldEditor.setValue('');
}else {
var row = grid.getSelectionModel().getSelection()[0];
grid.getPlugin('celleditingId').startEditByPosition({
row: grid.store.indexOf(row),
column: 1
});
Ext.apply(columnTextfieldEditor, {
emptyText: 'Second text',
submitEmptyText: false
});
}
console.log(combo.value);
console.log(columnTextfieldEditor);
}
}
},
flex: 0.7
},{
text: 'Description',
dataIndex: 'description',
itemId: 'textfieldEd',
editor:{
xtype: 'textfield',
name: 'description'
},
flex: 1
}],
listeners:{
afterrender: function(grid){
var record = Ext.create('Ext.data.Model', {});
rowediting = grid.getPlugin('celleditingId');
grid.store.insert(0,{});
rowediting.startEdit(0, 0);
}
},
height: 200
}],
renderTo: Ext.getBody(),
});
Just change this:
var columnTextfieldEditor = Ext.ComponentQuery.query('#textfieldEd')[0].editor
To This:
var columnTextfieldEditor = Ext.ComponentQuery.query('#textfieldEd')[0].getEditor()
And Change the order of the second "apply":
Ext.apply(columnTextfieldEditor, {
emptyText: 'Second text',
submitEmptyText: false
});
grid.getPlugin('celleditingId').startEditByPosition({
row: grid.store.indexOf(row),
column: 1
});
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
The setup:
I have a grid with a roweditor plugin. On the toolbar I have a "add new" button to insert a new row.
The problem:
When I'm trying to add a new record my store.insert(0, rec), doesn't seems to add the record on the 0 index.
My view:
Ext.define("app.view.partners.Partners",{
extend: "Ext.grid.Panel",
alias: 'widget.partners',
requires: [
"Admin.view.partners.PartnersController",
"Admin.view.partners.PartnersModel"
],
height: 700,
controller: "partners",
viewModel: {
type: "partners"
},
bind: {
store: '{partners}'
},
title: "Partners List",
columns: [
{ header: 'id', dataIndex: 'id', hidden: true},
{ header: 'Partner', dataIndex: 'Partner', flex: 3,
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
tbar: [{
text: 'Add record',
iconCls: 'fa fa-plus-square green',
handler: 'onAddClick'
}],
selType: 'rowmodel',
plugins: [{
ptype: 'rowediting',
clicksToMoveEditor: 1,
pluginId: 'partnersRowEditingPlugin',
autoCancel: false,
listeners: {
edit: 'onEditClick',
canceledit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
context.store.remove(context.record);
}
}
}
},{ptype: 'bufferedrenderer'},
{ptype: 'gridfilters'}
]
});
My viewmodel:
Ext.define('app.view.partners.PartnersModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.partners',
stores: {
partners:{
model: 'app.model.Partners',
storeId: 'partners',
autoLoad: true,
sorters: [{
property: 'id',
direction: 'DESC'
}],
proxy:{
type: 'ajax',
// load remote data using HTTP
url: 'read.php',
reader: {
type: 'json',
idProperty: 'id',
rootProperty: 'data',
totalProperty:'total'
}
}
}
}
});
and in the viewcontroller:
onAddClick: function(){
var rec = new app.view.partners.PartnersModel({});
//var rec = new new Admin.model.Partners({});
this.isNewRecord = true;
var store = this.getView().getStore();
store.insert(0, rec);
this.getView().getPlugin(controllerName + 'RowEditingPlugin').startEdit(0,0);
}
here is a console.log after store.insert(0,rec)
It appears that the store does the insert, but it is inserted last. I can see it added on the grid as the last record.
I don't know what I am doing wrong.
Using the example in "ext-designer-for-ext-js-4-users-guide.pdf" i've put together the following. The issue is that the store is not binding. ie the select is empty.
MyComboBox.js
Ext.define('MyApp.view.MyComboBox', {
extend: 'MyApp.view.ui.MyComboBox',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});
Ext.define('MyApp.view.ui.MyComboBox', {
extend: 'Ext.form.field.ComboBox',
fieldLabel: 'comboList',
displayField: 'comboList',
queryMode: 'local',
store: 'MyArrayStore',
triggerAction: 'all',
valueField: 'comboList',
initComponent: function() {
var me = this;
me.callParent(arguments);
}
});
store/MyArrayStore.js
Ext.define('MyApp.store.MyArrayStore', {
extend: 'Ext.data.Store',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyArrayStore',
data: [
[
'Search Engine'
],
[
'Online Ad'
],
[
'Facebook'
]
],
proxy: {
type: 'ajax',
reader: {
type: 'array'
}
},
fields: [
{
name: 'comboList'
}
]
}, cfg)]);
}
});
** update **
this was driving me crazy. It's [turns out][1] my array need to be json format. When i updated it to
[{"comboList" : "Hello"}, {"comboList" : "Hi"}, {"comboList" : "GoodMorning"}]
it worked.
I started to try and pick apart your implementation but it seems somewhat convoluted, starting with the store where there is local data and a proxy defined but no url for the proxy.
It seemed easier to just give you a simplified implementation of a combobox (using local data because it seems that is what you are trying to do):
// the datastore
var myStore = Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
data: [
{value: 1, name: 'Search Engine'},
{value: 2, name: 'Online Ad'},
{value: 3, name: 'Facebook'}
]
});
// a window to hold the combobox inside of a form
myWindow = Ext.create('Ext.Window', {
title: 'A Simple Window',
width: 300,
constrain: true,
modal: true,
layout: 'fit',
items: [{
// the form to hold the combobox
xtype: 'form',
border: false,
fieldDefaults: {
labelWidth: 75
},
bodyPadding: '15 10 10 10',
items: [{
// the combobox
xtype: 'combo',
id: 'myCombo',
fieldLabel: 'Title',
valueField: 'value',
displayField: 'name',
store: myStore,
queryMode: 'local',
typeAhead: true,
forceSelection: true,
allowBlank: false,
anchor: '100%'
},{
// shows the selected value when pressed
xtype: 'button',
margin: '10 0 0 100',
text: 'OK',
handler: function() {
alert('Name: ' + Ext.getCmp('myCombo').getRawValue() +
'\nValue: ' + Ext.getCmp('myCombo').value);
}
}]
}]
});
// show the window
myWindow.show();
This creates a combobox inside of a little window with an OK button. When you press OK it will alert the visible text of the combobox Ext.getCmp('myCombo').getRawValue() and the value of the item in the combobox Ext.getCmp('myCombo').value.
If you drop this in your project you can get an idea of how it implements, it should just run.
If you actually wanted a remote datastore (from a webservice that returns json for example) you would just need to change the datastore configuration like so:
var myRemoteStore = Ext.create('Ext.data.Store', {
fields: ['value', 'name'],
proxy: {
type: 'ajax',
url: 'myWebservice.php', // whatever your webservice path is
reader: 'json',
},
autoLoad:true
});
I novice in extJS.
I have trouble with PagingToolbar and Store. When I click to 'next page' PagingToolbar works correctly , but the gride don't update. Why is this happening? Help me please.
This's my code:
`
getJsonReader: function(){
this.JsonReader = new Ext.data.JsonReader({
totalProperty: 'results',
root: 'data',
idProperty: 'id',
fields: [
{name:'id', type: 'int', allowBlank: false},
{name: 'firstName', allowBlank: false},
{name: 'lastName', allowBlank: false},
{name: 'middleName',allowBlank: false},
{name: 'fotoTeacher',allowBlank: false}
]
});
return this.JsonReader;
},
getStore: function(){
this.store = new Ext.data.Store({
id: 'store-teachers',
reader: this.getJsonReader(),
proxy: new Ext.data.HttpProxy({
method: 'POST',
url: 'admin/get_teachers'
}),
autoLoad: {params:{start:0, limit:3}},
listeners: {
load: function()
{
if(jQuery('#panel-editTeacherHtml').length)
{
//remove attention
jQuery('#panel-editTeacherHtml').remove();
}
Ext.getCmp('grid-editTeacher').show();
},
exception: function()
{
Ext.getCmp('grid-editTeacher').hide();
if(!document.getElementById('panel-editTeacherHtml'))
{
Ext.DomHelper.insertAfter('panel-editTeacher-refreshButton',{
id: 'panel-editTeacherHtml',
html:'Увы, но нет ни одного преподавателя =('
});
}
}
}
});
return this.store;
},
titleTeacherfoto: function(val)
{
return '<img src="'+val+'" />';
},
getGrid: function(){
this.grid = new Ext.grid.GridPanel({
frame : true,
autoHeight:true,
id:'grid-editTeacher',
loadMask: true,
store: this.getStore(),
sm: new Ext.grid.CheckboxSelectionModel({
singleSelect: false,
checkOnly: true
}),
cm: new Ext.grid.ColumnModel({
{header: 'Фамилия', dataIndex: 'lastName'},
{header: 'Имя', dataIndex: 'firstName', sortable: false},
{header: 'Отчество', dataIndex: 'middleName', sortable: false},
{header: 'Фотография', dataIndex: 'fotoTeacher', renderer: this.titleTeacherfoto}
],
defaultSortable: true
}),
viewConfig: {
forceFit:true
},
bbar: new Ext.PagingToolbar({
id:'pager-editTeacher',
displayInfo: true,
displayMsg: 'Преподаватели {0} - {1} из {2}',
beforePageText: 'Страница',
afterPageText: 'из {0}',
prependButtons: true,
pageSize: 3,
store: this.getStore()
})
})
return this.grid;
},
getPanel: function(){
return new Ext.Panel({
frame: true,
bodyStyle: 'padding:5px;',
id: 'panel-editTeacher',
autoScroll: true,
title: 'Панель редактирования преподавателей',
items: [{
xtype: 'button',
text: 'Обновить',
iconCls: 'refresh',
id:'panel-editTeacher-refreshButton',
style: 'margin-bottom:10px',
listeners:{
click: function(){
grid = Ext.getCmp('grid-editTeacher');
grid.getStore().reload();
Ext.getCmp('pager-editTeacher').doRefresh();
}
}
},
this.getGrid()
]
});
}
Ajax responce
{success:true,
results:5,
data:[{"id":"1","firstName":"","lastName":"","middleName":"","fotoTeacher":"\/modules\/admin\/design\/img\/default\/teacher_thumb.jpg"},{"id":"2","firstName":"","lastName":"","middleName":"","fotoTeacher":"\/modules\/admin\/design\/img\/default\/teacher_thumb.jpg"},{"id":"3","firstName":"","lastName":"","middleName":"","fotoTeacher":"\/modules\/admin\/design\/img\/default\/teacher_thumb.jpg"}]}
P.s: Sorry for my english =)
I think your problem is that every time you click the button, a new store is created, and in the process a new Reader object.
getStore: function(){
this.store = new Ext.data.Store({
....
So if you click the button, what happens is:
grid.getStore().reload();
//GridInstance.createANewStoreForMe(andCreateANewReaderForYourself).reload
So, the newly created store fetches the exact same result as the original one.
What you should be doing is creating the store in the objects namespace (this) during initialization, and not afterwards:
MyApp.MyClass = Ext.extend(Ext.grid.Grid, {
initComponent: function () {
this.store = new Ext.data.Store({
...
});
// create config object
var config = {
store : store,
...
};
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
// call parent
MyApp.MyClass.superclass.initComponent.call(this);
} // eo function initComponent
,getStore: function() {
return this.store;
// Or this.getStore(); in the case of this class (Grid which is always able to return it's own store)
}
}); // eo extend
var myGrid = new MyApp.MyClass({});
Good luck,
Rob