Autoload Panel Listener ExtJs - javascript

I have view file in extjs with a listener code, here it is:
initComponent: function() {
Ext.apply(this, {
title : 'Form Order',
iconCls : 'orderIcon',
width : 850,
maxHeight : 600,
x : 200,
y : 50,
resizable : true,
resizeHandles : 's n',
constrainHeader : true,
closable : true,
modal : true,
autoShow : false,
autoScroll : true,
overflow : 'auto',
layout: {
type: 'auto',
align: 'stretch'
},
items: [
this.createPanelMC()
]
});
this.callParent(arguments);
},
createPanelMC: function() {
this.requiredSign = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var panel = Ext.create('Ext.form.Panel', {
defaultType: 'textfield',
name: 'nodebPanel',
width: '100%',
layout: {
type: 'auto',
align: 'stretch'
},
items: [{
xtype : 'fieldset',
name : 'modlayanan',
title : 'Data Pelanggan',
layout : 'column',
width : '95%',
margin : '10',
items: [{
xtype : 'textfield',
name : 'nomor',
id : 'nomor',
itemId : 'nomor',
fieldLabel : 'PSTN',
emptyText : 'Nomor...',
margin : '10 0 0 0',
width : 350,
labelWidth : 100,
afterLabelTextTpl: this.requiredSign
}, {
xtype : 'textfield',
fieldLabel : 'Speedy',
name : 'speedy',
id : 'speedyVal',
itemId : 'speedyVal',
margin : '10 0 10 20',
width : 350,
labelWidth : 100
}, {
xtype : 'textareafield',
name : 'instaLAddress',
fieldLabel : 'Alamat Instalasi',
emptyText : 'Alamat Instalasi...',
readOnly : true,
labelWidth : 100,
autofocus: true,
//listener
listeners : {
render: function() {
this.getEl().on('mousedown', function(e, t, eOpts) {
var nopstn = Ext.getCmp('nomor').getValue();
var speedy = Ext.getCmp('speedyVal').getValue();
if (nopstn != '' && speedy != '') {
var store = Ext.ComponentQuery.query('#treeProduct')[0].getStore();
console.log(store);
store.load({
params: {
nopstn: nopstn,
speedy: speedy
}
});
}
});
}
}
},
this.createTreePaketExist(),
]
}]
});
return panel;
},
createTreePaketExist: function() {
var storeTree = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'data/newoss_get_paket.php',
actionMethods :{
create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'
}
}
});
var groupProduct = Ext.create('Ext.tree.Panel', {
store : storeTree,
itemId : 'treeProduct',
renderTo : Ext.getBody(),
name : 'treeProduct',
rootVisible : false,
useArrows : true,
layout :'fit',
margin : '0 0 0 0',
autoScroll : true,
height : 150,
width : '93%',
listeners:
{
checkchange: function(node, checked, eOpts){
node.eachChild(function(n) {
node.cascadeBy(function(n){
n.set('checked', checked);
});
});
p = node.parentNode;
var pChildCheckedCount = 0;
p.suspendEvents();
p.eachChild(function(c) {
if (c.get('checked')) pChildCheckedCount++;
p.set('checked', !!pChildCheckedCount);
});
p.resumeEvents();
}
}
});
return groupProduct;
}
and the listener will show tree panel in createTreePaketExist(). the problem is.. i want show tree panel result without click anything,just show the result when panel is loading.
in my code, the result will show after i put pointer in textareafield. how can it just show without any click, just show when panel loaded? anybody can help me? thanks..

I think this has already been answered in your previous Question.
The issue that you are having here is that your store is dependent on user typed values, so your store can't load until the user has done something.
So you cannot automatically load the store without the values unless you provide default values to load the store with and then it can reload with different data if the user enters new information.
Its difficult to provide an in-depth answer to this without knowing what data the store is working with, how it is filtered based on the user data, what data they can enter or you expect them to enter.

Related

Ext js form validator validate with unique names

I have Ext Form :
Ext.define('Count.view.AddJListForm', {
extend : 'Ext.form.Panel',
controller : 'List',
xtype : 'add-list',
name : 'addListForm',
cls : 'addFormToolbar',
width : '100%',
height : '100%',
layout : 'hbox',
fullscreen : true,
scrollable : true,
items :
[
{
xtype : 'titlebar',
title : 'Add New Name',
docked : 'top',
},
{
xtype : 'formpanel',
fullscreen : true,
items :
[
{
xtype : 'hiddenfield',
name : 'id'
},
{
xtype : 'textfield',
name : 'ListName',
maxLength : 100,
label : 'List name',
labelAlign : 'top',
required : true
},
{
xtype : 'numberfield',
name : 'Count',
maxLength : 10,
label : 'Count',
labelAlign : 'top',
required : true
},
]
},
{
xtype : 'toolbar',
ui : 'plain',
docked : 'bottom',
items :
[
{
xtype : 'spacer'
},
{
xtype : 'button',
text : 'CANCEL',
name : 'closeAddListFormView',
},
{
xtype : 'button',
text : 'SAVE',
name : 'formSave',
}
]
}
]
});
Controller function :
In this function to get the form values and stored into Database:
Ext.define('Count.view.ListController', {
extend: 'Ext.app.ViewController',
alias: 'controller.JapaList',
control: {
'button[name=formSave]': {
tap : 'saveListData'
}
}
// File save function
saveListData : function(button, record)
{
var form = button.up('formpanel');
var values = form.getValues();
var BgImage = '';
var audioFile = '';
if(form.validate())
{
var ListName = values.ListName;
var Count = values.Count;
callBackSaveData var table = JapaCount.Db.tblJapaList;
toDbArray['ListName'] = ListName;
toDbArray['Count'] = Count;
Count.Db.dbInsertWithCallback(table,toDbArray, me.loadStore, me);
}
data stored on DB. But I need to validate ListName must be unique like a username. if there are any rerecords like the same name it should show an error. In this function were to check that validator or function? anyone have an idea please share
You can find record with ListName using method findRecord on instance of store.
let record = store.findRecord('ListName', ListName, 0, false, false, true);
if (!record) {
//do smth here if ListName not found
}

ExtJs put a tooltip to the horizontal scroll controls Tab Panel

I have a tab panel with some items inside them, when I add many elements the panel puts a horizontal movement controlers, how can i do to put a tooltip in this controls?
This is the definition of my tab Panel:
var tabPanel = Ext.create('Ext.tab.Panel',{
id: 'tabTabla',
items: [{
title: 'list1',
tooltip: 'list1',
items:[tree]
}, {
title: 'list2',
tooltip: 'list2',
autoWidth : true,
autoHeight : true,
plain : true,
defaults : {
autoScroll : true,
bodyPadding : 0
},
items: [{
xtype : 'label',
text : 'list description.',
},
gridV]
},{
title: 'list3',
tooltip: 'list3',
autoWidth : true,
autoHeight : true,
plain : true,
defaults : {
autoScroll : true,
bodyPadding : 0
},
items: [
gridC
]
}]
});
var scrollers = Ext.select('.x-box-scroller-tab-bar').elements;
Ext.each(scrollers, function(scroll, id) {
scroll.title = (id == 0 ? 'left click' : 'right click');
});
In this tab Panel I add more panels:
Ext.apply(this, {
title: 'TITLE',
constrain: true,
header : {
titlePosition : 2,
titleAlign : 'center'
},
closable : false,
x : 20,
y : 270,
layout : 'fit',
animCollapse : true,
collapsible : true,
collapseDirection : Ext.Component.DIRECTION_LEFT,
items: [tabPanel]
});
Maybe this is not good solution, but you can use it until you find better solution. Fiddle : https://fiddle.sencha.com/#fiddle/tng
var scrollers = Ext.select('.x-box-scroller-tab-bar');
Ext.each(scrollers, function(scroll, id) {
scroll.set({
"data-qtip": id == 0 ? 'left click' : 'right click'
});
});
Or
var scrollers = Ext.select('.x-box-scroller-tab-bar').elements;
Ext.each(scrollers, function(scroll, id) {
scroll.title = (id == 0 ? 'left click' : 'right click')
});

Calling Function in ExtJS

I am trying to call a function from ExtJS popup but it is not identifying the method. I guess I am missing the scope. Please take a look at the code below and suggest where am I going wrong.
In the below code section the handler: function () is not calling the intended method.
Ext.define('App.controller.MakerController', {
extend : 'Ext.app.Controller',
models : [],
stores : [],
views : [ 'makertabpanel' ],
init : function() {
this.control({
'makertabpanel button[name= addNewUser]' : {
click : this.openDialog
},
'makertabpanel button[name= modifyUser]' : {
click : this.openmodifyDialog
}
});
},
openmodifyDialog : function() {
var userinfoGrid = Ext.getCmp('userinfogridID');
if (userinfoGrid.getSelectionModel().hasSelection()) {
var row = userinfoGrid.getSelectionModel().getSelection()[0];
console.log(row.get('id'));
var name = Ext.getCmp('usernameID').setValue(row.get('id'));
var name = Ext.getCmp('userFirstName').setValue(row.get('fname'));
var name = Ext.getCmp('userLastName').setValue(row.get('lname'));
}
this.openDialog();
},
openDialog : function() {
//var that = this;
var dialog = Ext.create('Ext.window.Window', {
title : 'Permission Uesr',
itemId : 'adduserpopup',
id : 'adduserpopup',
closeAction: 'hide',
modal : true,
width : 1000,
height : 400,
layout : {
type: 'vbox',
align: 'stretch',
padding: 5
},
resizable : false,
items : [ createuserinformation,itemselectorGrid],
buttons : [ {
text : 'Save',
id : 'okbutton',
handler: function () {
console.log("Save user Data 1 :"+this.up('window'));
//this.up('window').saveUserData();
this.saveUserData(); // this is not working
}
} ]
});
dialog.show();
},
saveUserData : function() {
alert("Save user Data");
// create an AJAX request
}
});
how about:
openDialog : function() {
var me = this;
var dialog = Ext.create('Ext.window.Window', {
title : 'Permission Uesr',
itemId : 'adduserpopup',
id : 'adduserpopup',
closeAction: 'hide',
modal : true,
width : 1000,
height : 400,
layout : {
type: 'vbox',
align: 'stretch',
padding: 5
},
resizable : false,
items : [ createuserinformation,itemselectorGrid],
buttons : [ {
text : 'Save',
id : 'okbutton',
handler: function () {
console.log("Save user Data 1 :"+this.up('window'));
me.saveUserData(); // instead using this use local variable me
}
} ]
});
dialog.show();
},

ExtJs : TypeError: this.layout.layout is not a function

In my J2EE web application there is a window with a form. It is showing when user clicks a button.
new Ext.Button({
text : 'Assign Vehicle',
handler : function() {
showVehicleAssignWin();
}
}
My showVehicleAssignWin() function is in TourPlan.js file. This is my TourPlan.js file.
function showVehicleAssignWin(){
assignVehicleWin.show(this);
}
My assignVehicleWin window is declaring in the DataEntryForms.js file.
var assignVehicleWin;
var assignVehicleForm = new Ext.FormPanel({
frame : true,
labelWidth : 200,
labelAlign : 'left',
// renderTo:document.body,
autoScroll : true,
// defaultType: 'displayfield',
bodyStyle : {
"background-color" : "#000000",
"padding" : "10px"
},
/*
* layout : { type : 'vbox', align : 'center' }, defaults : { labelWidth :
* 200, padding : '10 10 10 25' },
*/
items : [ {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Vehicle Registration Number',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Device ID',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Default Rep',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Driver',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Assistant',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Porter 1',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Porter 2',
editable : false,
}, {
xtype : 'combo',
name : 'include_type',
fieldLabel : '00Porter 3',
editable : false,
},
],
buttons : [ {
text : 'Delete',
handler : function() {
}
}, {
text : 'View',
handler : function() {
}
}, {
text : 'New',
handler : function() {
}
}, {
text : 'Exit',
handler : function() {
assignVehicleWin.hide();
}
} ]
});
assignVehicleWin = new Ext.Window({
title : 'Vehicle Assigning',
layout : 'fit',
// autoScroll: true,
// y: 120,
width : 480,
height : 530,
minWidth : 480,
minHeight : 530,
resizable : false,
draggable : true,
// modal: true,
plain : true,
// bodyStyle:'padding:8px;',
// buttonAlign:'center',
closeAction : 'hide',
// floating: true,
closable : true,
items : [ assignVehicleForm ]
});
I have to click the button two times to show the window. And also the window is showing up but it's empty. The FireBug console says
TypeError: this.layout.layout is not a function
I am using ExtJs 3.0.
Anyone has and idea what's going on here? Please help me to correct this error.
Thank You
i have prepared one sample code for you try this. i hope it will help you.
there is no need to use Ext.namespace();.
WindowLayout.js
var assignVehicleWin;
var assignVehicleForm = new Ext.FormPanel({
frame : true,
labelWidth : 200,
labelAlign : 'left',
autoScroll : true,
bodyStyle : {
"background-color" : "#000000",
"padding" : "10px"
},
defaults : {
},
items : [{
fieldLabel : '00Vehicle Registration Number',
},{
fieldLabel : '00Device ID'
},{
fieldLabel : '00Default Rep'
}, {
fieldLabel : '00Driver'
}, {
fieldLabel : '00Assistant'
}, {
fieldLabel : '00Porter 1'
}, {
fieldLabel : '00Porter 2'
}, {
fieldLabel : '00Porter 3'
}],
buttons : [{
text : 'Delete',
handler : function() {
}
},{
text : 'View',
handler : function() {
}
},{
text : 'New',
handler : function() {
}
},{
text : 'Exit',
handler : function() {
assignVehicleWin.hide();
}
}]
});
assignVehicleWin = new Ext.Window({
title : 'Vehicle Assigning',
layout : 'fit',
width : 480,
height : 530,
minWidth : 480,
minHeight : 530,
resizable : false,
draggable : true,
plain : true,
closeAction : 'hide',
items : assignVehicleForm
});
Panel.js
Ext.onReady(function(){
var BorderEx = new Ext.Panel({
renderTo : Ext.getBody(),
width : 300,
height : 300,
style : "margin : 10px 10px 10px 10px;", /* MARGINS config used in boxlayout Or border layout only */
title : 'test for stackoverflow',
monitorResize : true,
items : [{
xtype : 'button',
width : 50,
height : 50,
text : 'Open Window',
handler : function() {
assignVehicleWin.show();
}
}]
});
});
NOTE: make sure this both files are registered in index.html

Changing accordion to vbox only renders the first child item

Initially this panel had accordion layout. Both the child panels where shown then. But as soon as I changed it to vbox, it shows the second panel. But no tree inside!
See the image.
Related Code
OurApp.online_tree_store = Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : []
}
});
OurApp.online_tree = Ext.create('Ext.tree.Panel', {
store : OurApp.online_tree_store,
title : 'Online',
region: 'north',
useArrows : true,
rootVisible : false,
listeners : {
itemdblclick : contactitemdblclick
}
});
/// Note: Offline tree is exactly the same as online tree.
Ext.create('Ext.panel.Panel', {
closable : false,
width : 300,
maxWidth : 400,
itemId : 'viewport-contacts',
constrain : true,
layout : 'accordion', // <--- layout changed to vbox or border
region : 'west',
hidden : true,
border : true,
defaults : {
height : '50%', // <--- used for vbox
},
tbar : [{
xtype : 'button',
text : 'Sign out',
iconCls : 'icon-disconnect',
handler : function() {
}
}],
items : [OurApp.online_tree, OurApp.offline_tree],
});
height: '50%' should be flex: 1.
You'll also want to specify align: 'stretch'
Ext.require('*');
Ext.onReady(function() {
var panel = Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 400,
height: 400,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
title: 'P1',
flex: 1
}, {
title: 'P2',
flex: 1
}]
});
});

Categories

Resources