Results 1 to 3 of 3

Thread: Modern App with Navigation View

  1. #1
    Sencha User
    Join Date
    Apr 2016
    Posts
    2

    Default Answered: Modern App with Navigation View

    Hello,

    I'm want to create a simple mobile web app, which have a login window, a list view for data, a form to show detail and a form to edit data.
    So, i follow from extjs6 modern example, addressbook app.

    Now, i able create using Navigation View, the flow work great
    Login > List data > Detail form > submit form

    now i facing some case issue:
    1. Login > List data, choose one of them
    2. Detail form show the detail, I pull the data from web service to fill in the textfield in Detail Form (Controller : setupDocument)
    3. Back to List data, and choose another data
    4. Detail Form show with blank textfield, i do network debug, show that the data from web service is loaded and work well.

    I think its problem with pop and push event, already try to destroy etc, but the textfield wont filled.

    here my controller
    Code:
    config: {
            refs: {
                main: 'mainview',
                editButton: '#editButton',
                loginView: 'login',
                documentList: 'documentlist',
                showDocument: 'document-show',
                editDocument: 'document-bid',
                saveButton: '#saveButton',
                loginButton: '#loginButton',
                mainList: 'mainlist',
                txtTrackingNo: '#txtTrackingNo',
                txtDocumentNo: '#txtDocumentNo',
                txtDocumentName: '#txtDocumentName',
                txtSupplier: '#txtSupplier',
                txtValue: '#txtValue',
                txtTotalValue: '#txtTotalValue'
            },
    
    
            control: {
                main: {
                    push: 'onMainPush',
                    pop: 'onMainPop'
                },
                editButton: {
                    tap: 'onListEdit'
                },
                documentList: {
                    itemtap: 'onListSelect'
                },
                mainList: {
                    itemtap: 'onListSelect'
                },
                loginButton: {
                    tap: 'onLoginClick'
                }
            }
        },
    
    
    
    
        onMainPush: function(view, item) {
            if (item.xtype == "document-show") {
                this.showEditButton();
            } else {
                this.hideEditButton();
            }
        },
    
    
        onMainPop: function(view, item) {
            switch(item.xtype){
                case "documentlist" :
                    this.hideEditButton();
                    this.doLogout();
                    break
                case "document-show" :
                    this.refreshList();
                    this.hideEditButton();
                    break
                default:
                    this.refreshList();
                    this.hideEditButton();
                    break
            }
        },
        
        onListSelect: function(list, index, node, record) {
            var docNo = record.data.reference_no;
            this.setupDocument(docNo);
        },
    
    
        onListEdit: function() {
            if (!this.editDocument) {
                this.editDocument = Ext.create('MyModernApp.view.Docs.EditDocument');
                this.getMain().push(this.editDocument);
            }
            this.showSaveButton();
        },
    
    
    
    
        showEditButton: function() {
            var editButton = this.getEditButton();
    
    
            if (!editButton.isHidden()) {
                return;
            }
    
    
            this.hideSaveButton();
    
    
            editButton.show();
        },
    
    
        hideEditButton: function() {
            var editButton = this.getEditButton();
    
    
            if (editButton.isHidden()) {
                return;
            }
    
    
            editButton.hide();
        },
    
    
        showSaveButton: function() {
            var saveButton = this.getSaveButton();
    
    
            if (!saveButton.isHidden()) {
                return;
            }
            this.hideEditButton();
            saveButton.show();
        },
    
    
        hideSaveButton: function() {
            var saveButton = this.getSaveButton();
    
    
            if (saveButton.isHidden()) {
                return;
            }
    
    
            saveButton.hide();
        },
    
    
        
        onLoginClick: function() {
            var me = this;
    
    
            var usr = Ext.getCmp('txtUserId').getValue();
            var pwd = Ext.getCmp('txtPassword').getValue();
            var loginType = 0;
    
    
            Ext.Ajax.request({
                url: myUrl,
                method: 'POST',
                params: {user: usr, password: pwd, loginType: loginType},
                success: function ( result, request ) {
                    var jsonData = Ext.JSON.decode(result.responseText);
                    var resultSuccess = jsonData.success;
                    var resultMessage = jsonData.message;
                    if(resultSuccess === false){
                        Ext.getCmp('txtUserId').setValue('');
                        Ext.getCmp('txtPassword').setValue('');
                        Ext.Msg.alert(MyModernApp.Labels.Login, resultMessage);
                    }else{
                        myToken = jsonData.token;
                        myUserId = jsonData.userId;
                        myCompanyId = jsonData.companyId;
                        myCompanyCode = jsonData.companyCode;
                        myRoleId = jsonData.roleId;
                        myUserName = jsonData.userName;
                        myCompanyName = jsonData.companyName;
                        
                        me.refreshList();
                        
                        me.documentList = Ext.create('MyModernApp.view.main.DocumentList');
                        me.getMain().push(me.documentList);
                    }
                },
                failure: function ( result, request ) {
                    Ext.Msg.alert(MyModernApp.Labels.Login, resultMessage);
                }
            });
        },
        
        //Do Logout
        doLogout: function() {
    
    
            Ext.Ajax.request({
                url: myUrl,
                method: 'POST',
                params: {id: myUserId, token: myToken},
                success: function ( result, request ) {
                    var jsonData = Ext.JSON.decode(result.responseText);
                    var resultSuccess = jsonData.success;
                    var resultMessage = jsonData.message;
                    if(resultSuccess === true){
                        myToken = '';
                        myUserId = '';
                        myCompanyId = '';
                        myCompanyCode = '';
                        myRoleId = '';
                        myUserName = '';
                        myCompanyName = '';
                    }else{
                        Ext.Msg.alert(MyModernApp.Labels.Logout, resultMessage);
                    }
                }
            });
            
        },
        
        refreshList: function() {
            var searchStatement =
                trackingNo + '=a;' +
                docNo + '=a;' +
                docType + '=a;' +
                docStatus + '=a;' +
                dateType + '=a;' +
                dateRange + '=a;' +
                partnerId + '=a;' +
                partnerName + '=a';
            var storeAll = this.getStore('DocumentGridViewList');
            storeAll.proxy.extraParams = {id: myUserId, token: myToken, viewType: viewType, archiveFlag: archiveFlag, search: searchStatement};
            storeAll.loadPage(1);
            
        },
        
        setupDocument: function(docNo){
            var me = this;
    
    
            Ext.destroy(this.showDocument);
            this.showDocument = Ext.create('MyModernApp.view.Docs.DocumentView');
            this.getMain().push(this.showDocument);
            
            
            Ext.Ajax.request({
                url: myUrl,
                method: 'POST',
                params: {id: myUserId, token: myToken, docNo: docNo},
                success: function ( result, request ) {
                    if(resultSuccess === true){
                        me.getTxtTrackingNo().setValue(resultData.payment_no);
                        me.getTxtDocumentNo().setValue(resultData.document_no);
                        me.getTxtDocumentName().setValue(resultData.document_name);
                        me.getTxtSupplier().setValue(resultData.company_name);
                        me.getTxtValue().setValue(Ext.util.Format.number(10, '0,000.00'));
                        me.getTxtLastOffer().setValue(resultData.lastBid);
                    }else{
                        Ext.Msg.alert(MyModernApp.Labels.Error, resultMessage);
                    }
                    
                },
                failure: function ( result, request ) {
                    Ext.Msg.alert(MyModernApp.Labels.Error, MyModernApp.Messages.SERVER_FAILURE);
                }
            });
        }
    Any suggestion or tips so i can switch from form to form

  2. Any errors in the console? Set a debugger in the success callback. In your code, I do see 1 syntax error:

    Code:
    if(resultSuccess === true){
    will likely fail. May nee to be:

    Code:
    if (result.success) {
    but you should have a breakpoint before it to see what it should be.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,450
    Answers
    3997

    Default

    Any errors in the console? Set a debugger in the success callback. In your code, I do see 1 syntax error:

    Code:
    if(resultSuccess === true){
    will likely fail. May nee to be:

    Code:
    if (result.success) {
    but you should have a breakpoint before it to see what it should be.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

    Check out my GitHub:
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Apr 2016
    Posts
    2

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Any errors in the console? Set a debugger in the success callback. In your code, I do see 1 syntax error:

    Code:
    if(resultSuccess === true){
    will likely fail. May nee to be:

    Code:
    if (result.success) {
    but you should have a breakpoint before it to see what it should be.
    error console only after i click grid for the 2nd time.
    Uncaught TypeError: Cannot read property 'slice' of null
    btw, now i create the new project, and follow the example once again and work perfect

    anyways, thank you mitchellsimoens, hope i can finish my app

Similar Threads

  1. [OPEN] Modern navigation view puts custom back button on right
    By estesbubba in forum Ext JS 6.x Bugs
    Replies: 6
    Last Post: 27 Aug 2016, 4:34 AM
  2. Replies: 2
    Last Post: 3 May 2016, 9:19 PM
  3. Replies: 5
    Last Post: 13 Apr 2016, 12:21 PM
  4. Replies: 1
    Last Post: 18 Sep 2015, 10:41 AM
  5. Replies: 3
    Last Post: 1 Apr 2012, 9:49 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •